@atlaskit/emoji 71.4.3 → 71.4.5

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/emoji
 
+## 71.4.5
+
+### Patch Changes
+
+- [`3d5270635bf55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d5270635bf55) -
+  Select color should not close picker on some pages
+- [`4cb7dec82c494`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4cb7dec82c494) -
+  Place emoji tooltip above the emoji renderer by setting position to top
+- Updated dependencies
+
+## 71.4.4
+
+### Patch Changes
+
+- [`e3db0f49354a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3db0f49354a5) -
+  Use Twemoji for flag emoji and apply Unicode 14 emoji presentation selectors for native emoji
+  rendering.
+- [`ff291d024e356`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff291d024e356) -
+  EDITOR-7032 Show emoji shortName (with fallback to name) in tooltip on hover renderer
+- Updated dependencies
+
 ## 71.4.3
 
 ### Patch Changes

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

@@ -501,29 +501,38 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
   var ariaLabel = intl && (0, _platformFeatureFlags.fg)('platform_change_emoji_button_label') ? intl.formatMessage(_i18n.messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : editorEmoji ? undefined : emoji.shortName;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+  var tooltipContent = showTooltip && (0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  var emojiSpan = /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
     "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
     "data-emoji-type": type,
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : tooltipContent ? 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: shouldBeInteractive || !(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? function (event) {
       return handleKeyDown(props, event);
-    },
-    onMouseDown: function onMouseDown(event) {
+    } : undefined,
+    onMouseDown: shouldBeInteractive || !(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? function (event) {
       handleMouseDown(props, event);
-    },
+    } : undefined,
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: tooltipContent,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;

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

@@ -50,6 +50,13 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
   var stopPickerDismissal = function stopPickerDismissal(event) {
     event.stopPropagation();
   };
+  var selectColorOnMouseDown = function selectColorOnMouseDown(color) {
+    return function (event) {
+      stopPickerDismissal(event);
+      event.preventDefault();
+      onColorSelected(color);
+    };
+  };
   return /*#__PURE__*/React.createElement("fieldset", {
     id: productivityColorSelectorId,
     "data-testid": productivityColorSelectorTestId,
@@ -94,7 +101,7 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
       },
       onClick: stopPickerDismissal,
       onKeyDown: handleKeyDown,
-      onMouseDown: stopPickerDismissal,
+      onMouseDown: selectColorOnMouseDown(color),
       testId: "productivity-color-".concat(color),
       value: color,
       label: /*#__PURE__*/React.createElement("span", {

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: "71.4.2"
+      packageVersion: "71.4.4"
     }, attributes)
   };
 };

package/dist/cjs/util/emojiIdToEmoji.js

@@ -11,36 +11,25 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var KEYCAP_COMBINING = 0x20e3;
 var VARIATION_SELECTOR_16 = 0xfe0f;
 var VARIATION_SELECTOR_15 = 0xfe0e;
+var EMOJI_MODIFIER_START = 0x1f3fb;
+var EMOJI_MODIFIER_END = 0x1f3ff;
+var REGIONAL_INDICATOR_START = 0x1f1e6;
+var REGIONAL_INDICATOR_END = 0x1f1ff;
+var FLAG_BASES = new Set([0x1f38c, 0x1f3c1, 0x1f3f3, 0x1f3f4, 0x1f6a9]);
 
-// 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
- * corresponding Unicode string.
- *
- * Special handling:
- * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
- *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
- * - Text-default emoji (characters whose default presentation is text) must be
- *   followed by U+FE0F to force emoji presentation.
- *
- * @returns The Unicode string for the emoji, or `undefined` if the input is
- *   invalid (empty string, non-hex segments, or out-of-range code points).
- */
-function emojiIdToEmoji(id) {
-  if (!id) {
-    return undefined;
-  }
+// Emoji variation bases from Unicode 14.0 emoji-variation-sequences.txt.
+// These are the code points with a defined U+FE0F emoji-style variant.
+var EMOJI_VARIATION_BASES = 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, 0x1f170, 0x1f171, 0x1f17e, 0x1f17f, 0x1f202, 0x1f237, 0x1f321, 0x1f324, 0x1f325, 0x1f326, 0x1f327, 0x1f328, 0x1f329, 0x1f32a, 0x1f32b, 0x1f32c, 0x1f336, 0x1f37d, 0x1f396, 0x1f397, 0x1f399, 0x1f39a, 0x1f39b, 0x1f39e, 0x1f39f, 0x1f3cb, 0x1f3cc, 0x1f3cd, 0x1f3ce, 0x1f3d4, 0x1f3d5, 0x1f3d6, 0x1f3d7, 0x1f3d8, 0x1f3d9, 0x1f3da, 0x1f3db, 0x1f3dc, 0x1f3dd, 0x1f3de, 0x1f3df, 0x1f3f3, 0x1f3f5, 0x1f3f7, 0x1f43f, 0x1f441, 0x1f4fd, 0x1f549, 0x1f54a, 0x1f56f, 0x1f570, 0x1f573, 0x1f574, 0x1f575, 0x1f576, 0x1f577, 0x1f578, 0x1f579, 0x1f587, 0x1f58a, 0x1f58b, 0x1f58c, 0x1f58d, 0x1f590, 0x1f5a5, 0x1f5a8, 0x1f5b1, 0x1f5b2, 0x1f5bc, 0x1f5c2, 0x1f5c3, 0x1f5c4, 0x1f5d1, 0x1f5d2, 0x1f5d3, 0x1f5dc, 0x1f5dd, 0x1f5de, 0x1f5e1, 0x1f5e3, 0x1f5e8, 0x1f5ef, 0x1f5f3, 0x1f5fa, 0x1f6cb, 0x1f6cd, 0x1f6ce, 0x1f6cf, 0x1f6e0, 0x1f6e1, 0x1f6e2, 0x1f6e3, 0x1f6e4, 0x1f6e5, 0x1f6e9, 0x1f6f0, 0x1f6f3, 0x231a, 0x231b, 0x23e9, 0x23ea, 0x23f3, 0x25fd, 0x25fe, 0x2614, 0x2615, 0x2648, 0x2649, 0x264a, 0x264b, 0x264c, 0x264d, 0x264e, 0x264f, 0x2650, 0x2651, 0x2652, 0x2653, 0x267f, 0x2693, 0x26a1, 0x26aa, 0x26ab, 0x26bd, 0x26be, 0x26c4, 0x26c5, 0x26d4, 0x26ea, 0x26f2, 0x26f3, 0x26f5, 0x26fa, 0x26fd, 0x2753, 0x2757, 0x2b1b, 0x2b1c, 0x2b50, 0x2b55, 0x1f004, 0x1f21a, 0x1f22f, 0x1f30d, 0x1f30e, 0x1f30f, 0x1f315, 0x1f31c, 0x1f378, 0x1f393, 0x1f3a7, 0x1f3ac, 0x1f3ad, 0x1f3ae, 0x1f3c2, 0x1f3c4, 0x1f3c6, 0x1f3ca, 0x1f3e0, 0x1f3ed, 0x1f408, 0x1f415, 0x1f41f, 0x1f426, 0x1f442, 0x1f446, 0x1f447, 0x1f448, 0x1f449, 0x1f44d, 0x1f44e, 0x1f453, 0x1f46a, 0x1f47d, 0x1f4a3, 0x1f4b0, 0x1f4b3, 0x1f4bb, 0x1f4bf, 0x1f4cb, 0x1f4da, 0x1f4df, 0x1f4e4, 0x1f4e5, 0x1f4e6, 0x1f4ea, 0x1f4eb, 0x1f4ec, 0x1f4ed, 0x1f4f7, 0x1f4f9, 0x1f4fa, 0x1f4fb, 0x1f508, 0x1f50d, 0x1f512, 0x1f513, 0x1f550, 0x1f551, 0x1f552, 0x1f553, 0x1f554, 0x1f555, 0x1f556, 0x1f557, 0x1f558, 0x1f559, 0x1f55a, 0x1f55b, 0x1f55c, 0x1f55d, 0x1f55e, 0x1f55f, 0x1f560, 0x1f561, 0x1f562, 0x1f563, 0x1f564, 0x1f565, 0x1f566, 0x1f567, 0x1f610, 0x1f687, 0x1f68d, 0x1f691, 0x1f694, 0x1f698, 0x1f6ad, 0x1f6b2, 0x1f6b9, 0x1f6ba, 0x1f6bc]);
+var isEmojiModifier = function isEmojiModifier(codePoint) {
+  return typeof codePoint === 'number' && codePoint >= EMOJI_MODIFIER_START && codePoint <= EMOJI_MODIFIER_END;
+};
+var shouldAddEmojiPresentationSelector = function shouldAddEmojiPresentationSelector(codePoint, nextCodePoint) {
+  return EMOJI_VARIATION_BASES.has(codePoint) && nextCodePoint !== VARIATION_SELECTOR_16 && nextCodePoint !== VARIATION_SELECTOR_15 && nextCodePoint !== KEYCAP_COMBINING && !isEmojiModifier(nextCodePoint);
+};
+var isRegionalIndicator = function isRegionalIndicator(codePoint) {
+  return codePoint >= REGIONAL_INDICATOR_START && codePoint <= REGIONAL_INDICATOR_END;
+};
+var parseEmojiIdCodePoints = function parseEmojiIdCodePoints(id) {
   var segments = id.split('-');
   var codePoints = [];
   var _iterator = _createForOfIteratorHelper(segments),
@@ -51,19 +40,53 @@ function emojiIdToEmoji(id) {
       if (!/^[0-9a-fA-F]+$/.test(segment)) {
         return undefined;
       }
-      var _cp = parseInt(segment, 16);
-      // Valid Unicode scalar values: 0x0000–0x10FFFF, excluding surrogates 0xD800–0xDFFF
-      if (isNaN(_cp) || _cp < 0 || _cp > 0x10ffff || _cp >= 0xd800 && _cp <= 0xdfff) {
+      var cp = parseInt(segment, 16);
+      // Valid Unicode scalar values: U+0000–U+10FFFF, excluding surrogates.
+      if (isNaN(cp) || cp < 0 || cp > 0x10ffff || cp >= 0xd800 && cp <= 0xdfff) {
         return undefined;
       }
-      codePoints.push(_cp);
+      codePoints.push(cp);
     }
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  if (codePoints.length === 0) {
+  return codePoints.length ? codePoints : undefined;
+};
+var isFlagEmoji = function isFlagEmoji(codePoints) {
+  if (codePoints.length === 2 && codePoints.every(isRegionalIndicator)) {
+    return true;
+  }
+  return FLAG_BASES.has(codePoints[0]);
+};
+
+/**
+ * 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
+ * corresponding Unicode string.
+ *
+ * Special handling:
+ * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
+ *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
+ * - Emoji variation bases are followed by U+FE0F to force emoji presentation.
+ * - Flags return `undefined` so callers use Twemoji instead of native emoji.
+ *
+ * @returns The Unicode string for the emoji, or `undefined` if the input is
+ *   invalid (empty string, non-hex segments, or out-of-range code points).
+ */
+function emojiIdToEmoji(id) {
+  if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true)) {
+    return undefined;
+  }
+  if (!id) {
+    return undefined;
+  }
+  var codePoints = parseEmojiIdCodePoints(id);
+  if (!codePoints) {
+    return undefined;
+  }
+  if (isFlagEmoji(codePoints)) {
     return undefined;
   }
   var processedCodePoints = [];
@@ -77,22 +100,11 @@ function emojiIdToEmoji(id) {
     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, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true)) {
-    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);
-      }
+    // Emoji variation bases need U+FE0F immediately after the base code point,
+    // including when the base appears inside a ZWJ sequence.
+    if (shouldAddEmojiPresentationSelector(cp, next)) {
+      processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
   try {

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

@@ -469,27 +469,36 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   const ariaLabel = intl && fg('platform_change_emoji_button_label') ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : editorEmoji ? undefined : emoji.shortName;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  const tooltipContent = showTooltip && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  const emojiSpan = /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
     "data-testid": `${type}-emoji-${emoji.shortName}`,
     "data-emoji-type": type,
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : tooltipContent ? 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
-    onKeyDown: event => handleKeyDown(props, event),
-    onMouseDown: event => {
+    onKeyDown: shouldBeInteractive || !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? event => handleKeyDown(props, event) : undefined,
+    onMouseDown: shouldBeInteractive || !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? event => {
       handleMouseDown(props, event);
-    },
+    } : undefined,
     onMouseEnter: event => {
       handleMouseMove(props, event);
     },
     onFocus: event => {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 export const Emoji = props => {
   const {

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

@@ -37,6 +37,11 @@ export const ProductivityColorSelector = ({
   const stopPickerDismissal = event => {
     event.stopPropagation();
   };
+  const selectColorOnMouseDown = color => event => {
+    stopPickerDismissal(event);
+    event.preventDefault();
+    onColorSelected(color);
+  };
   return /*#__PURE__*/React.createElement("fieldset", {
     id: productivityColorSelectorId,
     "data-testid": productivityColorSelectorTestId,
@@ -79,7 +84,7 @@ export const ProductivityColorSelector = ({
       onChange: () => onColorSelected(color),
       onClick: stopPickerDismissal,
       onKeyDown: handleKeyDown,
-      onMouseDown: stopPickerDismissal,
+      onMouseDown: selectColorOnMouseDown(color),
       testId: `productivity-color-${color}`,
       value: color,
       label: /*#__PURE__*/React.createElement("span", {

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.4.2",
+    packageVersion: "71.4.4",
     ...attributes
   }
 });

package/dist/es2019/util/emojiIdToEmoji.js

@@ -2,17 +2,40 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 const KEYCAP_COMBINING = 0x20e3;
 const VARIATION_SELECTOR_16 = 0xfe0f;
 const VARIATION_SELECTOR_15 = 0xfe0e;
+const EMOJI_MODIFIER_START = 0x1f3fb;
+const EMOJI_MODIFIER_END = 0x1f3ff;
+const REGIONAL_INDICATOR_START = 0x1f1e6;
+const REGIONAL_INDICATOR_END = 0x1f1ff;
+const FLAG_BASES = new Set([0x1f38c, 0x1f3c1, 0x1f3f3, 0x1f3f4, 0x1f6a9]);
 
-// 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]);
+// Emoji variation bases from Unicode 14.0 emoji-variation-sequences.txt.
+// These are the code points with a defined U+FE0F emoji-style variant.
+const EMOJI_VARIATION_BASES = 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, 0x1f170, 0x1f171, 0x1f17e, 0x1f17f, 0x1f202, 0x1f237, 0x1f321, 0x1f324, 0x1f325, 0x1f326, 0x1f327, 0x1f328, 0x1f329, 0x1f32a, 0x1f32b, 0x1f32c, 0x1f336, 0x1f37d, 0x1f396, 0x1f397, 0x1f399, 0x1f39a, 0x1f39b, 0x1f39e, 0x1f39f, 0x1f3cb, 0x1f3cc, 0x1f3cd, 0x1f3ce, 0x1f3d4, 0x1f3d5, 0x1f3d6, 0x1f3d7, 0x1f3d8, 0x1f3d9, 0x1f3da, 0x1f3db, 0x1f3dc, 0x1f3dd, 0x1f3de, 0x1f3df, 0x1f3f3, 0x1f3f5, 0x1f3f7, 0x1f43f, 0x1f441, 0x1f4fd, 0x1f549, 0x1f54a, 0x1f56f, 0x1f570, 0x1f573, 0x1f574, 0x1f575, 0x1f576, 0x1f577, 0x1f578, 0x1f579, 0x1f587, 0x1f58a, 0x1f58b, 0x1f58c, 0x1f58d, 0x1f590, 0x1f5a5, 0x1f5a8, 0x1f5b1, 0x1f5b2, 0x1f5bc, 0x1f5c2, 0x1f5c3, 0x1f5c4, 0x1f5d1, 0x1f5d2, 0x1f5d3, 0x1f5dc, 0x1f5dd, 0x1f5de, 0x1f5e1, 0x1f5e3, 0x1f5e8, 0x1f5ef, 0x1f5f3, 0x1f5fa, 0x1f6cb, 0x1f6cd, 0x1f6ce, 0x1f6cf, 0x1f6e0, 0x1f6e1, 0x1f6e2, 0x1f6e3, 0x1f6e4, 0x1f6e5, 0x1f6e9, 0x1f6f0, 0x1f6f3, 0x231a, 0x231b, 0x23e9, 0x23ea, 0x23f3, 0x25fd, 0x25fe, 0x2614, 0x2615, 0x2648, 0x2649, 0x264a, 0x264b, 0x264c, 0x264d, 0x264e, 0x264f, 0x2650, 0x2651, 0x2652, 0x2653, 0x267f, 0x2693, 0x26a1, 0x26aa, 0x26ab, 0x26bd, 0x26be, 0x26c4, 0x26c5, 0x26d4, 0x26ea, 0x26f2, 0x26f3, 0x26f5, 0x26fa, 0x26fd, 0x2753, 0x2757, 0x2b1b, 0x2b1c, 0x2b50, 0x2b55, 0x1f004, 0x1f21a, 0x1f22f, 0x1f30d, 0x1f30e, 0x1f30f, 0x1f315, 0x1f31c, 0x1f378, 0x1f393, 0x1f3a7, 0x1f3ac, 0x1f3ad, 0x1f3ae, 0x1f3c2, 0x1f3c4, 0x1f3c6, 0x1f3ca, 0x1f3e0, 0x1f3ed, 0x1f408, 0x1f415, 0x1f41f, 0x1f426, 0x1f442, 0x1f446, 0x1f447, 0x1f448, 0x1f449, 0x1f44d, 0x1f44e, 0x1f453, 0x1f46a, 0x1f47d, 0x1f4a3, 0x1f4b0, 0x1f4b3, 0x1f4bb, 0x1f4bf, 0x1f4cb, 0x1f4da, 0x1f4df, 0x1f4e4, 0x1f4e5, 0x1f4e6, 0x1f4ea, 0x1f4eb, 0x1f4ec, 0x1f4ed, 0x1f4f7, 0x1f4f9, 0x1f4fa, 0x1f4fb, 0x1f508, 0x1f50d, 0x1f512, 0x1f513, 0x1f550, 0x1f551, 0x1f552, 0x1f553, 0x1f554, 0x1f555, 0x1f556, 0x1f557, 0x1f558, 0x1f559, 0x1f55a, 0x1f55b, 0x1f55c, 0x1f55d, 0x1f55e, 0x1f55f, 0x1f560, 0x1f561, 0x1f562, 0x1f563, 0x1f564, 0x1f565, 0x1f566, 0x1f567, 0x1f610, 0x1f687, 0x1f68d, 0x1f691, 0x1f694, 0x1f698, 0x1f6ad, 0x1f6b2, 0x1f6b9, 0x1f6ba, 0x1f6bc]);
+const isEmojiModifier = codePoint => typeof codePoint === 'number' && codePoint >= EMOJI_MODIFIER_START && codePoint <= EMOJI_MODIFIER_END;
+const shouldAddEmojiPresentationSelector = (codePoint, nextCodePoint) => EMOJI_VARIATION_BASES.has(codePoint) && nextCodePoint !== VARIATION_SELECTOR_16 && nextCodePoint !== VARIATION_SELECTOR_15 && nextCodePoint !== KEYCAP_COMBINING && !isEmojiModifier(nextCodePoint);
+const isRegionalIndicator = codePoint => codePoint >= REGIONAL_INDICATOR_START && codePoint <= REGIONAL_INDICATOR_END;
+const parseEmojiIdCodePoints = id => {
+  const segments = id.split('-');
+  const codePoints = [];
+  for (const segment of segments) {
+    if (!/^[0-9a-fA-F]+$/.test(segment)) {
+      return undefined;
+    }
+    const cp = parseInt(segment, 16);
+    // Valid Unicode scalar values: U+0000–U+10FFFF, excluding surrogates.
+    if (isNaN(cp) || cp < 0 || cp > 0x10ffff || cp >= 0xd800 && cp <= 0xdfff) {
+      return undefined;
+    }
+    codePoints.push(cp);
+  }
+  return codePoints.length ? codePoints : undefined;
+};
+const isFlagEmoji = codePoints => {
+  if (codePoints.length === 2 && codePoints.every(isRegionalIndicator)) {
+    return true;
+  }
+  return FLAG_BASES.has(codePoints[0]);
+};
 
 /**
  * Converts an emoji ID (a hyphen-separated string of hex Unicode code points,
@@ -22,30 +45,24 @@ const TEXT_DEFAULT_EMOJI = new Set([0x0023, 0x002a, 0x0030, 0x0031, 0x0032, 0x00
  * Special handling:
  * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
  *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
- * - Text-default emoji (characters whose default presentation is text) must be
- *   followed by U+FE0F to force emoji presentation.
+ * - Emoji variation bases are followed by U+FE0F to force emoji presentation.
+ * - Flags return `undefined` so callers use Twemoji instead of native emoji.
  *
  * @returns The Unicode string for the emoji, or `undefined` if the input is
  *   invalid (empty string, non-hex segments, or out-of-range code points).
  */
 export function emojiIdToEmoji(id) {
+  if (!expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
+    return undefined;
+  }
   if (!id) {
     return undefined;
   }
-  const segments = id.split('-');
-  const codePoints = [];
-  for (const segment of segments) {
-    if (!/^[0-9a-fA-F]+$/.test(segment)) {
-      return undefined;
-    }
-    const cp = parseInt(segment, 16);
-    // Valid Unicode scalar values: 0x0000–0x10FFFF, excluding surrogates 0xD800–0xDFFF
-    if (isNaN(cp) || cp < 0 || cp > 0x10ffff || cp >= 0xd800 && cp <= 0xdfff) {
-      return undefined;
-    }
-    codePoints.push(cp);
+  const codePoints = parseEmojiIdCodePoints(id);
+  if (!codePoints) {
+    return undefined;
   }
-  if (codePoints.length === 0) {
+  if (isFlagEmoji(codePoints)) {
     return undefined;
   }
   const processedCodePoints = [];
@@ -59,22 +76,11 @@ export function emojiIdToEmoji(id) {
     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 (expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
-    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);
-      }
+    // Emoji variation bases need U+FE0F immediately after the base code point,
+    // including when the base appears inside a ZWJ sequence.
+    if (shouldAddEmojiPresentationSelector(cp, next)) {
+      processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
   try {

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

@@ -492,29 +492,38 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = intl && fg('platform_change_emoji_button_label') ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : editorEmoji ? undefined : emoji.shortName;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  var tooltipContent = showTooltip && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  var emojiSpan = /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
     "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
     "data-emoji-type": type,
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : tooltipContent ? 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: shouldBeInteractive || !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? function (event) {
       return handleKeyDown(props, event);
-    },
-    onMouseDown: function onMouseDown(event) {
+    } : undefined,
+    onMouseDown: shouldBeInteractive || !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? function (event) {
       handleMouseDown(props, event);
-    },
+    } : undefined,
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 export var Emoji = function Emoji(props) {
   var emoji = props.emoji;

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

@@ -41,6 +41,13 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
   var stopPickerDismissal = function stopPickerDismissal(event) {
     event.stopPropagation();
   };
+  var selectColorOnMouseDown = function selectColorOnMouseDown(color) {
+    return function (event) {
+      stopPickerDismissal(event);
+      event.preventDefault();
+      onColorSelected(color);
+    };
+  };
   return /*#__PURE__*/React.createElement("fieldset", {
     id: productivityColorSelectorId,
     "data-testid": productivityColorSelectorTestId,
@@ -85,7 +92,7 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
       },
       onClick: stopPickerDismissal,
       onKeyDown: handleKeyDown,
-      onMouseDown: stopPickerDismissal,
+      onMouseDown: selectColorOnMouseDown(color),
       testId: "productivity-color-".concat(color),
       value: color,
       label: /*#__PURE__*/React.createElement("span", {

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: "71.4.2"
+      packageVersion: "71.4.4"
     }, attributes)
   };
 };

package/dist/esm/util/emojiIdToEmoji.js

@@ -5,36 +5,25 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 var KEYCAP_COMBINING = 0x20e3;
 var VARIATION_SELECTOR_16 = 0xfe0f;
 var VARIATION_SELECTOR_15 = 0xfe0e;
+var EMOJI_MODIFIER_START = 0x1f3fb;
+var EMOJI_MODIFIER_END = 0x1f3ff;
+var REGIONAL_INDICATOR_START = 0x1f1e6;
+var REGIONAL_INDICATOR_END = 0x1f1ff;
+var FLAG_BASES = new Set([0x1f38c, 0x1f3c1, 0x1f3f3, 0x1f3f4, 0x1f6a9]);
 
-// 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
- * corresponding Unicode string.
- *
- * Special handling:
- * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
- *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
- * - Text-default emoji (characters whose default presentation is text) must be
- *   followed by U+FE0F to force emoji presentation.
- *
- * @returns The Unicode string for the emoji, or `undefined` if the input is
- *   invalid (empty string, non-hex segments, or out-of-range code points).
- */
-export function emojiIdToEmoji(id) {
-  if (!id) {
-    return undefined;
-  }
+// Emoji variation bases from Unicode 14.0 emoji-variation-sequences.txt.
+// These are the code points with a defined U+FE0F emoji-style variant.
+var EMOJI_VARIATION_BASES = 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, 0x1f170, 0x1f171, 0x1f17e, 0x1f17f, 0x1f202, 0x1f237, 0x1f321, 0x1f324, 0x1f325, 0x1f326, 0x1f327, 0x1f328, 0x1f329, 0x1f32a, 0x1f32b, 0x1f32c, 0x1f336, 0x1f37d, 0x1f396, 0x1f397, 0x1f399, 0x1f39a, 0x1f39b, 0x1f39e, 0x1f39f, 0x1f3cb, 0x1f3cc, 0x1f3cd, 0x1f3ce, 0x1f3d4, 0x1f3d5, 0x1f3d6, 0x1f3d7, 0x1f3d8, 0x1f3d9, 0x1f3da, 0x1f3db, 0x1f3dc, 0x1f3dd, 0x1f3de, 0x1f3df, 0x1f3f3, 0x1f3f5, 0x1f3f7, 0x1f43f, 0x1f441, 0x1f4fd, 0x1f549, 0x1f54a, 0x1f56f, 0x1f570, 0x1f573, 0x1f574, 0x1f575, 0x1f576, 0x1f577, 0x1f578, 0x1f579, 0x1f587, 0x1f58a, 0x1f58b, 0x1f58c, 0x1f58d, 0x1f590, 0x1f5a5, 0x1f5a8, 0x1f5b1, 0x1f5b2, 0x1f5bc, 0x1f5c2, 0x1f5c3, 0x1f5c4, 0x1f5d1, 0x1f5d2, 0x1f5d3, 0x1f5dc, 0x1f5dd, 0x1f5de, 0x1f5e1, 0x1f5e3, 0x1f5e8, 0x1f5ef, 0x1f5f3, 0x1f5fa, 0x1f6cb, 0x1f6cd, 0x1f6ce, 0x1f6cf, 0x1f6e0, 0x1f6e1, 0x1f6e2, 0x1f6e3, 0x1f6e4, 0x1f6e5, 0x1f6e9, 0x1f6f0, 0x1f6f3, 0x231a, 0x231b, 0x23e9, 0x23ea, 0x23f3, 0x25fd, 0x25fe, 0x2614, 0x2615, 0x2648, 0x2649, 0x264a, 0x264b, 0x264c, 0x264d, 0x264e, 0x264f, 0x2650, 0x2651, 0x2652, 0x2653, 0x267f, 0x2693, 0x26a1, 0x26aa, 0x26ab, 0x26bd, 0x26be, 0x26c4, 0x26c5, 0x26d4, 0x26ea, 0x26f2, 0x26f3, 0x26f5, 0x26fa, 0x26fd, 0x2753, 0x2757, 0x2b1b, 0x2b1c, 0x2b50, 0x2b55, 0x1f004, 0x1f21a, 0x1f22f, 0x1f30d, 0x1f30e, 0x1f30f, 0x1f315, 0x1f31c, 0x1f378, 0x1f393, 0x1f3a7, 0x1f3ac, 0x1f3ad, 0x1f3ae, 0x1f3c2, 0x1f3c4, 0x1f3c6, 0x1f3ca, 0x1f3e0, 0x1f3ed, 0x1f408, 0x1f415, 0x1f41f, 0x1f426, 0x1f442, 0x1f446, 0x1f447, 0x1f448, 0x1f449, 0x1f44d, 0x1f44e, 0x1f453, 0x1f46a, 0x1f47d, 0x1f4a3, 0x1f4b0, 0x1f4b3, 0x1f4bb, 0x1f4bf, 0x1f4cb, 0x1f4da, 0x1f4df, 0x1f4e4, 0x1f4e5, 0x1f4e6, 0x1f4ea, 0x1f4eb, 0x1f4ec, 0x1f4ed, 0x1f4f7, 0x1f4f9, 0x1f4fa, 0x1f4fb, 0x1f508, 0x1f50d, 0x1f512, 0x1f513, 0x1f550, 0x1f551, 0x1f552, 0x1f553, 0x1f554, 0x1f555, 0x1f556, 0x1f557, 0x1f558, 0x1f559, 0x1f55a, 0x1f55b, 0x1f55c, 0x1f55d, 0x1f55e, 0x1f55f, 0x1f560, 0x1f561, 0x1f562, 0x1f563, 0x1f564, 0x1f565, 0x1f566, 0x1f567, 0x1f610, 0x1f687, 0x1f68d, 0x1f691, 0x1f694, 0x1f698, 0x1f6ad, 0x1f6b2, 0x1f6b9, 0x1f6ba, 0x1f6bc]);
+var isEmojiModifier = function isEmojiModifier(codePoint) {
+  return typeof codePoint === 'number' && codePoint >= EMOJI_MODIFIER_START && codePoint <= EMOJI_MODIFIER_END;
+};
+var shouldAddEmojiPresentationSelector = function shouldAddEmojiPresentationSelector(codePoint, nextCodePoint) {
+  return EMOJI_VARIATION_BASES.has(codePoint) && nextCodePoint !== VARIATION_SELECTOR_16 && nextCodePoint !== VARIATION_SELECTOR_15 && nextCodePoint !== KEYCAP_COMBINING && !isEmojiModifier(nextCodePoint);
+};
+var isRegionalIndicator = function isRegionalIndicator(codePoint) {
+  return codePoint >= REGIONAL_INDICATOR_START && codePoint <= REGIONAL_INDICATOR_END;
+};
+var parseEmojiIdCodePoints = function parseEmojiIdCodePoints(id) {
   var segments = id.split('-');
   var codePoints = [];
   var _iterator = _createForOfIteratorHelper(segments),
@@ -45,19 +34,53 @@ export function emojiIdToEmoji(id) {
       if (!/^[0-9a-fA-F]+$/.test(segment)) {
         return undefined;
       }
-      var _cp = parseInt(segment, 16);
-      // Valid Unicode scalar values: 0x0000–0x10FFFF, excluding surrogates 0xD800–0xDFFF
-      if (isNaN(_cp) || _cp < 0 || _cp > 0x10ffff || _cp >= 0xd800 && _cp <= 0xdfff) {
+      var cp = parseInt(segment, 16);
+      // Valid Unicode scalar values: U+0000–U+10FFFF, excluding surrogates.
+      if (isNaN(cp) || cp < 0 || cp > 0x10ffff || cp >= 0xd800 && cp <= 0xdfff) {
         return undefined;
       }
-      codePoints.push(_cp);
+      codePoints.push(cp);
     }
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  if (codePoints.length === 0) {
+  return codePoints.length ? codePoints : undefined;
+};
+var isFlagEmoji = function isFlagEmoji(codePoints) {
+  if (codePoints.length === 2 && codePoints.every(isRegionalIndicator)) {
+    return true;
+  }
+  return FLAG_BASES.has(codePoints[0]);
+};
+
+/**
+ * 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
+ * corresponding Unicode string.
+ *
+ * Special handling:
+ * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
+ *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
+ * - Emoji variation bases are followed by U+FE0F to force emoji presentation.
+ * - Flags return `undefined` so callers use Twemoji instead of native emoji.
+ *
+ * @returns The Unicode string for the emoji, or `undefined` if the input is
+ *   invalid (empty string, non-hex segments, or out-of-range code points).
+ */
+export function emojiIdToEmoji(id) {
+  if (!expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
+    return undefined;
+  }
+  if (!id) {
+    return undefined;
+  }
+  var codePoints = parseEmojiIdCodePoints(id);
+  if (!codePoints) {
+    return undefined;
+  }
+  if (isFlagEmoji(codePoints)) {
     return undefined;
   }
   var processedCodePoints = [];
@@ -71,22 +94,11 @@ export function emojiIdToEmoji(id) {
     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 (expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
-    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);
-      }
+    // Emoji variation bases need U+FE0F immediately after the base code point,
+    // including when the base appears inside a ZWJ sequence.
+    if (shouldAddEmojiPresentationSelector(cp, next)) {
+      processedCodePoints.push(VARIATION_SELECTOR_16);
     }
   }
   try {

package/dist/types/util/emojiIdToEmoji.d.ts

@@ -6,8 +6,8 @@
  * Special handling:
  * - Keycap sequences: U+20E3 (COMBINING ENCLOSING KEYCAP) must be preceded by
  *   U+FE0F (VARIATION SELECTOR-16) to form a well-defined keycap emoji.
- * - Text-default emoji (characters whose default presentation is text) must be
- *   followed by U+FE0F to force emoji presentation.
+ * - Emoji variation bases are followed by U+FE0F to force emoji presentation.
+ * - Flags return `undefined` so callers use Twemoji instead of native emoji.
  *
  * @returns The Unicode string for the emoji, or `undefined` if the input is
  *   invalid (empty string, non-hex segments, or out-of-range code points).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.4.3",
+	"version": "71.4.5",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/form": "^16.0.0",
 		"@atlaskit/heading": "^6.0.0",
 		"@atlaskit/icon": "^36.0.0",
-		"@atlaskit/icon-lab": "^7.0.0",
+		"@atlaskit/icon-lab": "^7.1.0",
 		"@atlaskit/image": "^4.0.0",
 		"@atlaskit/media-client": "^37.1.0",
 		"@atlaskit/media-client-react": "^6.0.0",
@@ -49,8 +49,8 @@
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
 		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^109.2.0",
-		"@atlaskit/tokens": "^14.0.0",
+		"@atlaskit/tmp-editor-statsig": "^110.1.0",
+		"@atlaskit/tokens": "^15.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.0.0",
@@ -61,7 +61,7 @@
 		"js-search": "^2.0.0",
 		"lru_map": "^0.4.1",
 		"react-focus-lock": "^2.9.5",
-		"react-intersection-observer": "^8.26.2",
+		"react-intersection-observer": "^9.16.0",
 		"react-loadable": "^5.1.0",
 		"use-debounce": "^3.4.0",
 		"uuid": "^3.1.0"