@atlaskit/emoji 70.6.2 → 70.7.0

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

@@ -100,11 +100,11 @@ const FileChooser = props => {
       "data-testid": dropzoneTestId,
       role: "region",
       "aria-label": label,
-      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec6ebc _6fl45ucs", isDragging && "_1h6dq98m _bfhkufnl"])
+      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
     }, previewImage ? /*#__PURE__*/React.createElement("img", {
       src: previewImage,
       alt: previewAlt,
-      className: ax(["_c71lys9h _p12f1osq _5ral1f51"])
+      className: ax(["_c71l1j4a _p12f1osq _5ral1f51"])
     }) : /*#__PURE__*/React.createElement(Button, {
       onClick: handleOnChooseFile,
       isDisabled: isDisabled,

package/dist/es2019/components/i18n.js

@@ -210,6 +210,11 @@ export const messages = defineMessages({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiDuplicateName: {
+    id: 'fabric.emoji.error.duplicate.name',
+    defaultMessage: 'An emoji with this name exists already',
+    description: 'Error message shown when the user tries to upload an emoji with a name that already exists in the custom emoji set'
+  },
   emojiPickerTitle: {
     id: 'fabric.emoji.picker',
     defaultMessage: 'Emoji picker',

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getDocument } from '@atlaskit/browser-apis';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -117,6 +118,12 @@ const EmojiPickerComponent = ({
       setUploadErrorMessage(undefined);
     });
     fireAnalytics(uploadCancelButton());
+    if (fg('platform_emoji_picker_refresh')) {
+      setTimeout(() => {
+        var _getDocument, _getDocument$getEleme;
+        (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : (_getDocument$getEleme = _getDocument.getElementById('add-custom-emoji')) === null || _getDocument$getEleme === void 0 ? void 0 : _getDocument$getEleme.focus();
+      }, 0);
+    }
   }, [fireAnalytics]);
   const getDynamicCategories = useCallback(() => {
     if (!emojiProvider.calculateDynamicCategories) {
@@ -328,7 +335,7 @@ const EmojiPickerComponent = ({
       }, 0);
     }
   }, [emojiPickerList]);
-  const onUploadEmoji = useCallback((upload, retry) => {
+  const onUploadEmoji = useCallback(async (upload, retry) => {
     fireAnalytics(uploadConfirmButton({
       retry
     }));
@@ -343,6 +350,14 @@ const EmojiPickerComponent = ({
       });
       scrollToUploadedEmoji(emojiDescription);
     };
+    if (fg('platform_emoji_picker_refresh')) {
+      const uploadShortName = `:${upload.name.toLowerCase()}:`;
+      const existing = await emojiProvider.findByShortName(uploadShortName);
+      if (existing) {
+        errorSetter(messages.emojiDuplicateName);
+        return;
+      }
+    }
     uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
   }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   const onTriggerDelete = useCallback((_emojiId, emoji) => {

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

package/dist/esm/api/EmojiResource.js

@@ -6,9 +6,9 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -61,7 +61,29 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     _defineProperty(_this, "isLoaded", function () {
       return _this.initialLoaders !== 0 && _this.activeLoaders === 0;
     });
-    _this.emojiProviderConfig = config;
+    var rewriteEmojiGatewayPath = function rewriteEmojiGatewayPath(url) {
+      return url.replace('/gateway/api/emoji', '/gateway/api/elements/emoji');
+    };
+    var stargateEmojiPathEnabled = fg('use-elements-stargate-emoji-path');
+    var singleEmojiApi = config.singleEmojiApi;
+    var optimisticImageApi = config.optimisticImageApi;
+    _this.emojiProviderConfig = stargateEmojiPathEnabled ? _objectSpread(_objectSpread({}, config), {}, {
+      providers: config.providers.map(function (provider) {
+        return _objectSpread(_objectSpread({}, provider), {}, {
+          url: rewriteEmojiGatewayPath(provider.url)
+        });
+      }),
+      singleEmojiApi: singleEmojiApi ? _objectSpread(_objectSpread({}, singleEmojiApi), {}, {
+        getUrl: function getUrl(emojiId) {
+          return rewriteEmojiGatewayPath(singleEmojiApi.getUrl(emojiId));
+        }
+      }) : undefined,
+      optimisticImageApi: optimisticImageApi ? _objectSpread(_objectSpread({}, optimisticImageApi), {}, {
+        getUrl: function getUrl(emojiId) {
+          return rewriteEmojiGatewayPath(optimisticImageApi.getUrl(emojiId));
+        }
+      }) : undefined
+    }) : config;
     _this.recordConfig = config.recordConfig;
     _this.currentUser = config.currentUser;
     if (storageAvailable('localStorage')) {

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

@@ -2,8 +2,10 @@
 import "./EmojiErrorMessage.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
+import { ErrorMessage } from '@atlaskit/form';
 import { useIntl } from 'react-intl';
 import { messages } from '../i18n';
 var errorMessageStyles = {
@@ -33,7 +35,9 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     label: formatMessage(messages.error),
     spacing: "spacious",
     testId: emojiErrorIconTestId
-  }))) : /*#__PURE__*/React.createElement("div", {
+  }))) : fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId
+  }, /*#__PURE__*/React.createElement(ErrorMessage, null, message)) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiErrorMessageTestId,
     className: ax([errorMessageStyles[errorStyle]])
   }, /*#__PURE__*/React.createElement(ErrorIcon, {

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

@@ -1,6 +1,6 @@
 ._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}
-._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._16jlkb7n{flex-grow:1}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
@@ -11,6 +11,7 @@
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1rwq1j28 input{background-color:transparent}
+._1tker0r7{min-height:250px}
 ._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
 ._34ir1o36 input{outline-width:medium}
@@ -26,6 +27,7 @@
 ._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)}
 ._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

