@atlaskit/emoji 70.10.1 → 70.10.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 70.10.3
+
+### Patch Changes
+
+- [`3bdfab536342f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bdfab536342f) -
+  Updated the delete emoji screen to match the upload emoji screen
+- Updated dependencies
+
+## 70.10.2
+
+### Patch Changes
+
+- [`0ad23a9827f5d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ad23a9827f5d) -
+  Updated the delete emoji screen to match the upload emoji screen
+
 ## 70.10.1
 
 ### Patch Changes

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

@@ -1,18 +1,39 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulputpp{gap:var(--ds-space-150,9pt)}
+._16jlkb7n{flex-grow:1}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
 ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
+._1tke1sa4{min-height:390px}
 ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bna7t9kd img{height:72px}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._i0dl1wug{flex-basis:auto}
 ._m73io7ol .emoji-submit-delete{width:84px}
+._mezjt9kd img{width:72px}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtyst9kd img{max-width:72px}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1e5h{text-align:left}

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

@@ -23,6 +23,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("../i18n");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
@@ -35,6 +36,10 @@ var deleteFooter = null;
 var deletePreview = null;
 var deleteText = null;
 var previewButtonGroup = null;
+var deletePreviewNew = null;
+var deleteTextSection = null;
+var emojiPreviewLargeBox = null;
+var deleteButtonGroup = null;
 var emojiDeletePreviewTestId = exports.emojiDeletePreviewTestId = 'emoji-delete-preview';
 var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
@@ -92,6 +97,49 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         loading = _this$state.loading,
         error = _this$state.error;
       var formatMessage = intl.formatMessage;
+      if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+        return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+          noFocusGuards: true
+        }, /*#__PURE__*/React.createElement("div", {
+          "data-testid": emojiDeletePreviewTestId,
+          className: (0, _runtime.ax)(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
+        }, /*#__PURE__*/React.createElement("div", {
+          className: (0, _runtime.ax)(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
+        }, /*#__PURE__*/React.createElement(_compiled.Box, {
+          paddingBlockEnd: "space.100"
+        }, /*#__PURE__*/React.createElement(_heading.default, {
+          size: "small"
+        }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(_compiled.Text, {
+          color: "color.text.subtle",
+          size: "small"
+        }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+          values: {
+            emojiShortName: emoji.shortName
+          }
+        })))), /*#__PURE__*/React.createElement("div", {
+          className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
+        }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
+          emoji: emoji
+        })), /*#__PURE__*/React.createElement("div", {
+          className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+        }, error && !loading ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+          message: formatMessage(_i18n.messages.deleteEmojiFailed),
+          errorStyle: "delete",
+          tooltip: true
+        }) : null, /*#__PURE__*/React.createElement(_visuallyHidden.default, {
+          id: deleteEmojiLabelId
+        }, formatMessage(_i18n.messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(_new.default, {
+          appearance: "subtle",
+          onClick: this.onCancel
+        }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel)), /*#__PURE__*/React.createElement(_RetryableButton.default, {
+          label: formatMessage(_i18n.messages.deleteEmojiLabel),
+          onSubmit: this.onSubmit,
+          appearance: "danger",
+          loading: loading,
+          error: error,
+          ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
+        }))));
+      }
       return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
         noFocusGuards: true
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -1,3 +1,4 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
@@ -18,16 +19,15 @@
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._9bj2glyw input::-ms-clear{display:none}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
 ._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -38,6 +38,7 @@ var emojiUploadNew = null;
 var emojiUploadTop = null;
 var emojiUploadTopNew = null;
 var labelStyles = null;
