@atlaskit/emoji 70.6.2 → 70.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.7.0
+
+### Minor Changes
+
+- [`084c9f4eca75d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/084c9f4eca75d) -
+  Updated error states + new error state for adding duplicate emoji name
+
+### Patch Changes
+
+- [`8d79e063b3073`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d79e063b3073) -
+  update stargate routing for emoji routes
+- Updated dependencies
+
 ## 70.6.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -25,12 +25,18 @@
 		{
 			"path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../helpers/browser-apis/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/css/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/form/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/heading/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -25,12 +25,18 @@
 		{
 			"path": "../../../analytics/analytics-next/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../helpers/browser-apis/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/button/afm-products/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/css/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/form/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/heading/afm-products/tsconfig.json"
 		},

package/dist/cjs/api/EmojiResource.js

@@ -67,7 +67,29 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
     (0, _defineProperty2.default)(_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 = (0, _platformFeatureFlags.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 ((0, _storageAvailable.default)('localStorage')) {

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

@@ -10,8 +10,10 @@ exports.emojiErrorScreenreaderTestId = exports.emojiErrorMessageTooltipTestId =
 require("./EmojiErrorMessage.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
+var _form = require("@atlaskit/form");
 var _reactIntl = require("react-intl");
 var _i18n = require("../i18n");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -42,7 +44,9 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     label: formatMessage(_i18n.messages.error),
     spacing: "spacious",
     testId: emojiErrorIconTestId
-  }))) : /*#__PURE__*/React.createElement("div", {
+  }))) : (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId
+  }, /*#__PURE__*/React.createElement(_form.ErrorMessage, null, message)) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiErrorMessageTestId,
     className: (0, _runtime.ax)([errorMessageStyles[errorStyle]])
   }, /*#__PURE__*/React.createElement(_statusError.default, {

package/dist/cjs/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/cjs/components/common/EmojiUploadPicker.js

@@ -29,12 +29,14 @@ var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _browserApis = require("@atlaskit/browser-apis");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var 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;
@@ -65,6 +67,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     onUploadCancelled = props.onUploadCancelled,
     onAddEmoji = props.onAddEmoji,
     errorMessage = props.errorMessage,
+    nameErrorMessage = props.nameErrorMessage,
     previewImage = props.previewImage,
     uploadStatus = props.uploadStatus,
     intl = props.intl;
@@ -93,13 +96,13 @@ 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 _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: (0, _runtime.ax)(["_11c8wadc _n3tdv77o _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _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)(["_zulppxbi _1e0c1txw _2lx21bp4 _n3tdu2gc"])
-  }, /*#__PURE__*/React.createElement(_compiled.Text, null, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
+    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,
       onChange: onChooseFile,
@@ -109,7 +112,12 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.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.default, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiNameLabel)), /*#__PURE__*/React.createElement(_textfield.default, {
@@ -121,16 +129,15 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.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.default, {
+  }), nameErrorMessage && /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
     errorStyle: "chooseFile",
-    message: errorMessage
-  })), /*#__PURE__*/React.createElement("div", {
+    message: nameErrorMessage
+  }))), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
   }, /*#__PURE__*/React.createElement(_new.default, {
     onClick: onUploadCancelled,
@@ -308,18 +315,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(_reactIntl.FormattedMessage, _i18n.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);
@@ -351,15 +359,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 = (0, _browserApis.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 = !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
+  var isDuplicateNameError = errorMessage !== null && errorMessage !== undefined && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh');
+  var content = name && previewImage && !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -376,9 +385,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     previewImage: previewImage,
     uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
+    nameErrorMessage: isDuplicateNameError ? errorMessage : undefined,
     intl: intl
   });
-  return disableFocusLock ? content : /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+  return disableFocusLock || (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? content : /*#__PURE__*/React.createElement(_reactFocusLock.default, {
     noFocusGuards: true
   }, content);
 };

package/dist/cjs/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/cjs/components/common/FileChooser.js

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

package/dist/cjs/components/i18n.js

@@ -216,6 +216,11 @@ var messages = exports.messages = (0, _reactIntl.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/cjs/components/picker/EmojiPickerComponent.js

@@ -11,10 +11,13 @@ require("./EmojiPickerComponent.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _browserApis = require("@atlaskit/browser-apis");
 var _reactDom = require("react-dom");
 var _reactIntl = require("react-intl");
 var _EmojiRepository = require("../../api/EmojiRepository");
@@ -173,6 +176,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setUploadErrorMessage(undefined);
     });
     fireAnalytics((0, _analytics.uploadCancelButton)());
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      setTimeout(function () {
+        var _getDocument;
+        (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById('add-custom-emoji')) === null || _getDocument === void 0 || _getDocument.focus();
+      }, 0);
+    }
   }, [fireAnalytics]);
   var getDynamicCategories = (0, _react.useCallback)(function () {
     if (!emojiProvider.calculateDynamicCategories) {
@@ -388,23 +397,53 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       }, 0);
     }
   }, [emojiPickerList]);
-  var onUploadEmoji = (0, _react.useCallback)(function (upload, retry) {
-    fireAnalytics((0, _analytics.uploadConfirmButton)({
-      retry: retry
+  var onUploadEmoji = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(upload, retry) {
+      var errorSetter, onSuccess, uploadShortName, existing;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fireAnalytics((0, _analytics.uploadConfirmButton)({
+              retry: retry
+            }));
+            errorSetter = function errorSetter(message) {
+              setUploadErrorMessage(message);
+            };
+            onSuccess = function onSuccess(emojiDescription) {
+              (0, _reactDom.unstable_batchedUpdates)(function () {
+                setActiveCategory(_constants.customCategory);
+                setSelectedEmoji(emojiDescription);
+                setUploading(false);
+              });
+              scrollToUploadedEmoji(emojiDescription);
+            };
+            if (!(0, _platformFeatureFlags.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(_i18n.messages.emojiDuplicateName);
+            return _context.abrupt("return");
+          case 11:
+            (0, _UploadEmoji.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) {
-      (0, _reactDom.unstable_batchedUpdates)(function () {
-        setActiveCategory(_constants.customCategory);
-        setSelectedEmoji(emojiDescription);
-        setUploading(false);
-      });
-      scrollToUploadedEmoji(emojiDescription);
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
     };
-    (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
+  }(), [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   var onTriggerDelete = (0, _react.useCallback)(function (_emojiId, emoji) {
     if (_emojiId) {
       fireAnalytics((0, _analytics.deleteBeginEvent)({

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

package/dist/es2019/api/EmojiResource.js

@@ -44,7 +44,25 @@ export class EmojiResource extends AbstractResource {
       return !!repository;
     });
     _defineProperty(this, "isLoaded", () => this.initialLoaders !== 0 && this.activeLoaders === 0);
-    this.emojiProviderConfig = config;
+    const rewriteEmojiGatewayPath = url => url.replace('/gateway/api/emoji', '/gateway/api/elements/emoji');
+    const stargateEmojiPathEnabled = fg('use-elements-stargate-emoji-path');
+    const singleEmojiApi = config.singleEmojiApi;
+    const optimisticImageApi = config.optimisticImageApi;
+    this.emojiProviderConfig = stargateEmojiPathEnabled ? {
+      ...config,
+      providers: config.providers.map(provider => ({
+        ...provider,
+        url: rewriteEmojiGatewayPath(provider.url)
+      })),
+      singleEmojiApi: singleEmojiApi ? {
+        ...singleEmojiApi,
+        getUrl: emojiId => rewriteEmojiGatewayPath(singleEmojiApi.getUrl(emojiId))
+      } : undefined,
+      optimisticImageApi: optimisticImageApi ? {
+        ...optimisticImageApi,
+        getUrl: emojiId => rewriteEmojiGatewayPath(optimisticImageApi.getUrl(emojiId))
+      } : undefined
+    } : config;
     this.recordConfig = config.recordConfig;
     this.currentUser = config.currentUser;
     if (storageAvailable('localStorage')) {

package/dist/es2019/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';
 const errorMessageStyles = {
@@ -36,7 +38,9 @@ const 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/es2019/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/es2019/components/common/EmojiUploadPicker.js

@@ -18,11 +18,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';
 const closeEmojiUploadButton = null;
 const uploadAddRowNew = null;
 const emojiUpload = null;
 const emojiUploadNew = null;
 const emojiUploadTop = null;
+const emojiUploadTopNew = null;
 const labelStyles = null;
 const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
@@ -53,6 +56,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     onUploadCancelled,
     onAddEmoji,
     errorMessage,
+    nameErrorMessage,
     previewImage,
     uploadStatus,
     intl
@@ -84,13 +88,13 @@ const ChooseEmojiFile = /*#__PURE__*/memo(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, () => /*#__PURE__*/React.createElement(FileChooser, {
+    className: ax(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
     label: emojiChooseFileTitle,
     onChange: onChooseFile,
     onClick: onClick,
@@ -98,6 +102,11 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     ariaDescribedBy: fileChooserButtonDescriptionId,
     previewImage: previewImage,
     previewAlt: name
+  })), /*#__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"])
@@ -110,16 +119,15 @@ const ChooseEmojiFile = /*#__PURE__*/memo(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,
@@ -276,6 +284,7 @@ const EmojiUploadPicker = props => {
       setFilename(file.name);
       await ImageUtil.parseImage(f.target.result);
       setPreviewImage(f.target.result);
+      setChooseEmojiErrorMessage(undefined);
     } catch {
       setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiInvalidImage));
       cancelChooseFile();
@@ -306,15 +315,16 @@ const EmojiUploadPicker = props => {
     // using setTimeout here to allow the UI to update before setting focus
     setTimeout(lastFocus => {
       if (lastFocus) {
-        var _document$getElementB;
-        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+        var _getDocument, _getDocument$getEleme;
+        (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : (_getDocument$getEleme = _getDocument.getElementById(lastFocus)) === null || _getDocument$getEleme === void 0 ? void 0 : _getDocument$getEleme.focus();
       }
     }, 0, lastFocusedElementId.current);
   }, [clearUploadPicker, onUploadCancelled]);
   const onChooseFileClicked = () => {
     onFileChooserClicked && onFileChooserClicked();
   };
-  const content = !fg('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  const isDuplicateNameError = errorMessage !== null && errorMessage !== undefined && fg('platform_emoji_picker_refresh');
+  const content = name && previewImage && !fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -331,9 +341,10 @@ const 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/es2019/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)}