@atlaskit/emoji 71.3.3 → 71.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 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/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);
   }
 };

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/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,6 +13,7 @@ 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");
@@ -21,6 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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,
@@ -38,6 +40,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var preventFocusOnMouseDown = _featureGateJsClient.default.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -71,7 +74,8 @@ 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,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -105,7 +109,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.3.3"
     }, attributes)
   };
 };

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

@@ -39,6 +39,9 @@ const handleMouseDown = (props, event) => {
     onSelected
   } = props;
   if (onSelected && leftClick(event)) {
+    if (props.preventFocusOnMouseDown) {
+      event.preventDefault();
+    }
     onSelected(toEmojiId(emoji), emoji, event);
   }
 };

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/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,6 +5,7 @@ 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';
@@ -12,6 +13,7 @@ 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,
@@ -32,6 +34,7 @@ const EmojiPickerEmojiRow = ({
     formatMessage
   } = useIntl();
   const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  const preventFocusOnMouseDown = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   const handleFocus = index => (emojiId, emoji, event) => {
     setEmojisFocus({
       rowIndex,
@@ -65,7 +68,8 @@ const EmojiPickerEmojiRow = ({
         "data-focus-index": `${rowIndex}-${index}`,
         tabIndex: focus ? 0 : -1,
         "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
+        shouldBeInteractive: true,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -101,7 +105,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.3.3",
     ...attributes
   }
 });

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

@@ -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);
   }
 };

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/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,6 +5,7 @@ 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';
@@ -12,6 +13,7 @@ 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,
@@ -29,6 +31,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
+  var preventFocusOnMouseDown = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -62,7 +65,8 @@ 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,
+        preventFocusOnMouseDown: preventFocusOnMouseDown
       }));
     }));
   }
@@ -96,7 +100,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.3.3"
     }, attributes)
   };
 };

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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.3.3",
+	"version": "71.4.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@atlaskit/afm-i18n-platform-elements-emoji": "2.158.0",
+		"@atlaskit/afm-i18n-platform-elements-emoji": "2.160.0",
 		"@atlaskit/analytics-next": "^12.0.0",
 		"@atlaskit/browser-apis": "^1.0.0",
 		"@atlaskit/button": "^24.1.0",
@@ -48,6 +48,7 @@
 		"@atlaskit/radio": "^9.0.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
+		"@atlaskit/theme": "^26.0.0",
 		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
@@ -75,7 +76,6 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/theme": "^26.0.0",
 		"@atlassian/a11y-jest-testing": "^0.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@emotion/jest": "^11.8.0",