@@ -21,11 +21,14 @@ import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Button from '@atlaskit/button/new';
+import { Box } from '@atlaskit/primitives/compiled';
+import { getDocument } from '@atlaskit/browser-apis';
 var closeEmojiUploadButton = null;
 var uploadAddRowNew = null;
 var emojiUpload = null;
 var emojiUploadNew = null;
 var emojiUploadTop = null;
+var emojiUploadTopNew = null;
 var labelStyles = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
@@ -56,6 +59,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     onUploadCancelled = props.onUploadCancelled,
     onAddEmoji = props.onAddEmoji,
     errorMessage = props.errorMessage,
+    nameErrorMessage = props.nameErrorMessage,
     previewImage = props.previewImage,
     uploadStatus = props.uploadStatus,
     intl = props.intl;
@@ -84,13 +88,13 @@ 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 _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_11c8wadc _n3tdv77o _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, previewImage ? /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _n3tdu2gc"])
-  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
+    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,
       onChange: onChooseFile,
@@ -100,7 +104,12 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
       previewImage: previewImage,
       previewAlt: name
     });
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+  }), /*#__PURE__*/React.createElement("div", {
+    id: fileChooserButtonDescriptionId
+  }, errorMessage && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiNameLabel)), /*#__PURE__*/React.createElement(TextField, {
@@ -112,16 +121,15 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     value: name,
     isCompact: true,
     autoFocus: true,
+    isInvalid: !!nameErrorMessage,
     testId: uploadEmojiNameInputTestId,
     ref: inputRef,
     id: "new-emoji-name-input",
     "aria-required": true
-  }))), /*#__PURE__*/React.createElement("div", {
-    id: fileChooserButtonDescriptionId
-  }, errorMessage && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+  }), nameErrorMessage && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
     errorStyle: "chooseFile",
-    message: errorMessage
-  })), /*#__PURE__*/React.createElement("div", {
+    message: nameErrorMessage
+  }))), /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onUploadCancelled,
@@ -299,18 +307,19 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
               return ImageUtil.parseImage(f.target.result);
             case 4:
               setPreviewImage(f.target.result);
-              _context.next = 11;
+              setChooseEmojiErrorMessage(undefined);
+              _context.next = 12;
               break;
-            case 7:
-              _context.prev = 7;
+            case 8:
+              _context.prev = 8;
               _context.t0 = _context["catch"](0);
               setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiInvalidImage));
               cancelChooseFile();
-            case 11:
+            case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 7]]);
+        }, _callee, null, [[0, 8]]);
       }));
       return function (_x) {
         return _ref.apply(this, arguments);
@@ -342,15 +351,16 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     // using setTimeout here to allow the UI to update before setting focus
     setTimeout(function (lastFocus) {
       if (lastFocus) {
-        var _document$getElementB;
-        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+        var _getDocument;
+        (_getDocument = getDocument()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(lastFocus)) === null || _getDocument === void 0 || _getDocument.focus();
       }
     }, 0, lastFocusedElementId.current);
   }, [clearUploadPicker, onUploadCancelled]);
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  var content = !fg('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  var isDuplicateNameError = errorMessage !== null && errorMessage !== undefined && fg('platform_emoji_picker_refresh');
+  var content = name && previewImage && !fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -367,9 +377,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     previewImage: previewImage,
     uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
+    nameErrorMessage: isDuplicateNameError ? errorMessage : undefined,
     intl: intl
   });