+var labelStylesNew = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
@@ -96,10 +97,10 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     "data-testid": uploadEmojiComponentTestId,
     className: (0, _runtime.ax)(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8wadc _n3tdv77o _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: (0, _runtime.ax)(["_ca0q12x7 _n3tdutpp _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+    className: (0, _runtime.ax)(["_1w90azsu", "_11c8fhey _k48p1pd9"])
   }, previewImage ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
   }, /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
@@ -138,7 +139,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     errorStyle: "chooseFile",
     message: nameErrorMessage
   }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc _n3tdutpp"])
   }, /*#__PURE__*/React.createElement(_new.default, {
     onClick: onUploadCancelled,
     appearance: "subtle",

package/dist/cjs/components/picker/EmojiPicker.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1edt{width:350px}

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

@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../util/analytics");
 var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
@@ -29,6 +30,7 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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" != (0, _typeof2.default)(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 emojiPicker = null;
+var emojiPickerNew = null;
 var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent'));
@@ -76,7 +78,10 @@ var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_
         }
       };
       _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/_react.default.createElement("div", {
+        ref: handlePickerRef,
+        className: (0, _runtime.ax)(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+      }, item.renderItem()) : /*#__PURE__*/_react.default.createElement("div", {
         ref: handlePickerRef,
         className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
       }, item.renderItem());

package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -19,9 +20,12 @@
 ._1ul910mj{min-width:var(--_gsvyy7)}
 ._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
+._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3iaq3k{height:295px}
+._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}

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

@@ -35,6 +35,7 @@ var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
 var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
 var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
+var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
 var _EmojiPickerList = require("./EmojiPickerList");
 var _analytics = require("../../util/analytics");
 var _useEmoji2 = require("../../hooks/useEmoji");
@@ -46,10 +47,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+var emojiPickerHeightWithPreviewNew = 310;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
 var emojiPicker = null;
+var emojiPickerNew = null;
 var uploadOverlay = null;
 var emojiPickerWrapper = null;
 var withPreviewHeight = {
@@ -57,6 +60,11 @@ var withPreviewHeight = {
   medium: "_4t3i2300 _1tke5x59",
   large: "_4t3ixt2k _1tke1pna"
 };
+var withUploadRefreshHeight = {
+  small: "_4t3ibqjm _1tkegx0z",
+  medium: "_4t3i1sa4 _1tke5x59",
+  large: "_4t3i1784 _1tke1pna"
+};
 var withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -171,14 +179,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
       return;
     }
-    // Ignore scroll-driven category changes while the upload screen is open
-    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+    // Ignore scroll-driven category changes while the upload or delete screen is open
+    if ((uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
       return;
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory, uploading]);
+  }, [activeCategory, uploading, emojiToDelete]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -334,10 +342,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       return;
     }
 
-    // If the upload screen is open, close it when a category is selected
-    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
-      setUploading(false);
-      setUploadErrorMessage(undefined);
+    // If the upload or delete screen is open, close it when a category is selected
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      if (uploading) {
+        setUploading(false);
+        setUploadErrorMessage(undefined);
+      }
+      if (emojiToDelete) {
+        setEmojiToDelete(undefined);
+      }
     }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
@@ -368,7 +381,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
   var recordUsageOnSelection = (0, _react.useMemo)(function () {
     return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
@@ -618,7 +631,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
       "aria-modal": true,
-      className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+      className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -630,7 +643,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-      activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
+      activeCategoryId: (uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -663,7 +676,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onOpenUpload: onOpenUpload,
       size: size,
       activeCategoryId: activeCategory
-    }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+    }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
       selectedEmoji: selectedEmoji,
       uploadEnabled: isUploadSupported && !uploading,
       onOpenUpload: onOpenUpload
@@ -678,13 +691,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-    activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
+    activeCategoryId: (uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected
@@ -717,18 +730,24 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory
-  }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+  }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
   }), uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+    className: (0, _runtime.ax)(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
   }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
     onFileChooserClicked: onFileChooserClicked,
     errorMessage: formattedErrorMessage,
     initialUploadName: query
+  })), emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
+    emoji: emojiToDelete,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete
   })));
 };
 var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);

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

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

@@ -1,18 +1,39 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulputpp{gap:var(--ds-space-150,9pt)}
+._16jlkb7n{flex-grow:1}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
 ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
