@atlaskit/emoji 70.7.2 → 70.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/emoji
 
+## 70.9.0
+
+### Minor Changes
+
+- [`54ec962646a89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54ec962646a89) -
+  Close upload emoji on category selected + hide selected category on upload emoji open
+
+## 70.8.0
+
+### Minor Changes
+
+- [`7bcc8a1cb49b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7bcc8a1cb49b5) -
+  Add unicode + emoji utilities
+
 ## 70.7.2
 
 ### Patch Changes

package/dist/cjs/api/EmojiUtils.js

@@ -163,5 +163,5 @@ var getHeight = function getHeight(fitToHeight) {
   return getPixelRatio() > 1 ? fitToHeight * 2 : fitToHeight;
 };
 var shouldUseAltRepresentation = exports.shouldUseAltRepresentation = function shouldUseAltRepresentation(emoji, fitToHeight) {
-  return !!(fitToHeight && emoji.altRepresentation && getHeight(fitToHeight) > emoji.representation.height);
+  return !!(fitToHeight && emoji.altRepresentation && emoji.representation && 'height' in emoji.representation && getHeight(fitToHeight) > emoji.representation.height);
 };

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

@@ -148,11 +148,12 @@ var CachingMediaEmoji = exports.CachingMediaEmoji = function CachingMediaEmoji(p
       onLoadError: handleLoadError
     }));
   }
+  var imageRepresentation = representation && 'height' in representation ? representation : undefined;
   return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
     size: fitToHeight || placeholderSize,
     shortName: shortName,
     showTooltip: showTooltip,
-    representation: representation
+    representation: imageRepresentation
   });
 };
 var _default_1 = /*#__PURE__*/(0, _react.memo)(CachingEmoji);

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

