@atlaskit/emoji 70.10.4 → 70.10.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/emoji
 
+## 70.10.6
+
+### Patch Changes
+
+- [`95ba1db6aa5f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/95ba1db6aa5f7) -
+  Use findByEmojiId with retry for shortName-only lookups and render native unicode characters for
+  STANDARD emojis behind platform_twemoji_removal_unicode_emojis feature gate
+- Updated dependencies
+
+## 70.10.5
+
+### Patch Changes
+
+- [`1bfdb5118d1c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1bfdb5118d1c7) -
+  Delete emoji screen fix scroll component at bottom
+- Updated dependencies
+
 ## 70.10.4
 
 ### Patch Changes

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

@@ -121,7 +121,7 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
           emoji: emoji
         })), /*#__PURE__*/React.createElement("div", {
-          className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+          className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp _n3tdutpp"])
         }, error && !loading ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
           message: formatMessage(_i18n.messages.deleteEmojiFailed),
           errorStyle: "delete",

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

@@ -20,6 +20,7 @@ var _analytics = require("../../util/analytics");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _emojiIdToEmoji = require("../../util/emojiIdToEmoji");
 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); }
 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) { (0, _defineProperty2.default)(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; }
@@ -88,7 +89,10 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                 }
               });
             }
-            foundEmoji = _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
+
+            // When id is absent/empty, fetchByEmojiId won't retry if the catalogue isn't loaded yet.
+            // findByEmojiId has retryIfLoading built in — use it for shortName-only lookups.
+            foundEmoji = !emojiId.id && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
             (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
             if ((0, _typeHelpers.isPromise)(foundEmoji)) {
               setLoaded(false);
@@ -170,14 +174,35 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     });
   }, [emojiProvider]);
   var emojiRenderState = (0, _react.useMemo)(function () {
-    if (!emoji && !loaded && !optimisticImageURL) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
     }
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
-  }, [emoji, loaded, optimisticImageURL, imageLoadError]);
+  }, [emoji, loaded, optimisticImageURL, imageLoadError, id]);
   var optimisticEmojiDescription = (0, _react.useMemo)(function () {
+    // For STANDARD emojis, use native unicode character instead of optimistic image.
+    if ((0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
+      var resolvedId = id || (emoji === null || emoji === void 0 ? void 0 : emoji.id);
+      if (!resolvedId) return undefined;
+      var unicodeEmoji = (0, _emojiIdToEmoji.emojiIdToEmoji)(resolvedId);
+      if (unicodeEmoji) {
+        return _objectSpread(_objectSpread({}, emoji !== null && emoji !== void 0 ? emoji : {
+          id: id,
+          shortName: shortName,
+          fallback: fallback,
+          type: 'STANDARD',
+          category: '',
+          searchable: true
+        }), {}, {
+          representation: {
+            unicodeEmoji: unicodeEmoji
+          }
+        });
+      }
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && (0, _platformFeatureFlags.fg)('platform_emoji_prevent_img_src_changing')) {
       return {

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

@@ -22,11 +22,14 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1dsu{height:419px}
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
+._4t3i50k7{height:499px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
+._4t3iqbeb{height:339px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}

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

@@ -48,6 +48,7 @@ var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerHeightWithPreviewNew = 310;
+var emojiPickerHeightDeleteRefresh = 339;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
@@ -65,6 +66,11 @@ var withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+var withDeleteRefreshHeight = {
+  small: "_4t3iqbeb _1tkegx0z",
+  medium: "_4t3i1dsu _1tke5x59",
+  large: "_4t3i50k7 _1tke1pna"
+};
 var withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -631,7 +637,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
       "aria-modal": true,
-      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]]),
+      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", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (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"))
@@ -691,7 +697,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    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]]),
+    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", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (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"))

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

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

@@ -102,7 +102,7 @@ class EmojiDeletePreview extends Component {
       }, /*#__PURE__*/React.createElement(CachingEmoji, {
         emoji: emoji
       })), /*#__PURE__*/React.createElement("div", {
-        className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+        className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp _n3tdutpp"])
       }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
         message: formatMessage(messages.deleteEmojiFailed),
         errorStyle: "delete",

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

@@ -8,6 +8,7 @@ import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -49,7 +50,10 @@ export const ResourcedEmojiComponent = ({
         }
       });
     }