+._1tke1sa4{min-height:390px}
 ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bna7t9kd img{height:72px}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._i0dl1wug{flex-basis:auto}
 ._m73io7ol .emoji-submit-delete{width:84px}
+._mezjt9kd img{width:72px}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtyst9kd img{max-width:72px}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1e5h{text-align:left}

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

@@ -8,8 +8,9 @@ import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AkButton from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import FocusLock from 'react-focus-lock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
@@ -19,6 +20,10 @@ const deleteFooter = null;
 const deletePreview = null;
 const deleteText = null;
 const previewButtonGroup = null;
+const deletePreviewNew = null;
+const deleteTextSection = null;
+const emojiPreviewLargeBox = null;
+const deleteButtonGroup = null;
 export const emojiDeletePreviewTestId = 'emoji-delete-preview';
 const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 class EmojiDeletePreview extends Component {
@@ -73,6 +78,49 @@ class EmojiDeletePreview extends Component {
     const {
       formatMessage
     } = intl;
+    if (fg('platform_emoji_picker_refresh')) {
+      return /*#__PURE__*/React.createElement(FocusLock, {
+        noFocusGuards: true
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": emojiDeletePreviewTestId,
+        className: ax(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ax(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
+      }, /*#__PURE__*/React.createElement(Box, {
+        paddingBlockEnd: "space.100"
+      }, /*#__PURE__*/React.createElement(Heading, {
+        size: "small"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(Text, {
+        color: "color.text.subtle",
+        size: "small"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+        values: {
+          emojiShortName: emoji.shortName
+        }
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
+      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+        emoji: emoji
+      })), /*#__PURE__*/React.createElement("div", {
+        className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+      }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+        message: formatMessage(messages.deleteEmojiFailed),
+        errorStyle: "delete",
+        tooltip: true
+      }) : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+        id: deleteEmojiLabelId
+      }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(AkButton, {
+        appearance: "subtle",
+        onClick: this.onCancel
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
+        label: formatMessage(messages.deleteEmojiLabel),
+        onSubmit: this.onSubmit,
+        appearance: "danger",
+        loading: loading,
+        error: error,
+        ariaLabelledBy: `${emojiErrorScreenreaderTestId} ${deleteEmojiLabelId}`
+      }))));
+    }
     return /*#__PURE__*/React.createElement(FocusLock, {
       noFocusGuards: true
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -1,3 +1,4 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
@@ -18,16 +19,15 @@
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._9bj2glyw input::-ms-clear{display:none}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
 ._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -27,6 +27,7 @@ const emojiUploadNew = null;
 const emojiUploadTop = null;
 const emojiUploadTopNew = null;
 const labelStyles = null;
+const labelStylesNew = null;
 const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
 const uploadChooseFileRow = null;
@@ -88,10 +89,10 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     "data-testid": uploadEmojiComponentTestId,
     className: ax(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8wadc _n3tdv77o _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_ca0q12x7 _n3tdutpp _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+    className: ax(["_1w90azsu", "_11c8fhey _k48p1pd9"])
   }, previewImage ? /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
@@ -128,7 +129,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     errorStyle: "chooseFile",
     message: nameErrorMessage
   }))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
+    className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc _n3tdutpp"])
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onUploadCancelled,
     appearance: "subtle",

package/dist/es2019/components/picker/EmojiPicker.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1edt{width:350px}

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./EmojiPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
@@ -11,6 +12,7 @@ import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 import { defaultEmojiPickerSize } from '../../util/constants';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 const emojiPicker = null;
+const emojiPickerNew = null;
 const emojiPickerModuleLoader = () => import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
 const emojiPickerLoader = () => emojiPickerModuleLoader().then(module => module.default);
 export const preloadEmojiPicker = () => {
@@ -40,7 +42,10 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       }
     };
     ufoExperiences['emoji-picker-opened'].markFMP();