@@ -160,10 +160,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -318,6 +322,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
@@ -347,7 +357,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   var recordUsageOnSelection = (0, _react.useMemo)(function () {
     return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
@@ -575,7 +585,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -629,7 +639,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

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

package/dist/cjs/util/emojiIdToEmoji.js

@@ -4,9 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiIdToEmoji = emojiIdToEmoji;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var KEYCAP_COMBINING = 0x20e3;
+var VARIATION_SELECTOR_16 = 0xfe0f;
+var VARIATION_SELECTOR_15 = 0xfe0e;
+
+// Text-presentation-default emoji: BMP characters (U+0000–U+FFFF) that are
+// valid emoji but lack the Emoji_Presentation property render as text without
+// U+FE0F. Supplementary-plane characters (U+10000+) always render as emoji
+// regardless of the Emoji_Presentation property, so we skip those.
+//
+// This set is derived from Unicode 14.0 emoji-data.txt: all BMP code points
+// that have the Emoji property but NOT the Emoji_Presentation property.
+// Using an explicit lookup table avoids the \p{} Unicode property escape
+// syntax (TS1501) which requires a specific TypeScript build target.
+var TEXT_DEFAULT_EMOJI = new Set([0x0023, 0x002a, 0x0030, 0x0031, 0x0032, 0x0033, 0x0034, 0x0035, 0x0036, 0x0037, 0x0038, 0x0039, 0x00a9, 0x00ae, 0x203c, 0x2049, 0x2122, 0x2139, 0x2194, 0x2195, 0x2196, 0x2197, 0x2198, 0x2199, 0x21a9, 0x21aa, 0x2328, 0x23cf, 0x23ed, 0x23ee, 0x23ef, 0x23f1, 0x23f2, 0x23f8, 0x23f9, 0x23fa, 0x24c2, 0x25aa, 0x25ab, 0x25b6, 0x25c0, 0x25fb, 0x25fc, 0x2600, 0x2601, 0x2602, 0x2603, 0x2604, 0x260e, 0x2611, 0x2618, 0x261d, 0x2620, 0x2622, 0x2623, 0x2626, 0x262a, 0x262e, 0x262f, 0x2638, 0x2639, 0x263a, 0x2640, 0x2642, 0x265f, 0x2660, 0x2663, 0x2665, 0x2666, 0x2668, 0x267b, 0x267e, 0x2692, 0x2694, 0x2695, 0x2696, 0x2697, 0x2699, 0x269b, 0x269c, 0x26a0, 0x26a7, 0x26b0, 0x26b1, 0x26c8, 0x26cf, 0x26d1, 0x26d3, 0x26e9, 0x26f0, 0x26f1, 0x26f4, 0x26f7, 0x26f8, 0x26f9, 0x2702, 0x2708, 0x2709, 0x270c, 0x270d, 0x270f, 0x2712, 0x2714, 0x2716, 0x271d, 0x2721, 0x2733, 0x2734, 0x2744, 0x2747, 0x2763, 0x2764, 0x27a1, 0x2934, 0x2935, 0x2b05, 0x2b06, 0x2b07, 0x3030, 0x303d, 0x3297, 0x3299]);
+
 /**
  * Converts an emoji ID (a hyphen-separated string of hex Unicode code points,
  * e.g. `"1f44d"`, `"1f44d-1f3fb"`, `"1f468-200d-1f469-200d-1f467"`) into its
@@ -50,22 +66,35 @@ function emojiIdToEmoji(id) {
   if (codePoints.length === 0) {
     return undefined;
   }
-
-  // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
-  // The keycap base characters are: 0x23 (#), 0x2A (*), 0x30–0x39 (0–9).
-  var KEYCAP_COMBINING = 0x20e3;
-  var VARIATION_SELECTOR_16 = 0xfe0f;
   var processedCodePoints = [];
   for (var i = 0; i < codePoints.length; i++) {
     var cp = codePoints[i];
     var next = codePoints[i + 1];
     processedCodePoints.push(cp);
 
-    // Insert U+FE0F before U+20E3 if not already present
+    // Insert U+FE0F before U+20E3 if not already present.
+    // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
     if (next === KEYCAP_COMBINING && cp !== VARIATION_SELECTOR_16) {
       processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
+
+  // Text-presentation-default emoji: characters that are valid emoji but whose
+  // default rendering is text (e.g. ☪ ☺ ☢ etc.) must be followed by
+  // U+FE0F (VARIATION SELECTOR-16) to force emoji presentation.
+  if ((0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
+    var lastCodePoint = processedCodePoints[processedCodePoints.length - 1];
+    var alreadyHasVariationSelector = lastCodePoint === VARIATION_SELECTOR_16 || lastCodePoint === VARIATION_SELECTOR_15 ||
+    // Keycap sequences end with U+20E3 — they already have U+FE0F inserted inline
+    // and must not have another variation selector appended at the end.
+    lastCodePoint === KEYCAP_COMBINING;
+    if (!alreadyHasVariationSelector) {
+      var baseCodePoint = codePoints[0];
+      if (codePoints.length === 1 && baseCodePoint <= 0xffff && TEXT_DEFAULT_EMOJI.has(baseCodePoint)) {
+        processedCodePoints.push(VARIATION_SELECTOR_16);
+      }
+    }
+  }
   try {
     return String.fromCodePoint.apply(String, processedCodePoints);
   } catch (_unused) {

package/dist/cjs/util/type-helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toOptionalEmojiId = exports.toEmojiId = exports.isSpriteServiceRepresentation = exports.isSpriteRepresentation = exports.isPromise = exports.isMessagesKey = exports.isMediaRepresentation = exports.isMediaEmoji = exports.isLoadedMediaEmoji = exports.isImageRepresentation = exports.isEmojiVariationDescription = exports.isEmojiIdEqual = exports.isEmojiDescriptionWithVariations = exports.isEmojiDescription = exports.hasDataURLImage = exports.getCategoryId = exports.convertMediaToImageRepresentation = exports.convertMediaToImageEmoji = exports.convertImageToMediaRepresentation = exports.containsEmojiId = exports.buildEmojiDescriptionWithAltRepresentation = void 0;
+exports.toOptionalEmojiId = exports.toEmojiId = exports.isUnicodeRepresentation = exports.isSpriteServiceRepresentation = exports.isSpriteRepresentation = exports.isPromise = exports.isMessagesKey = exports.isMediaRepresentation = exports.isMediaEmoji = exports.isLoadedMediaEmoji = exports.isImageRepresentation = exports.isEmojiVariationDescription = exports.isEmojiIdEqual = exports.isEmojiDescriptionWithVariations = exports.isEmojiDescription = exports.hasDataURLImage = exports.getCategoryId = exports.convertMediaToImageRepresentation = exports.convertMediaToImageEmoji = exports.convertImageToMediaRepresentation = exports.containsEmojiId = exports.buildEmojiDescriptionWithAltRepresentation = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _i18n = require("../components/i18n");
 var _constants = require("./constants");
@@ -22,6 +22,9 @@ var isImageRepresentation = exports.isImageRepresentation = function isImageRepr
 var isMediaRepresentation = exports.isMediaRepresentation = function isMediaRepresentation(rep) {
   return !!(rep && rep.mediaPath);
 };
+var isUnicodeRepresentation = exports.isUnicodeRepresentation = function isUnicodeRepresentation(rep) {
+  return !!(rep && rep.unicodeEmoji);
+};
 var isPromise = exports.isPromise = function isPromise(p) {
   return !!(p && p.then);
 };

package/dist/es2019/api/EmojiUtils.js

@@ -156,4 +156,4 @@ export const denormaliseEmojiServiceResponse = emojiData => {
   };
 };
 const getHeight = fitToHeight => getPixelRatio() > 1 ? fitToHeight * 2 : fitToHeight;
-export const shouldUseAltRepresentation = (emoji, fitToHeight) => !!(fitToHeight && emoji.altRepresentation && getHeight(fitToHeight) > emoji.representation.height);
+export const shouldUseAltRepresentation = (emoji, fitToHeight) => !!(fitToHeight && emoji.altRepresentation && emoji.representation && 'height' in emoji.representation && getHeight(fitToHeight) > emoji.representation.height);

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

@@ -135,11 +135,12 @@ export const CachingMediaEmoji = props => {
       onLoadError: handleLoadError
     }));
   }
+  const imageRepresentation = representation && 'height' in representation ? representation : undefined;
   return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
     size: fitToHeight || placeholderSize,
     shortName: shortName,
     showTooltip: showTooltip,
-    representation: representation
+    representation: imageRepresentation
   });
 };
 const _default_1 = /*#__PURE__*/memo(CachingEmoji);

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

@@ -102,10 +102,14 @@ const EmojiPickerComponent = ({
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   const calculateElapsedTime = () => {
     return Date.now() - openTime.current;
   };
@@ -262,6 +266,12 @@ const EmojiPickerComponent = ({
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
       if (!disableCategories) {
         let newSelectedEmoji;
@@ -291,7 +301,7 @@ const EmojiPickerComponent = ({
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
   const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
   const onFileChooserClicked = useCallback(() => {
@@ -485,7 +495,7 @@ const EmojiPickerComponent = ({
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -535,7 +545,7 @@ const EmojiPickerComponent = ({
     onKeyDown: suppressKeyPress,
     className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

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

package/dist/es2019/util/emojiIdToEmoji.js

@@ -1,3 +1,19 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+const KEYCAP_COMBINING = 0x20e3;
+const VARIATION_SELECTOR_16 = 0xfe0f;
+const VARIATION_SELECTOR_15 = 0xfe0e;
+
+// Text-presentation-default emoji: BMP characters (U+0000–U+FFFF) that are
+// valid emoji but lack the Emoji_Presentation property render as text without
+// U+FE0F. Supplementary-plane characters (U+10000+) always render as emoji
+// regardless of the Emoji_Presentation property, so we skip those.
+//
+// This set is derived from Unicode 14.0 emoji-data.txt: all BMP code points
+// that have the Emoji property but NOT the Emoji_Presentation property.
+// Using an explicit lookup table avoids the \p{} Unicode property escape
+// syntax (TS1501) which requires a specific TypeScript build target.
+const TEXT_DEFAULT_EMOJI = new Set([0x0023, 0x002a, 0x0030, 0x0031, 0x0032, 0x0033, 0x0034, 0x0035, 0x0036, 0x0037, 0x0038, 0x0039, 0x00a9, 0x00ae, 0x203c, 0x2049, 0x2122, 0x2139, 0x2194, 0x2195, 0x2196, 0x2197, 0x2198, 0x2199, 0x21a9, 0x21aa, 0x2328, 0x23cf, 0x23ed, 0x23ee, 0x23ef, 0x23f1, 0x23f2, 0x23f8, 0x23f9, 0x23fa, 0x24c2, 0x25aa, 0x25ab, 0x25b6, 0x25c0, 0x25fb, 0x25fc, 0x2600, 0x2601, 0x2602, 0x2603, 0x2604, 0x260e, 0x2611, 0x2618, 0x261d, 0x2620, 0x2622, 0x2623, 0x2626, 0x262a, 0x262e, 0x262f, 0x2638, 0x2639, 0x263a, 0x2640, 0x2642, 0x265f, 0x2660, 0x2663, 0x2665, 0x2666, 0x2668, 0x267b, 0x267e, 0x2692, 0x2694, 0x2695, 0x2696, 0x2697, 0x2699, 0x269b, 0x269c, 0x26a0, 0x26a7, 0x26b0, 0x26b1, 0x26c8, 0x26cf, 0x26d1, 0x26d3, 0x26e9, 0x26f0, 0x26f1, 0x26f4, 0x26f7, 0x26f8, 0x26f9, 0x2702, 0x2708, 0x2709, 0x270c, 0x270d, 0x270f, 0x2712, 0x2714, 0x2716, 0x271d, 0x2721, 0x2733, 0x2734, 0x2744, 0x2747, 0x2763, 0x2764, 0x27a1, 0x2934, 0x2935, 0x2b05, 0x2b06, 0x2b07, 0x3030, 0x303d, 0x3297, 0x3299]);
+
 /**
  * Converts an emoji ID (a hyphen-separated string of hex Unicode code points,
  * e.g. `"1f44d"`, `"1f44d-1f3fb"`, `"1f468-200d-1f469-200d-1f467"`) into its
@@ -32,22 +48,35 @@ export function emojiIdToEmoji(id) {
   if (codePoints.length === 0) {
     return undefined;
   }
-
-  // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
-  // The keycap base characters are: 0x23 (#), 0x2A (*), 0x30–0x39 (0–9).
-  const KEYCAP_COMBINING = 0x20e3;
-  const VARIATION_SELECTOR_16 = 0xfe0f;
   const processedCodePoints = [];
   for (let i = 0; i < codePoints.length; i++) {
     const cp = codePoints[i];
     const next = codePoints[i + 1];
     processedCodePoints.push(cp);
 
-    // Insert U+FE0F before U+20E3 if not already present
+    // Insert U+FE0F before U+20E3 if not already present.
+    // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
     if (next === KEYCAP_COMBINING && cp !== VARIATION_SELECTOR_16) {
       processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
+
+  // Text-presentation-default emoji: characters that are valid emoji but whose
+  // default rendering is text (e.g. ☪ ☺ ☢ etc.) must be followed by
+  // U+FE0F (VARIATION SELECTOR-16) to force emoji presentation.
+  if (fg('platform_twemoji_removal_unicode_emojis')) {
+    const lastCodePoint = processedCodePoints[processedCodePoints.length - 1];
+    const alreadyHasVariationSelector = lastCodePoint === VARIATION_SELECTOR_16 || lastCodePoint === VARIATION_SELECTOR_15 ||
+    // Keycap sequences end with U+20E3 — they already have U+FE0F inserted inline
+    // and must not have another variation selector appended at the end.
+    lastCodePoint === KEYCAP_COMBINING;
+    if (!alreadyHasVariationSelector) {
+      const baseCodePoint = codePoints[0];
+      if (codePoints.length === 1 && baseCodePoint <= 0xffff && TEXT_DEFAULT_EMOJI.has(baseCodePoint)) {
+        processedCodePoints.push(VARIATION_SELECTOR_16);
+      }
+    }
+  }
   try {
     return String.fromCodePoint(...processedCodePoints);
   } catch {

package/dist/es2019/util/type-helpers.js

@@ -4,6 +4,7 @@ export const isSpriteServiceRepresentation = rep => !!(rep && rep.spriteRef);
 export const isSpriteRepresentation = rep => !!(rep && rep.sprite);
 export const isImageRepresentation = rep => !!(rep && rep.imagePath);
 export const isMediaRepresentation = rep => !!(rep && rep.mediaPath);
+export const isUnicodeRepresentation = rep => !!(rep && rep.unicodeEmoji);
 export const isPromise = p => !!(p && p.then);
 export const isEmojiDescription = possibleEmojiDescription => possibleEmojiDescription && possibleEmojiDescription.shortName && possibleEmojiDescription.type;
 export const isMediaEmoji = emoji => isMediaRepresentation(emoji.representation);

package/dist/esm/api/EmojiUtils.js

@@ -156,5 +156,5 @@ var getHeight = function getHeight(fitToHeight) {
   return getPixelRatio() > 1 ? fitToHeight * 2 : fitToHeight;
 };
 export var shouldUseAltRepresentation = function shouldUseAltRepresentation(emoji, fitToHeight) {
-  return !!(fitToHeight && emoji.altRepresentation && getHeight(fitToHeight) > emoji.representation.height);
+  return !!(fitToHeight && emoji.altRepresentation && emoji.representation && 'height' in emoji.representation && getHeight(fitToHeight) > emoji.representation.height);
 };

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

@@ -140,11 +140,12 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
       onLoadError: handleLoadError
     }));
   }
+  var imageRepresentation = representation && 'height' in representation ? representation : undefined;
   return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
     size: fitToHeight || placeholderSize,
     shortName: shortName,
     showTooltip: showTooltip,
-    representation: representation
+    representation: imageRepresentation
   });
 };
 var _default_1 = /*#__PURE__*/memo(CachingEmoji);

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

@@ -151,10 +151,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -309,6 +313,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
@@ -338,7 +348,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   var recordUsageOnSelection = useMemo(function () {
     return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(SearchSourceTypes.PICKER));
@@ -566,7 +576,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -620,7 +630,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

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

package/dist/esm/util/emojiIdToEmoji.js

@@ -1,6 +1,22 @@
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { fg } from '@atlaskit/platform-feature-flags';
+var KEYCAP_COMBINING = 0x20e3;
+var VARIATION_SELECTOR_16 = 0xfe0f;
+var VARIATION_SELECTOR_15 = 0xfe0e;
+
+// Text-presentation-default emoji: BMP characters (U+0000–U+FFFF) that are
+// valid emoji but lack the Emoji_Presentation property render as text without
+// U+FE0F. Supplementary-plane characters (U+10000+) always render as emoji
+// regardless of the Emoji_Presentation property, so we skip those.
+//
+// This set is derived from Unicode 14.0 emoji-data.txt: all BMP code points
+// that have the Emoji property but NOT the Emoji_Presentation property.
+// Using an explicit lookup table avoids the \p{} Unicode property escape
+// syntax (TS1501) which requires a specific TypeScript build target.
+var TEXT_DEFAULT_EMOJI = new Set([0x0023, 0x002a, 0x0030, 0x0031, 0x0032, 0x0033, 0x0034, 0x0035, 0x0036, 0x0037, 0x0038, 0x0039, 0x00a9, 0x00ae, 0x203c, 0x2049, 0x2122, 0x2139, 0x2194, 0x2195, 0x2196, 0x2197, 0x2198, 0x2199, 0x21a9, 0x21aa, 0x2328, 0x23cf, 0x23ed, 0x23ee, 0x23ef, 0x23f1, 0x23f2, 0x23f8, 0x23f9, 0x23fa, 0x24c2, 0x25aa, 0x25ab, 0x25b6, 0x25c0, 0x25fb, 0x25fc, 0x2600, 0x2601, 0x2602, 0x2603, 0x2604, 0x260e, 0x2611, 0x2618, 0x261d, 0x2620, 0x2622, 0x2623, 0x2626, 0x262a, 0x262e, 0x262f, 0x2638, 0x2639, 0x263a, 0x2640, 0x2642, 0x265f, 0x2660, 0x2663, 0x2665, 0x2666, 0x2668, 0x267b, 0x267e, 0x2692, 0x2694, 0x2695, 0x2696, 0x2697, 0x2699, 0x269b, 0x269c, 0x26a0, 0x26a7, 0x26b0, 0x26b1, 0x26c8, 0x26cf, 0x26d1, 0x26d3, 0x26e9, 0x26f0, 0x26f1, 0x26f4, 0x26f7, 0x26f8, 0x26f9, 0x2702, 0x2708, 0x2709, 0x270c, 0x270d, 0x270f, 0x2712, 0x2714, 0x2716, 0x271d, 0x2721, 0x2733, 0x2734, 0x2744, 0x2747, 0x2763, 0x2764, 0x27a1, 0x2934, 0x2935, 0x2b05, 0x2b06, 0x2b07, 0x3030, 0x303d, 0x3297, 0x3299]);
+
 /**
  * Converts an emoji ID (a hyphen-separated string of hex Unicode code points,
  * e.g. `"1f44d"`, `"1f44d-1f3fb"`, `"1f468-200d-1f469-200d-1f467"`) into its
@@ -44,22 +60,35 @@ export function emojiIdToEmoji(id) {
   if (codePoints.length === 0) {
     return undefined;
   }
-
-  // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
-  // The keycap base characters are: 0x23 (#), 0x2A (*), 0x30–0x39 (0–9).
-  var KEYCAP_COMBINING = 0x20e3;
-  var VARIATION_SELECTOR_16 = 0xfe0f;
   var processedCodePoints = [];
   for (var i = 0; i < codePoints.length; i++) {
     var cp = codePoints[i];
     var next = codePoints[i + 1];
     processedCodePoints.push(cp);
 
-    // Insert U+FE0F before U+20E3 if not already present
+    // Insert U+FE0F before U+20E3 if not already present.
+    // Keycap sequences: digit/# /* followed by U+20E3 need U+FE0F between them.
     if (next === KEYCAP_COMBINING && cp !== VARIATION_SELECTOR_16) {
       processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
+
+  // Text-presentation-default emoji: characters that are valid emoji but whose
+  // default rendering is text (e.g. ☪ ☺ ☢ etc.) must be followed by
+  // U+FE0F (VARIATION SELECTOR-16) to force emoji presentation.
+  if (fg('platform_twemoji_removal_unicode_emojis')) {
+    var lastCodePoint = processedCodePoints[processedCodePoints.length - 1];
+    var alreadyHasVariationSelector = lastCodePoint === VARIATION_SELECTOR_16 || lastCodePoint === VARIATION_SELECTOR_15 ||
+    // Keycap sequences end with U+20E3 — they already have U+FE0F inserted inline
+    // and must not have another variation selector appended at the end.
+    lastCodePoint === KEYCAP_COMBINING;
+    if (!alreadyHasVariationSelector) {
+      var baseCodePoint = codePoints[0];
+      if (codePoints.length === 1 && baseCodePoint <= 0xffff && TEXT_DEFAULT_EMOJI.has(baseCodePoint)) {
+        processedCodePoints.push(VARIATION_SELECTOR_16);
+      }
+    }
+  }
   try {
     return String.fromCodePoint.apply(String, processedCodePoints);
   } catch (_unused) {

package/dist/esm/util/type-helpers.js

@@ -15,6 +15,9 @@ export var isImageRepresentation = function isImageRepresentation(rep) {
 export var isMediaRepresentation = function isMediaRepresentation(rep) {
   return !!(rep && rep.mediaPath);
 };
+export var isUnicodeRepresentation = function isUnicodeRepresentation(rep) {
+  return !!(rep && rep.unicodeEmoji);
+};
 export var isPromise = function isPromise(p) {
   return !!(p && p.then);
 };

package/dist/types/types.d.ts

@@ -212,7 +212,10 @@ export interface ImageRepresentation extends EmojiImageRepresentation {
 export interface MediaApiRepresentation extends EmojiImageRepresentation {
     mediaPath: string;
 }
-export type EmojiRepresentation = SpriteRepresentation | ImageRepresentation | MediaApiRepresentation | undefined;
+export interface UnicodeRepresentation {
+    unicodeEmoji: string;
+}
+export type EmojiRepresentation = SpriteRepresentation | ImageRepresentation | MediaApiRepresentation | UnicodeRepresentation | undefined;
 export interface EmojiDescription extends EmojiId {
     altRepresentation?: EmojiRepresentation;
     ascii?: string[];

package/dist/types/util/type-helpers.d.ts

@@ -1,10 +1,11 @@
 import { messages } from '../components/i18n';
 import type { CategoryId } from '../components/picker/categories';
-import type { EmojiDescription, EmojiDescriptionWithVariations, EmojiId, EmojiImageRepresentation, EmojiRepresentation, EmojiServiceRepresentation, EmojiVariationDescription, ImageRepresentation, MediaApiRepresentation, OptionalEmojiDescription, SpriteRepresentation, SpriteServiceRepresentation } from '../types';
+import type { EmojiDescription, EmojiDescriptionWithVariations, EmojiId, EmojiImageRepresentation, EmojiRepresentation, EmojiServiceRepresentation, EmojiVariationDescription, ImageRepresentation, MediaApiRepresentation, OptionalEmojiDescription, SpriteRepresentation, SpriteServiceRepresentation, UnicodeRepresentation } from '../types';
 export declare const isSpriteServiceRepresentation: (rep: EmojiServiceRepresentation) => rep is SpriteServiceRepresentation;
 export declare const isSpriteRepresentation: (rep: EmojiRepresentation) => rep is SpriteRepresentation;
 export declare const isImageRepresentation: (rep: EmojiRepresentation | EmojiServiceRepresentation | EmojiImageRepresentation) => rep is ImageRepresentation;
 export declare const isMediaRepresentation: (rep: EmojiRepresentation | EmojiImageRepresentation) => rep is MediaApiRepresentation;
+export declare const isUnicodeRepresentation: (rep: EmojiRepresentation) => rep is UnicodeRepresentation;
 export declare const isPromise: <T>(p: any) => p is Promise<T>;
 export declare const isEmojiDescription: (possibleEmojiDescription: any) => possibleEmojiDescription is EmojiDescription;
 export declare const isMediaEmoji: (emoji: EmojiDescription) => boolean;

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

@@ -212,7 +212,10 @@ export interface ImageRepresentation extends EmojiImageRepresentation {
 export interface MediaApiRepresentation extends EmojiImageRepresentation {
     mediaPath: string;
 }
-export type EmojiRepresentation = SpriteRepresentation | ImageRepresentation | MediaApiRepresentation | undefined;
+export interface UnicodeRepresentation {
+    unicodeEmoji: string;
+}
+export type EmojiRepresentation = SpriteRepresentation | ImageRepresentation | MediaApiRepresentation | UnicodeRepresentation | undefined;
 export interface EmojiDescription extends EmojiId {
     altRepresentation?: EmojiRepresentation;
     ascii?: string[];

package/dist/types-ts4.5/util/type-helpers.d.ts

@@ -1,10 +1,11 @@
 import { messages } from '../components/i18n';
 import type { CategoryId } from '../components/picker/categories';
-import type { EmojiDescription, EmojiDescriptionWithVariations, EmojiId, EmojiImageRepresentation, EmojiRepresentation, EmojiServiceRepresentation, EmojiVariationDescription, ImageRepresentation, MediaApiRepresentation, OptionalEmojiDescription, SpriteRepresentation, SpriteServiceRepresentation } from '../types';
+import type { EmojiDescription, EmojiDescriptionWithVariations, EmojiId, EmojiImageRepresentation, EmojiRepresentation, EmojiServiceRepresentation, EmojiVariationDescription, ImageRepresentation, MediaApiRepresentation, OptionalEmojiDescription, SpriteRepresentation, SpriteServiceRepresentation, UnicodeRepresentation } from '../types';
 export declare const isSpriteServiceRepresentation: (rep: EmojiServiceRepresentation) => rep is SpriteServiceRepresentation;
 export declare const isSpriteRepresentation: (rep: EmojiRepresentation) => rep is SpriteRepresentation;
 export declare const isImageRepresentation: (rep: EmojiRepresentation | EmojiServiceRepresentation | EmojiImageRepresentation) => rep is ImageRepresentation;
 export declare const isMediaRepresentation: (rep: EmojiRepresentation | EmojiImageRepresentation) => rep is MediaApiRepresentation;
+export declare const isUnicodeRepresentation: (rep: EmojiRepresentation) => rep is UnicodeRepresentation;
 export declare const isPromise: <T>(p: any) => p is Promise<T>;
 export declare const isEmojiDescription: (possibleEmojiDescription: any) => possibleEmojiDescription is EmojiDescription;
 export declare const isMediaEmoji: (emoji: EmojiDescription) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.7.2",
+	"version": "70.9.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,8 +44,8 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.5.0",
-		"@atlaskit/media-client": "^36.2.0",
+		"@atlaskit/icon": "^34.6.0",
+		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",