@atlaskit/emoji 70.10.2 → 70.10.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 70.10.4
+
+### Patch Changes
+
+- [`c5b9254ad3e07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5b9254ad3e07) -
+  The upload emoji picker copy is updated to reflect new drag and drop functionality
+- Updated dependencies
+
+## 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

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;
@@ -90,21 +91,22 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var emojiPlaceholder = formatMessage(_i18n.messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(_i18n.messages.emojiNameAriaLabel);
   var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
+  var emojiChooseFileTitleNew = formatMessage(_i18n.messages.emojiChooseFileDndTitle);
   var isUploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
   var addEmojiDisabled = !previewImage || !name || isUploading;
   return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
     "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 () {
     return /*#__PURE__*/React.createElement(_FileChooser.default, {
-      label: emojiChooseFileTitle,
+      label: (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
@@ -138,7 +140,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",
@@ -189,7 +191,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-required": true
   })), /*#__PURE__*/React.createElement(_compiled.Text, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
     return /*#__PURE__*/React.createElement(_FileChooser.default, {
-      label: emojiChooseFileTitle,
+      label: (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",

package/dist/cjs/components/i18n.js

@@ -56,6 +56,11 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Choose file',
     description: 'Label for the file chooser button in the custom emoji upload panel where users select an image file for their emoji.'
   },
+  emojiChooseFileDndTitle: {
+    id: 'fabric.emoji.choose.file.dnd.title',
+    defaultMessage: 'Select or drop an image',
+    description: 'Label for the file chooser button in the custom emoji upload panel where users select or drag and drop an image file for their emoji.'
+  },
   emojiChooseFileScreenReaderDescription: {
     id: 'fabric.emoji.choose.file.screenReaderDescription',
     defaultMessage: 'Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB',

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

@@ -47,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 = {
@@ -58,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",
@@ -624,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"))
@@ -684,7 +691,7 @@ 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 || !!emojiToDelete) && (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"))
@@ -728,7 +735,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     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,
@@ -736,7 +743,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     errorMessage: formattedErrorMessage,
     initialUploadName: query
   })), emojiToDelete && (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(_EmojiDeletePreview.default, {
     emoji: emojiToDelete,
     onDeleteEmoji: onDeleteEmoji,

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

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;
@@ -82,20 +83,21 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   const emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
   const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
+  const emojiChooseFileTitleNew = formatMessage(messages.emojiChooseFileDndTitle);
   const isUploading = uploadStatus === UploadStatus.Uploading;
   const addEmojiDisabled = !previewImage || !name || isUploading;
   return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
     "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, {
-    label: emojiChooseFileTitle,
+    label: fg('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
     onChange: onChooseFile,
     onClick: onClick,
     accept: "image/png,image/jpeg,image/gif",
@@ -128,7 +130,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",
@@ -178,7 +180,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     id: "new-emoji-name-input",
     "aria-required": true
   })), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
-    label: emojiChooseFileTitle,
+    label: fg('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
     onChange: onChooseFile,
     onClick: onClick,
     accept: "image/png,image/jpeg,image/gif",

package/dist/es2019/components/i18n.js

@@ -50,6 +50,11 @@ export const messages = defineMessages({
     defaultMessage: 'Choose file',
     description: 'Label for the file chooser button in the custom emoji upload panel where users select an image file for their emoji.'
   },
+  emojiChooseFileDndTitle: {
+    id: 'fabric.emoji.choose.file.dnd.title',
+    defaultMessage: 'Select or drop an image',
+    description: 'Label for the file chooser button in the custom emoji upload panel where users select or drag and drop an image file for their emoji.'
+  },
   emojiChooseFileScreenReaderDescription: {
     id: 'fabric.emoji.choose.file.screenReaderDescription',
     defaultMessage: 'Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB',

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

@@ -31,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 = {
@@ -42,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",
@@ -534,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,
@@ -590,7 +597,7 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || (uploading || !!emojiToDelete) && 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 || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
@@ -630,7 +637,7 @@ const EmojiPickerComponent = ({
     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,
@@ -638,7 +645,7 @@ const EmojiPickerComponent = ({
     errorMessage: formattedErrorMessage,
     initialUploadName: query
   })), emojiToDelete && 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(EmojiDeletePreviewComponent, {
     emoji: emojiToDelete,
     onDeleteEmoji: onDeleteEmoji,

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

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;
@@ -82,21 +83,22 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
   var emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
+  var emojiChooseFileTitleNew = formatMessage(messages.emojiChooseFileDndTitle);
   var isUploading = uploadStatus === UploadStatus.Uploading;
   var addEmojiDisabled = !previewImage || !name || isUploading;
   return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
     "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 () {
     return /*#__PURE__*/React.createElement(FileChooser, {
-      label: emojiChooseFileTitle,
+      label: fg('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
@@ -130,7 +132,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",
@@ -181,7 +183,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     "aria-required": true
   })), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
     return /*#__PURE__*/React.createElement(FileChooser, {
-      label: emojiChooseFileTitle,
+      label: fg('platform_emoji_picker_refresh') ? emojiChooseFileTitleNew : emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",

package/dist/esm/components/i18n.js

@@ -50,6 +50,11 @@ export var messages = defineMessages({
     defaultMessage: 'Choose file',
     description: 'Label for the file chooser button in the custom emoji upload panel where users select an image file for their emoji.'
   },
+  emojiChooseFileDndTitle: {
+    id: 'fabric.emoji.choose.file.dnd.title',
+    defaultMessage: 'Select or drop an image',
+    description: 'Label for the file chooser button in the custom emoji upload panel where users select or drag and drop an image file for their emoji.'
+  },
   emojiChooseFileScreenReaderDescription: {
     id: 'fabric.emoji.choose.file.screenReaderDescription',
     defaultMessage: 'Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB',

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

@@ -38,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 = {
@@ -49,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",
@@ -615,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"))
@@ -675,7 +682,7 @@ 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 || !!emojiToDelete) && 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"))
@@ -719,7 +726,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     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,
@@ -727,7 +734,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     errorMessage: formattedErrorMessage,
     initialUploadName: query
   })), emojiToDelete && 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(EmojiDeletePreviewComponent, {
     emoji: emojiToDelete,
     onDeleteEmoji: onDeleteEmoji,

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

package/dist/types/components/i18n.d.ts

@@ -74,6 +74,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiChooseFileDndTitle: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiChooseFileScreenReaderDescription: {
         defaultMessage: string;
         description: string;

package/dist/types-ts4.5/components/i18n.d.ts

@@ -74,6 +74,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiChooseFileDndTitle: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiChooseFileScreenReaderDescription: {
         defaultMessage: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.10.2",
+	"version": "70.10.4",
 	"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",
@@ -80,7 +80,7 @@
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/media-core": "^37.1.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/theme": "^23.2.0",
+		"@atlaskit/theme": "^24.0.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@emotion/jest": "^11.8.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",