-    return /*#__PURE__*/React.createElement("div", {
+    return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      ref: handlePickerRef,
+      className: ax(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+    }, item.renderItem()) : /*#__PURE__*/React.createElement("div", {
       ref: handlePickerRef,
       className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
     }, item.renderItem());

package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -19,9 +20,12 @@
 ._1ul91edt{min-width:350px}
 ._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
+._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3iaq3k{height:295px}
+._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}

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

@@ -22,6 +22,7 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
+import EmojiDeletePreviewComponent from '../common/EmojiDeletePreview';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { useEmoji } from '../../hooks/useEmoji';
@@ -30,10 +31,12 @@ import { messages } from '../i18n';
 const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 const emojiPickerHeight = 295;
 const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+const emojiPickerHeightWithPreviewNew = 310;
 const emojiPickerWidth = 350;
 const emojiPickerMinHeight = 260;
 const heightOffset = 80;
 const emojiPicker = null;
+const emojiPickerNew = null;
 const uploadOverlay = null;
 const emojiPickerWrapper = null;
 const withPreviewHeight = {
@@ -41,6 +44,11 @@ const withPreviewHeight = {
   medium: "_4t3i2300 _1tke5x59",
   large: "_4t3ixt2k _1tke1pna"
 };
+const withUploadRefreshHeight = {
+  small: "_4t3ibqjm _1tkegx0z",
+  medium: "_4t3i1sa4 _1tke5x59",
+  large: "_4t3i1784 _1tke1pna"
+};
 const withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -113,14 +121,14 @@ const EmojiPickerComponent = ({
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
-    // Ignore scroll-driven category changes while the upload screen is open
-    if (uploading && fg('platform_emoji_picker_refresh')) {
+    // Ignore scroll-driven category changes while the upload or delete screen is open
+    if ((uploading || emojiToDelete) && fg('platform_emoji_picker_refresh')) {
       return;
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory, uploading]);
+  }, [activeCategory, uploading, emojiToDelete]);
   const calculateElapsedTime = () => {
     return Date.now() - openTime.current;
   };
@@ -278,10 +286,15 @@ const EmojiPickerComponent = ({
       return;
     }
 
-    // If the upload screen is open, close it when a category is selected
-    if (uploading && fg('platform_emoji_picker_refresh')) {
-      setUploading(false);
-      setUploadErrorMessage(undefined);
+    // If the upload or delete screen is open, close it when a category is selected
+    if (fg('platform_emoji_picker_refresh')) {
+      if (uploading) {
+        setUploading(false);
+        setUploadErrorMessage(undefined);
+      }
+      if (emojiToDelete) {
+        setEmojiToDelete(undefined);
+      }
     }
     emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
       if (!disableCategories) {
@@ -312,7 +325,7 @@ const EmojiPickerComponent = ({
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
   const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
   const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
   const onFileChooserClicked = useCallback(() => {
@@ -528,7 +541,7 @@ const EmojiPickerComponent = ({
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+      className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]])
     }, /*#__PURE__*/React.createElement("div", {
       role: "presentation",
       onKeyPress: suppressKeyPress,
@@ -536,7 +549,7 @@ const EmojiPickerComponent = ({
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
+      activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -569,7 +582,7 @@ const EmojiPickerComponent = ({
       onOpenUpload: onOpenUpload,
       size: size,
       activeCategoryId: activeCategory
-    }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+    }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
       uploadEnabled: isUploadSupported && !uploading,
       onOpenUpload: onOpenUpload
@@ -584,9 +597,9 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
+    className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
+    activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected
@@ -619,18 +632,24 @@ const EmojiPickerComponent = ({
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory
-  }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+  }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
   }), uploading && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
-    className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+    className: ax(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
   }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
     onFileChooserClicked: onFileChooserClicked,
     errorMessage: formattedErrorMessage,
     initialUploadName: query
+  })), emojiToDelete && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(EmojiDeletePreviewComponent, {
+    emoji: emojiToDelete,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete
   })));
 };
 const _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);

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

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

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

@@ -1,18 +1,39 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulputpp{gap:var(--ds-space-150,9pt)}
+._16jlkb7n{flex-grow:1}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
 ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
+._1tke1sa4{min-height:390px}
 ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bna7t9kd img{height:72px}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._i0dl1wug{flex-basis:auto}
 ._m73io7ol .emoji-submit-delete{width:84px}
+._mezjt9kd img{width:72px}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtyst9kd img{max-width:72px}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1e5h{text-align:left}

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

@@ -15,8 +15,9 @@ import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AkButton from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import FocusLock from 'react-focus-lock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
@@ -26,6 +27,10 @@ var deleteFooter = null;
 var deletePreview = null;
 var deleteText = null;
 var previewButtonGroup = null;
+var deletePreviewNew = null;
+var deleteTextSection = null;
+var emojiPreviewLargeBox = null;
+var deleteButtonGroup = null;
 export var emojiDeletePreviewTestId = 'emoji-delete-preview';
 var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
@@ -83,6 +88,49 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         loading = _this$state.loading,
         error = _this$state.error;
       var formatMessage = intl.formatMessage;
+      if (fg('platform_emoji_picker_refresh')) {
+        return /*#__PURE__*/React.createElement(FocusLock, {
+          noFocusGuards: true
+        }, /*#__PURE__*/React.createElement("div", {
+          "data-testid": emojiDeletePreviewTestId,
+          className: ax(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ax(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
+        }, /*#__PURE__*/React.createElement(Box, {
+          paddingBlockEnd: "space.100"
+        }, /*#__PURE__*/React.createElement(Heading, {
+          size: "small"
+        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(Text, {
+          color: "color.text.subtle",
+          size: "small"
+        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+          values: {
+            emojiShortName: emoji.shortName
+          }
+        })))), /*#__PURE__*/React.createElement("div", {
+          className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
+        }, /*#__PURE__*/React.createElement(CachingEmoji, {
+          emoji: emoji
+        })), /*#__PURE__*/React.createElement("div", {
+          className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+        }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+          message: formatMessage(messages.deleteEmojiFailed),
+          errorStyle: "delete",
+          tooltip: true
+        }) : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+          id: deleteEmojiLabelId
+        }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(AkButton, {
+          appearance: "subtle",
+          onClick: this.onCancel
+        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
+          label: formatMessage(messages.deleteEmojiLabel),
+          onSubmit: this.onSubmit,
+          appearance: "danger",
+          loading: loading,
+          error: error,
+          ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
+        }))));
+      }
       return /*#__PURE__*/React.createElement(FocusLock, {
         noFocusGuards: true
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -1,3 +1,4 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
@@ -18,16 +19,15 @@
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._9bj2glyw input::-ms-clear{display:none}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
 ._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -30,6 +30,7 @@ var emojiUploadNew = null;
 var emojiUploadTop = null;
 var emojiUploadTopNew = null;
 var labelStyles = null;
+var labelStylesNew = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
@@ -88,10 +89,10 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     "data-testid": uploadEmojiComponentTestId,
     className: ax(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8wadc _n3tdv77o _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_ca0q12x7 _n3tdutpp _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+    className: ax(["_1w90azsu", "_11c8fhey _k48p1pd9"])
   }, previewImage ? /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
@@ -130,7 +131,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     errorStyle: "chooseFile",
     message: nameErrorMessage
   }))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
