@atlaskit/emoji 71.3.3 → 71.4.1

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

@@ -9,6 +9,7 @@ import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -54,7 +55,7 @@ export const ResourcedEmojiComponent = ({
 
     // 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);
+    const foundEmoji = !emojiId.id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
     sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
     if (isPromise(foundEmoji)) {
       setLoaded(false);
@@ -127,7 +128,7 @@ export const ResourcedEmojiComponent = ({
     });
   }, [emojiProvider]);
   const emojiRenderState = useMemo(() => {
-    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && fg('platform_twemoji_removal_unicode_emojis')) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
@@ -136,7 +137,7 @@ export const ResourcedEmojiComponent = ({
   }, [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')) {
+    if (expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
       const resolvedId = id || (emoji === null || emoji === void 0 ? void 0 : emoji.id);
       if (!resolvedId) return undefined;
       const unicodeEmoji = emojiIdToEmoji(resolvedId);

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

@@ -3,9 +3,9 @@ import "./TonePreviewButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import Emoji from './Emoji';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export const tonePreviewTestId = 'tone-preview';
 const emojiButton = null;
 const hidden = null;
@@ -22,7 +22,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     onSelected,
     isVisible = true
   } = props;
-  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  const fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
   return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,

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

@@ -423,7 +423,7 @@ const EmojiPickerComponent = ({
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(() => {
         var _emojiPickerList$curr2;
-        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription, false);
       }, 0);
     }
   }, [emojiPickerList]);

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

@@ -5,13 +5,16 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useIntl } from 'react-intl';
 import CachingEmoji from '../common/CachingEmoji';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { messages } from '../i18n';
 const emojiItem = null;
 const emojiPickerRow = null;
 const emojiPickerRowList = null;
+const teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
 const EmojiPickerEmojiRow = ({
   emojis,
   onSelected,
@@ -31,7 +34,8 @@ const EmojiPickerEmojiRow = ({
   const {
     formatMessage
   } = useIntl();
-  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  const fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
+  const preventFocusOnMouseDown = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   const handleFocus = index => (emojiId, emoji, event) => {
     setEmojisFocus({
       rowIndex,
@@ -65,7 +69,9 @@ const EmojiPickerEmojiRow = ({
         "data-focus-index": `${rowIndex}-${index}`,
         tabIndex: focus ? 0 : -1,
         "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
+        shouldBeInteractive: true,
+        fitToHeight: fitToHeight,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -101,7 +107,8 @@ const EmojiPickerEmojiRow = ({
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
       shouldBeInteractive: true,
-      fitToHeight: fitToHeight
+      fitToHeight: fitToHeight,
+      preventFocusOnMouseDown: preventFocusOnMouseDown
     }));
   }));
 };

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

@@ -354,7 +354,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       scrollToRow(index) {
         scrollToRow(listRef, index);
       },
-      scrollToRecentlyUploaded(uploadedEmoji) {
+      scrollToRecentlyUploaded(uploadedEmoji, shouldFocus = true) {
         // when search results is shown
         if (query) {
           const {
@@ -362,15 +362,25 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
             columnIndex
           } = findEmojiRowAndColumnById(uploadedEmoji.id);
           if (rowIndex !== -1) {
-            var _listRef$current;
-            (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollToEmojiAndFocus(rowIndex, columnIndex);
+            if (shouldFocus) {
+              var _listRef$current;
+              (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollToEmojiAndFocus(rowIndex, columnIndex);
+            } else {
+              var _listRef$current2;
+              (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToRow(rowIndex);
+            }
           }
         } else {
           // when seeing all emojis
           const row = lastYourUploadsRow;
           if (row > 0) {
-            var _listRef$current2;
-            (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToRowAndFocusLastEmoji(lastYourUploadsRow);
+            if (shouldFocus) {
+              var _listRef$current3;
+              (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.scrollToRowAndFocusLastEmoji(lastYourUploadsRow);
+            } else {
+              var _listRef$current4;
+              (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 ? void 0 : _listRef$current4.scrollToRow(lastYourUploadsRow);
+            }
           }
         }
       }

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

package/dist/es2019/util/emojiIdToEmoji.js

@@ -1,4 +1,4 @@
-import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 const KEYCAP_COMBINING = 0x20e3;
 const VARIATION_SELECTOR_16 = 0xfe0f;
 const VARIATION_SELECTOR_15 = 0xfe0e;
@@ -64,7 +64,7 @@ export function emojiIdToEmoji(id) {
   // 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')) {
+  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

package/dist/esm/api/EmojiUtils.js

@@ -8,10 +8,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { utils as serviceUtils } from '@atlaskit/util-service-support';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { ProviderTypes } from '../types';
 import { isImageRepresentation, isSpriteServiceRepresentation, convertImageToMediaRepresentation, buildEmojiDescriptionWithAltRepresentation } from '../util/type-helpers';
 import debug from '../util/logger';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { emojiIdToEmoji } from '../util/emojiIdToEmoji';
 export var emojiRequest = function emojiRequest(provider, options) {
   var _provider$getRatio = provider.getRatio,
@@ -112,7 +112,7 @@ export var denormaliseServiceAltRepresentation = function denormaliseServiceAltR
 };
 var denormaliseStandardRepresentation = function denormaliseStandardRepresentation(emoji, meta) {
   var unicodeEmoji = emojiIdToEmoji(emoji.id);
-  var useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
+  var useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true));
   return useUnicodeRepresentation ? {
     unicodeEmoji: unicodeEmoji
   } : denormaliseServiceRepresentation(emoji.representation, meta);

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

@@ -16,7 +16,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { defaultEmojiHeight, deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, isUnicodeRepresentation, toEmojiId } from '../../util/type-helpers';
-import { UfoEmojiTimings } from '../../types';
+import { ProviderTypes, UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
 import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImage, deletableEmoji } from './styles';
@@ -45,6 +45,9 @@ var handleMouseDown = function handleMouseDown(props, event) {
   var emoji = props.emoji,
     onSelected = props.onSelected;
   if (onSelected && leftClick(event)) {
+    if (props.preventFocusOnMouseDown) {
+      event.preventDefault();
+    }
     onSelected(toEmojiId(emoji), emoji, event);
   }
 };
@@ -257,6 +260,7 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   if (unicodeEmojiImage.status === 'ready') {
     return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
       emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        altRepresentation: undefined,
         representation: {
           imagePath: unicodeEmojiImage.imagePath,
           width: unicodeEmojiCanvasSize,
@@ -527,6 +531,9 @@ export var Emoji = function Emoji(props) {
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.MOUNTED_END)) {
       ufoExp.mark(UfoEmojiTimings.MOUNTED_END);
     }
+    if (emoji.type === ProviderTypes.STANDARD || isUnicodeRepresentation(emoji.representation)) {
+      expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (isUnicodeRepresentation(emoji.representation)) {

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

@@ -22,6 +22,7 @@ import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { Box } from '@atlaskit/primitives/compiled';
+import { layers } from '@atlaskit/theme/constants';
 var styles = {
   icon: "_18u0r5cr _2hwx1i6y"
 };
@@ -61,9 +62,10 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
       })),
       appearance: "subtle"
       // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
       ,
 
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
       className: ax(["_p12f3sup", emojiPickerAddEmoji]),
       tabIndex: 0,
       id: "add-custom-emoji"
@@ -129,7 +131,9 @@ var TonesWrapper = function TonesWrapper(props) {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected &&
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   if (shouldShowProductivityColorSelector) {
     var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -142,7 +146,7 @@ var TonesWrapper = function TonesWrapper(props) {
       relativePosition: "below",
       horizontalAlign: "end-to-start",
       offsetY: 4,
-      zIndex: 510
+      zIndex: layers.tooltip()
     }, /*#__PURE__*/React.createElement("div", {
       className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
     }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
@@ -210,7 +214,9 @@ export var EmojiActions = function EmojiActions(props) {
     showToneSelector = _useState6[0],
     setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = useRef(false);
-  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected &&
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   var onToneOpenHandler = useCallback(function () {
     return setShowToneSelector(true);
   }, []);
@@ -248,6 +254,7 @@ export var EmojiActions = function EmojiActions(props) {
     }
   }, [shouldUseProductivityColorControl, showToneSelector]);
   if (uploading) {
+    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
     return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
@@ -267,6 +274,7 @@ export var EmojiActions = function EmojiActions(props) {
     }));
   }
   if (emojiToDelete) {
+    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
     return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
@@ -281,6 +289,8 @@ export var EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
   return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,

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

@@ -2,8 +2,8 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import CachingEmoji from './CachingEmoji';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var emojiName = null;
 var emojiShortName = null;
 var preview = null;
@@ -11,7 +11,7 @@ var previewImg = null;
 var previewText = null;
 export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   var emoji = _ref.emoji;
-  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
+  var fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 32 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {

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

@@ -2,11 +2,11 @@
 import "./EmojiRadioButton.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, forwardRef } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import Emoji from './Emoji';
 import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var emojiButton = null;
 var emojiRadio = {
   default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
@@ -33,7 +33,7 @@ export var EmojiRadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
-  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
   return /*#__PURE__*/React.createElement("label", {
     className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg"])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, ariaLabelText), /*#__PURE__*/React.createElement("input", {

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

@@ -15,6 +15,7 @@ import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -85,7 +86,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
 
             // 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);
+            foundEmoji = !emojiId.id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
             sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
             if (isPromise(foundEmoji)) {
               setLoaded(false);
@@ -167,7 +168,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     });
   }, [emojiProvider]);
   var emojiRenderState = useMemo(function () {
-    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && fg('platform_twemoji_removal_unicode_emojis')) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
@@ -176,7 +177,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
   }, [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')) {
+    if (expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true)) {
       var resolvedId = id || (emoji === null || emoji === void 0 ? void 0 : emoji.id);
       if (!resolvedId) return undefined;
       var unicodeEmoji = emojiIdToEmoji(resolvedId);

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

@@ -3,9 +3,9 @@ import "./TonePreviewButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import Emoji from './Emoji';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export var tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
 var hidden = null;
@@ -22,7 +22,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
-  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
   return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,

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

@@ -485,7 +485,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(function () {
         var _emojiPickerList$curr2;
-        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 || _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 || _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription, false);
       }, 0);
     }
   }, [emojiPickerList]);

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

@@ -5,13 +5,16 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useIntl } from 'react-intl';
 import CachingEmoji from '../common/CachingEmoji';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { messages } from '../i18n';
 var emojiItem = null;
 var emojiPickerRow = null;
 var emojiPickerRowList = null;
+var teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
 var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
@@ -28,7 +31,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
+  var preventFocusOnMouseDown = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -62,7 +66,9 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
         "data-focus-index": "".concat(rowIndex, "-").concat(index),
         tabIndex: focus ? 0 : -1,
         "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
+        shouldBeInteractive: true,
+        fitToHeight: fitToHeight,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -96,7 +102,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
       shouldBeInteractive: true,
-      fitToHeight: fitToHeight
+      fitToHeight: fitToHeight,
+      preventFocusOnMouseDown: preventFocusOnMouseDown
     }));
   }));
 };

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

@@ -387,21 +387,32 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
         _scrollToRow(listRef, index);
       },
       scrollToRecentlyUploaded: function scrollToRecentlyUploaded(uploadedEmoji) {
+        var shouldFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         // when search results is shown
         if (query) {
           var _findEmojiRowAndColum = findEmojiRowAndColumnById(uploadedEmoji.id),
             rowIndex = _findEmojiRowAndColum.rowIndex,
             columnIndex = _findEmojiRowAndColum.columnIndex;
           if (rowIndex !== -1) {
-            var _listRef$current;
-            (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToEmojiAndFocus(rowIndex, columnIndex);
+            if (shouldFocus) {
+              var _listRef$current;
+              (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToEmojiAndFocus(rowIndex, columnIndex);
+            } else {
+              var _listRef$current2;
+              (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToRow(rowIndex);
+            }
           }
         } else {
           // when seeing all emojis
           var row = lastYourUploadsRow;
           if (row > 0) {
-            var _listRef$current2;
-            (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToRowAndFocusLastEmoji(lastYourUploadsRow);
+            if (shouldFocus) {
+              var _listRef$current3;
+              (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.scrollToRowAndFocusLastEmoji(lastYourUploadsRow);
+            } else {
+              var _listRef$current4;
+              (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || _listRef$current4.scrollToRow(lastYourUploadsRow);
+            }
           }
         }
       }

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

package/dist/esm/util/emojiIdToEmoji.js

@@ -1,7 +1,7 @@
 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';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var KEYCAP_COMBINING = 0x20e3;
 var VARIATION_SELECTOR_16 = 0xfe0f;
 var VARIATION_SELECTOR_15 = 0xfe0e;
@@ -76,7 +76,7 @@ export function emojiIdToEmoji(id) {
   // 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')) {
+  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

package/dist/types/components/common/Emoji.d.ts

@@ -59,6 +59,11 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
      * Called when an emoji is selected
      */
     onSelected?: OnEmojiEvent;
+    /**
+     * Prevent mouse selection from moving browser focus to the emoji.
+     * Keyboard selection still keeps focus on the emoji for grid navigation.
+     */
+    preventFocusOnMouseDown?: boolean;
     /**
      * Renders unicode emoji through an image representation when a fixed height is supplied.
      * Defaults to `true`.

package/dist/types/components/common/EmojiActions.d.ts

@@ -10,22 +10,22 @@ import { type OnDeleteEmoji } from './EmojiDeletePreview';
 import { type OnUploadEmoji } from './EmojiUploadPicker';
 import type { ProductivityColor } from '../../util/productivity-colors';
 export interface Props {
+    activeCategoryId?: CategoryId | null;
     emojiToDelete?: EmojiDescription;
     initialUploadName?: string;
     onChange: (value: string) => void;
     onCloseDelete: () => void;
-    onProductivityColorSelected?: (color: ProductivityColor) => void;
     onDeleteEmoji: OnDeleteEmoji;
     onFileChooserClicked?: () => void;
     onOpenUpload: () => void;
+    onProductivityColorSelected?: (color: ProductivityColor) => void;
     onToneSelected?: OnToneSelected;
     onToneSelectorCancelled?: OnToneSelectorCancelled;
     onUploadCancelled: () => void;
     onUploadEmoji: OnUploadEmoji;
+    productivityColorPreviewEmojis?: Partial<Record<ProductivityColor, EmojiDescription>>;
     query?: string;
     resultsCount?: number;
-    activeCategoryId?: CategoryId | null;
-    productivityColorPreviewEmojis?: Partial<Record<ProductivityColor, EmojiDescription>>;
     selectedProductivityColor?: ProductivityColor;
     selectedTone?: ToneSelection;
     toneEmoji?: EmojiDescriptionWithVariations;

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -47,7 +47,7 @@ export interface State {
 export type PickerListRef = {
     reveal: (category: CategoryId, preferYourUploads?: boolean) => void;
     scrollToBottom: () => void;
-    scrollToRecentlyUploaded: (uploadedEmoji: EmojiDescription) => void;
+    scrollToRecentlyUploaded: (uploadedEmoji: EmojiDescription, shouldFocus?: boolean) => void;
     scrollToRow: (index?: number) => void;
     scrollToTop: () => void;
 };