-    const foundEmoji = _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
+
+    // When id is absent/empty, fetchByEmojiId won't retry if the catalogue isn't loaded yet.
+    // findByEmojiId has retryIfLoading built in — use it for shortName-only lookups.
+    const foundEmoji = !emojiId.id && fg('platform_twemoji_removal_unicode_emojis') ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
     sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
     if (isPromise(foundEmoji)) {
       setLoaded(false);
@@ -122,14 +126,36 @@ export const ResourcedEmojiComponent = ({
     });
   }, [emojiProvider]);
   const emojiRenderState = useMemo(() => {
-    if (!emoji && !loaded && !optimisticImageURL) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && fg('platform_twemoji_removal_unicode_emojis')) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
     }
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
-  }, [emoji, loaded, optimisticImageURL, imageLoadError]);
+  }, [emoji, loaded, optimisticImageURL, imageLoadError, id]);
   const optimisticEmojiDescription = useMemo(() => {
+    // For STANDARD emojis, use native unicode character instead of optimistic image.
+    if (fg('platform_twemoji_removal_unicode_emojis')) {
+      const resolvedId = id || (emoji === null || emoji === void 0 ? void 0 : emoji.id);
+      if (!resolvedId) return undefined;
+      const unicodeEmoji = emojiIdToEmoji(resolvedId);
+      if (unicodeEmoji) {
+        return {
+          ...(emoji !== null && emoji !== void 0 ? emoji : {
+            id,
+            shortName,
+            fallback,
+            type: 'STANDARD',
+            category: '',
+            searchable: true
+          }),
+          representation: {
+            unicodeEmoji
+          }
+        };
+      }
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
       return {

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

@@ -22,11 +22,14 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1dsu{height:419px}
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
+._4t3i50k7{height:499px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
+._4t3iqbeb{height:339px}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}
 ._94n5idpf{bottom:0}

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

@@ -32,6 +32,7 @@ const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0
 const emojiPickerHeight = 295;
 const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 const emojiPickerHeightWithPreviewNew = 310;
+const emojiPickerHeightDeleteRefresh = 339;
 const emojiPickerWidth = 350;
 const emojiPickerMinHeight = 260;
 const heightOffset = 80;
@@ -49,6 +50,11 @@ const withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+const withDeleteRefreshHeight = {
+  small: "_4t3iqbeb _1tkegx0z",
+  medium: "_4t3i1dsu _1tke5x59",
+  large: "_4t3i50k7 _1tke1pna"
+};
 const withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -541,7 +547,7 @@ const EmojiPickerComponent = ({
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      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]])
+      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", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]])
     }, /*#__PURE__*/React.createElement("div", {
       role: "presentation",
       onKeyPress: suppressKeyPress,
@@ -597,7 +603,7 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    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]])
+    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", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && 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,

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

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

@@ -112,7 +112,7 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/React.createElement(CachingEmoji, {
           emoji: emoji
         })), /*#__PURE__*/React.createElement("div", {
-          className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
+          className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp _n3tdutpp"])
         }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
           message: formatMessage(messages.deleteEmojiFailed),
           errorStyle: "delete",

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

@@ -14,6 +14,7 @@ import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -79,7 +80,10 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
                 }
               });
             }
-            foundEmoji = _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
+
+            // When id is absent/empty, fetchByEmojiId won't retry if the catalogue isn't loaded yet.
+            // findByEmojiId has retryIfLoading built in — use it for shortName-only lookups.
+            foundEmoji = !emojiId.id && fg('platform_twemoji_removal_unicode_emojis') ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
             sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
             if (isPromise(foundEmoji)) {
               setLoaded(false);
@@ -161,14 +165,35 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     });
   }, [emojiProvider]);
   var emojiRenderState = useMemo(function () {
-    if (!emoji && !loaded && !optimisticImageURL) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && fg('platform_twemoji_removal_unicode_emojis')) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
     }
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
-  }, [emoji, loaded, optimisticImageURL, imageLoadError]);
+  }, [emoji, loaded, optimisticImageURL, imageLoadError, id]);
   var optimisticEmojiDescription = useMemo(function () {
+    // For STANDARD emojis, use native unicode character instead of optimistic image.
+    if (fg('platform_twemoji_removal_unicode_emojis')) {
+      var resolvedId = id || (emoji === null || emoji === void 0 ? void 0 : emoji.id);
+      if (!resolvedId) return undefined;
+      var unicodeEmoji = emojiIdToEmoji(resolvedId);
+      if (unicodeEmoji) {
+        return _objectSpread(_objectSpread({}, emoji !== null && emoji !== void 0 ? emoji : {
+          id: id,
+          shortName: shortName,
+          fallback: fallback,
+          type: 'STANDARD',
+          category: '',
+          searchable: true
+        }), {}, {
+          representation: {
+            unicodeEmoji: unicodeEmoji
+          }
+        });
+      }
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
       return {

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

@@ -22,11 +22,14 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
 ._4t3i1ckg{height:455px}
+._4t3i1dsu{height:419px}
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
+._4t3i50k7{height:499px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iixjv{height:375px}
+._4t3iqbeb{height:339px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}

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

@@ -39,6 +39,7 @@ var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerHeightWithPreviewNew = 310;
+var emojiPickerHeightDeleteRefresh = 339;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
@@ -56,6 +57,11 @@ var withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+var withDeleteRefreshHeight = {
+  small: "_4t3iqbeb _1tkegx0z",
+  medium: "_4t3i1dsu _1tke5x59",
+  large: "_4t3i50k7 _1tke1pna"
+};
 var withoutPreviewHeight = {
   small: "_4t3iaq3k _1tkegx0z",
   medium: "_4t3iixjv _1tke5x59",
@@ -622,7 +628,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      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]]),
+      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", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -682,7 +688,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    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]]),
+    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", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.10.4",
+	"version": "70.10.6",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,9 +52,9 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^82.3.0",
+		"@atlaskit/tmp-editor-statsig": "^82.5.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/tooltip": "^22.3.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/util-service-support": "^6.4.0",
 		"@atlaskit/visually-hidden": "^3.1.0",