+    className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc _n3tdutpp"])
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onUploadCancelled,
     appearance: "subtle",

package/dist/esm/components/picker/EmojiPicker.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1edt{width:350px}

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

@@ -12,6 +12,7 @@ import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
@@ -20,6 +21,7 @@ import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 import { defaultEmojiPickerSize } from '../../util/constants';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 var emojiPicker = null;
+var emojiPickerNew = null;
 var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
   return import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
 };
@@ -65,7 +67,10 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
         }
       };
       ufoExperiences['emoji-picker-opened'].markFMP();
-      return /*#__PURE__*/React.createElement("div", {
+      return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+        ref: handlePickerRef,
+        className: ax(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+      }, item.renderItem()) : /*#__PURE__*/React.createElement("div", {
         ref: handlePickerRef,
         className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
       }, item.renderItem());

package/dist/esm/components/picker/EmojiPickerComponent.compiled.css

@@ -1,5 +1,6 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -19,9 +20,12 @@
 ._1ul910mj{min-width:var(--_gsvyy7)}
 ._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
+._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3iaq3k{height:295px}
+._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}

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

@@ -29,6 +29,7 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
+import EmojiDeletePreviewComponent from '../common/EmojiDeletePreview';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { useEmoji } from '../../hooks/useEmoji';
@@ -37,10 +38,12 @@ import { messages } from '../i18n';
 var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+var emojiPickerHeightWithPreviewNew = 310;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
 var emojiPicker = null;
