@atlaskit/emoji 71.3.3 → 71.4.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/emoji
 
+## 71.4.1
+
+### Patch Changes
+
+- [`9a7ca4cefe634`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9a7ca4cefe634) -
+  Use the platform_use_unicode_emojis experiment for native Unicode emoji rendering.
+- [`2a3076a890d07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a3076a890d07) -
+  Fix unicode emoji image rendering so generated unicode images do not fall back to alt image
+  representations at large sizes.
+- Updated dependencies
+
+## 71.4.0
+
+### Minor Changes
+
+- [`404be770a2ccf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/404be770a2ccf) -
+  Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
+  (Group 3)
+
+### Patch Changes
+
+- [`9e5de3ca1a915`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e5de3ca1a915) -
+  Increase z-index of the popup for color picker
+- [`2690a770de7bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2690a770de7bf) -
+  Do not focus the added emoji after uploading new emoji
+- Updated dependencies
+
 ## 71.3.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -76,6 +76,9 @@
 		{
 			"path": "../../../design-system/textfield/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/theme/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../editor/tmp-editor-statsig/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -76,6 +76,9 @@
 		{
 			"path": "../../../design-system/textfield/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/theme/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../editor/tmp-editor-statsig/afm-products/tsconfig.json"
 		},

package/dist/cjs/api/EmojiUtils.js

@@ -9,10 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _types = require("../types");
 var _typeHelpers = require("../util/type-helpers");
 var _logger = _interopRequireDefault(require("../util/logger"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _emojiIdToEmoji = require("../util/emojiIdToEmoji");
 var _excluded = ["getRatio"],
   _excluded2 = ["queryParams"],
@@ -119,7 +119,7 @@ var denormaliseServiceAltRepresentation = exports.denormaliseServiceAltRepresent
 };
 var denormaliseStandardRepresentation = function denormaliseStandardRepresentation(emoji, meta) {
   var unicodeEmoji = (0, _emojiIdToEmoji.emojiIdToEmoji)(emoji.id);
-  var useUnicodeRepresentation = !!(emoji.id && emoji.type === _types.ProviderTypes.STANDARD && unicodeEmoji && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis'));
+  var useUnicodeRepresentation = !!(emoji.id && emoji.type === _types.ProviderTypes.STANDARD && unicodeEmoji && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true));
   return useUnicodeRepresentation ? {
     unicodeEmoji: unicodeEmoji
   } : denormaliseServiceRepresentation(emoji.representation, meta);

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

@@ -54,6 +54,9 @@ var handleMouseDown = function handleMouseDown(props, event) {
   var emoji = props.emoji,
     onSelected = props.onSelected;
   if (onSelected && (0, _mouse.leftClick)(event)) {
+    if (props.preventFocusOnMouseDown) {
+      event.preventDefault();
+    }
     onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
@@ -266,6 +269,7 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   if (unicodeEmojiImage.status === 'ready') {
     return /*#__PURE__*/_react.default.createElement(ImageEmoji, (0, _extends2.default)({}, props, {
       emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        altRepresentation: undefined,
         representation: {
           imagePath: unicodeEmojiImage.imagePath,
           width: unicodeEmojiCanvasSize,
@@ -536,6 +540,9 @@ var Emoji = exports.Emoji = function Emoji(props) {
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
       ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
     }
+    if (emoji.type === _types.ProviderTypes.STANDARD || (0, _typeHelpers.isUnicodeRepresentation)(emoji.representation)) {
+      (0, _expValEquals.expValEquals)('platform_use_unicode_emojis', 'isEnabled', true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if ((0, _typeHelpers.isUnicodeRepresentation)(emoji.representation)) {

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

@@ -30,6 +30,7 @@ var _styles = require("./styles");
 var _constants = require("../../util/constants");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _constants2 = require("@atlaskit/theme/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   icon: "_18u0r5cr _2hwx1i6y"
@@ -70,9 +71,10 @@ var AddOwnEmoji = exports.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: (0, _runtime.ax)(["_p12f3sup", _styles.emojiPickerAddEmoji]),
       tabIndex: 0,
       id: "add-custom-emoji"
@@ -138,7 +140,9 @@ var TonesWrapper = function TonesWrapper(props) {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && _featureGateJsClient.default.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
+  _featureGateJsClient.default.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) {
@@ -151,7 +155,7 @@ var TonesWrapper = function TonesWrapper(props) {
       relativePosition: "below",
       horizontalAlign: "end-to-start",
       offsetY: 4,
-      zIndex: 510
+      zIndex: _constants2.layers.tooltip()
     }, /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
     }, /*#__PURE__*/React.createElement(_ProductivityColorSelector.default, {
@@ -219,7 +223,9 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     showToneSelector = _useState6[0],
     setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = (0, _react.useRef)(false);
-  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && _featureGateJsClient.default.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
+  _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   var onToneOpenHandler = (0, _react.useCallback)(function () {
     return setShowToneSelector(true);
   }, []);
@@ -257,6 +263,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     }
   }, [shouldUseProductivityColorControl, showToneSelector]);
   if (uploading) {
+    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
     return _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
@@ -276,6 +283,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     }));
   }
   if (emojiToDelete) {
+    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
     return _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
@@ -290,6 +298,8 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
   return _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,

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

@@ -10,8 +10,8 @@ exports.EmojiPreviewComponent = void 0;
 require("./EmojiPreviewComponent.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiName = null;
 var emojiShortName = null;
@@ -20,7 +20,7 @@ var previewImg = null;
 var previewText = null;
 var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   var emoji = _ref.emoji;
-  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
+  var fitToHeight = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? 32 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {

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

@@ -10,11 +10,11 @@ exports.default = exports.EmojiRadioButton = void 0;
 require("./EmojiRadioButton.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _constants = require("../../util/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiButton = null;
 var emojiRadio = {
@@ -42,7 +42,7 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
-  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
   return /*#__PURE__*/_react.default.createElement("label", {
     className: (0, _runtime.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.default.createElement(_visuallyHidden.default, null, ariaLabelText), /*#__PURE__*/_react.default.createElement("input", {

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

@@ -21,6 +21,7 @@ var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _emojiIdToEmoji = require("../../util/emojiIdToEmoji");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -94,7 +95,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
 
             // When id is absent/empty, fetchByEmojiId won't retry if the catalogue isn't loaded yet.
             // findByEmojiId has retryIfLoading built in — use it for shortName-only lookups.
-            foundEmoji = !emojiId.id && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
+            foundEmoji = !emojiId.id && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? _emojiProvider.findByEmojiId(emojiId) : _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
             (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
             if ((0, _typeHelpers.isPromise)(foundEmoji)) {
               setLoaded(false);
@@ -176,7 +177,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     });
   }, [emojiProvider]);
   var emojiRenderState = (0, _react.useMemo)(function () {
-    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
+    if (!emoji && !loaded && !optimisticImageURL || optimisticImageURL && !emoji && !id && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true)) {
       return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
     } else if (!emoji && loaded || imageLoadError) {
       return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
@@ -185,7 +186,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
   }, [emoji, loaded, optimisticImageURL, imageLoadError, id]);
   var optimisticEmojiDescription = (0, _react.useMemo)(function () {
     // For STANDARD emojis, use native unicode character instead of optimistic image.
-    if ((0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
+    if ((0, _expValEqualsNoExposure.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 = (0, _emojiIdToEmoji.emojiIdToEmoji)(resolvedId);

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

@@ -11,9 +11,9 @@ require("./TonePreviewButton.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var tonePreviewTestId = exports.tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
@@ -31,7 +31,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
-  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
   return _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,

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

@@ -494,7 +494,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/cjs/components/picker/EmojiPickerEmojiRow.js

@@ -13,14 +13,17 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _reactIntl = require("react-intl");
 var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _i18n = require("../i18n");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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,
@@ -37,7 +40,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var fitToHeight = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? 24 : undefined;
+  var preventFocusOnMouseDown = _featureGateJsClient.default.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -71,7 +75,9 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
         "data-focus-index": "".concat(rowIndex, "-").concat(index),
         tabIndex: focus ? 0 : -1,
         "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
+        shouldBeInteractive: true,
+        fitToHeight: fitToHeight,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -105,7 +111,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
       shouldBeInteractive: true,
-      fitToHeight: fitToHeight
+      fitToHeight: fitToHeight,
+      preventFocusOnMouseDown: preventFocusOnMouseDown
     }));
   }));
 };

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

@@ -395,21 +395,32 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         (0, _utils.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/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.3.2"
+      packageVersion: "71.4.0"
     }, attributes)
   };
 };

package/dist/cjs/util/emojiIdToEmoji.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiIdToEmoji = emojiIdToEmoji;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 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; }
@@ -82,7 +82,7 @@ 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 ((0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis')) {
+  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

package/dist/es2019/api/EmojiUtils.js

@@ -1,9 +1,9 @@
 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 const emojiRequest = (provider, options) => {
   const {
@@ -109,7 +109,7 @@ export const denormaliseServiceAltRepresentation = (altReps, meta) => {
 };
 const denormaliseStandardRepresentation = (emoji, meta) => {
   const unicodeEmoji = emojiIdToEmoji(emoji.id);
-  const useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
+  const useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true));
   return useUnicodeRepresentation ? {
     unicodeEmoji
   } : denormaliseServiceRepresentation(emoji.representation, meta);

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

@@ -8,7 +8,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';
@@ -39,6 +39,9 @@ const handleMouseDown = (props, event) => {
     onSelected
   } = props;
   if (onSelected && leftClick(event)) {
+    if (props.preventFocusOnMouseDown) {
+      event.preventDefault();
+    }
     onSelected(toEmojiId(emoji), emoji, event);
   }
 };
@@ -241,6 +244,7 @@ const UnicodeEmojiImage = props => {
     return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
       emoji: {
         ...emoji,
+        altRepresentation: undefined,
         representation: {
           imagePath: unicodeEmojiImage.imagePath,
           width: unicodeEmojiCanvasSize,
@@ -504,6 +508,9 @@ export const 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/es2019/components/common/EmojiActions.js

@@ -21,6 +21,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';
 const styles = {
   icon: "_18u0r5cr _2hwx1i6y"
 };
@@ -61,9 +62,10 @@ export const 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 @@ const TonesWrapper = props => {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  const 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) {
     const previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -142,7 +146,7 @@ const 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, {
@@ -208,7 +212,9 @@ export const EmojiActions = props => {
   } = props;
   const [showToneSelector, setShowToneSelector] = useState(false);
   const wasProductivityColorSelectorOpen = useRef(false);
-  const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  const 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));
   const onToneOpenHandler = useCallback(() => setShowToneSelector(true), []);
   const onToneCloseHandler = useCallback(() => setShowToneSelector(false), []);
   const onToneToggleHandler = useCallback(() => {
@@ -240,6 +246,7 @@ export const 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, {
@@ -259,6 +266,7 @@ export const 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, {
@@ -273,6 +281,8 @@ export const 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/es2019/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';
 const emojiName = null;
 const emojiShortName = null;
 const preview = null;
@@ -12,7 +12,7 @@ const previewText = null;
 export const EmojiPreviewComponent = ({
   emoji
 }) => {
-  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
+  const 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/es2019/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';
 const emojiButton = null;
 const emojiRadio = {
   default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
@@ -37,7 +37,7 @@ export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     ariaLabelText,
     defaultChecked
   } = props;
-  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  const 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", {