-  return disableFocusLock ? content : /*#__PURE__*/React.createElement(FocusLock, {
+  return disableFocusLock || fg('platform_emoji_picker_refresh') ? content : /*#__PURE__*/React.createElement(FocusLock, {
     noFocusGuards: true
   }, content);
 };

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

@@ -7,16 +7,16 @@
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
-._1oec6ebc{transition-duration:.15s}
+._1oec1ign{transition-duration:var(--ds-duration-short,.15s)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i7l9q{height:170px}
 ._5ral1f51{object-fit:contain}
-._6fl45ucs{transition-timing-function:ease}
+._6fl4574g{transition-timing-function:var(--ds-easing-out-practical,ease)}
 ._80omtlke{cursor:pointer}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhkufnl{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
-._c71lys9h{max-height:5pc}
+._c71l1j4a{max-height:130px}
 ._k8m01rje{transition-property:background-color,border-color}
 ._p12f1osq{max-width:100%}
 ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -105,11 +105,11 @@ var FileChooser = function FileChooser(props) {
       "data-testid": dropzoneTestId,
       role: "region",
       "aria-label": label,
-      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec6ebc _6fl45ucs", isDragging && "_1h6dq98m _bfhkufnl"])
+      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
     }, previewImage ? /*#__PURE__*/React.createElement("img", {
       src: previewImage,
       alt: previewAlt,
-      className: ax(["_c71lys9h _p12f1osq _5ral1f51"])
+      className: ax(["_c71l1j4a _p12f1osq _5ral1f51"])
     }) : /*#__PURE__*/React.createElement(Button, {
       onClick: handleOnChooseFile,
       isDisabled: isDisabled,

package/dist/esm/components/i18n.js

@@ -210,6 +210,11 @@ export var messages = defineMessages({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiDuplicateName: {
+    id: 'fabric.emoji.error.duplicate.name',
+    defaultMessage: 'An emoji with this name exists already',
+    description: 'Error message shown when the user tries to upload an emoji with a name that already exists in the custom emoji set'
+  },
   emojiPickerTitle: {
     id: 'fabric.emoji.picker',
     defaultMessage: 'Emoji picker',

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

@@ -1,14 +1,17 @@
 /* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./EmojiPickerComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getDocument } from '@atlaskit/browser-apis';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -164,6 +167,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setUploadErrorMessage(undefined);
     });
     fireAnalytics(uploadCancelButton());
+    if (fg('platform_emoji_picker_refresh')) {
+      setTimeout(function () {
+        var _getDocument;
+        (_getDocument = getDocument()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById('add-custom-emoji')) === null || _getDocument === void 0 || _getDocument.focus();
+      }, 0);
+    }
   }, [fireAnalytics]);
   var getDynamicCategories = useCallback(function () {
     if (!emojiProvider.calculateDynamicCategories) {
@@ -379,23 +388,53 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       }, 0);
     }
   }, [emojiPickerList]);
-  var onUploadEmoji = useCallback(function (upload, retry) {
-    fireAnalytics(uploadConfirmButton({
-      retry: retry
+  var onUploadEmoji = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(upload, retry) {
+      var errorSetter, onSuccess, uploadShortName, existing;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fireAnalytics(uploadConfirmButton({
+              retry: retry
+            }));
+            errorSetter = function errorSetter(message) {
+              setUploadErrorMessage(message);
+            };
+            onSuccess = function onSuccess(emojiDescription) {
+              batchedUpdates(function () {
+                setActiveCategory(customCategory);
+                setSelectedEmoji(emojiDescription);
+                setUploading(false);
+              });
+              scrollToUploadedEmoji(emojiDescription);
+            };
+            if (!fg('platform_emoji_picker_refresh')) {
+              _context.next = 11;
+              break;
+            }
+            uploadShortName = ":".concat(upload.name.toLowerCase(), ":");
+            _context.next = 7;
+            return emojiProvider.findByShortName(uploadShortName);
+          case 7:
+            existing = _context.sent;
+            if (!existing) {
+              _context.next = 11;
+              break;
+            }
+            errorSetter(messages.emojiDuplicateName);
+            return _context.abrupt("return");
+          case 11:
+            uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
     }));
-    var errorSetter = function errorSetter(message) {
-      setUploadErrorMessage(message);
-    };
-    var onSuccess = function onSuccess(emojiDescription) {
-      batchedUpdates(function () {
-        setActiveCategory(customCategory);
-        setSelectedEmoji(emojiDescription);
-        setUploading(false);
-      });
-      scrollToUploadedEmoji(emojiDescription);
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
     };
-    uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
+  }(), [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   var onTriggerDelete = useCallback(function (_emojiId, emoji) {
     if (_emojiId) {
       fireAnalytics(deleteBeginEvent({

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