+var emojiPickerNew = null;
 var uploadOverlay = null;
 var emojiPickerWrapper = null;
 var withPreviewHeight = {
@@ -48,6 +51,11 @@ var withPreviewHeight = {
   medium: "_4t3i2300 _1tke5x59",
   large: "_4t3ixt2k _1tke1pna"
 };
+var withUploadRefreshHeight = {
+  small: "_4t3ibqjm _1tkegx0z",
+  medium: "_4t3i1sa4 _1tke5x59",
+  large: "_4t3i1784 _1tke1pna"
+};
 var withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -162,14 +170,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
-    // Ignore scroll-driven category changes while the upload screen is open
-    if (uploading && fg('platform_emoji_picker_refresh')) {
+    // Ignore scroll-driven category changes while the upload or delete screen is open
+    if ((uploading || emojiToDelete) && fg('platform_emoji_picker_refresh')) {
       return;
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory, uploading]);
+  }, [activeCategory, uploading, emojiToDelete]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -325,10 +333,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       return;
     }
 
-    // If the upload screen is open, close it when a category is selected
-    if (uploading && fg('platform_emoji_picker_refresh')) {
-      setUploading(false);
-      setUploadErrorMessage(undefined);
+    // If the upload or delete screen is open, close it when a category is selected
+    if (fg('platform_emoji_picker_refresh')) {
+      if (uploading) {
+        setUploading(false);
+        setUploadErrorMessage(undefined);
+      }
+      if (emojiToDelete) {
+        setEmojiToDelete(undefined);
+      }
     }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
@@ -359,7 +372,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
   var recordUsageOnSelection = useMemo(function () {
     return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(SearchSourceTypes.PICKER));
@@ -609,7 +622,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+      className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -621,7 +634,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
+      activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -654,7 +667,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onOpenUpload: onOpenUpload,
       size: size,
       activeCategoryId: activeCategory
-    }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+    }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
       uploadEnabled: isUploadSupported && !uploading,
       onOpenUpload: onOpenUpload
@@ -669,13 +682,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+    className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
+    activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected
@@ -708,18 +721,24 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory
-  }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+  }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
   }), uploading && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
-    className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+    className: ax(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
   }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
     onFileChooserClicked: onFileChooserClicked,
     errorMessage: formattedErrorMessage,
     initialUploadName: query
+  })), emojiToDelete && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1mok _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(EmojiDeletePreviewComponent, {
+    emoji: emojiToDelete,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete
   })));
 };
 var _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.10.1",
+	"version": "70.10.3",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^82.0.0",
+		"@atlaskit/tmp-editor-statsig": "^82.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -97,6 +97,7 @@
 		"p-wait-for": "^3.2.0",
 		"react": "^18.2.0",
 		"react-addons-perf": "^15.3.2",
+		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2",
 		"react-test-renderer": "^18.2.0",
 		"rxjs": "^5.5.0",