@atlaskit/emoji 70.3.3 → 70.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.4.0
+
+### Minor Changes
+
+- [`f715c95dbc725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f715c95dbc725) -
+  Update the emoji category picker for new styling
+
+## 70.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 70.3.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__emoji",
 		"rootDir": "../",
 		"composite": true,

package/afm-products/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__emoji/app",
 		"rootDir": "../",
 		"composite": true,

package/dist/cjs/components/picker/CategorySelector.compiled.css

@@ -2,23 +2,39 @@
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._v564h5h4{transition:color .2s ease}
 ._189eidpf{border-width:0}._16jlidpf{flex-grow:0}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1b1v{justify-content:space-around}
+._1bah1h6o{justify-content:center}
+._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
+._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
 ._1e0c1txw{display:flex}
+._1il9nqa1{border-bottom-style:solid}
+._1o3i1j28{border-bottom-color:transparent}
+._1o3i1l7x{border-bottom-color:var(--ds-border,#0b120e24)}
+._1o3ia755{border-bottom-color:var(--ds-border-brand,#1868db)}
 ._1o9zidpf{flex-shrink:0}
 ._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._dpd31txw button{display:flex}
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._1jc41ihb:hover{border-bottom-color:var(--ds-border-bold,#7d818a)}
+._1jc4a755:hover{border-bottom-color:var(--ds-border-brand,#1868db)}
+._30l31rpy:hover{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactIntl = require("react-intl");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -24,12 +25,17 @@ var _EmojiPickerList = require("./EmojiPickerList");
 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 = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qpxbi _n3tdpxbi _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
   defaultCategory: "_syaz1rpy _30l36x5g",
+  defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
   activeCategory: "_syaz6x5g _30l36x5g",
+  activeCategoryNew: "_syaz6x5g _1doc1dm9 _1il9nqa1 _1o3ia755 _30l36x5g _1jc4a755",
   disabledCategory: "_syaz1rpy"
 };
 var categorySelector = null;
+var categorySelectorNew = null;
 var categorySelectorTablist = null;
+var categorySelectorTablistNew = null;
 var sortCategories = exports.sortCategories = function sortCategories(c1, c2) {
   return _categories.CategoryDescriptionMap[c1].order - _categories.CategoryDescriptionMap[c2].order;
 };
@@ -117,7 +123,37 @@ var CategorySelector = function CategorySelector(props) {
   };
   var categoriesSection;
   if (categories) {
-    categoriesSection = /*#__PURE__*/React.createElement("div", {
+    categoriesSection = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      role: "tablist",
+      "aria-label": formatMessage(_i18n.messages.categoriesSelectorLabel),
+      "data-testid": categorySelectorComponentTestId,
+      ref: categoryRef,
+      className: (0, _runtime.ax)(["_ca0qze3t _n3tdze3t _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1fhb"])
+    }, categories.map(function (categoryId, index) {
+      var category = _categories.CategoryDescriptionMap[categoryId];
+      var Icon = category.icon;
+      var categoryName = formatMessage(_i18n.messages[category.name]);
+      return /*#__PURE__*/React.createElement(_tooltip.default, {
+        content: categoryName,
+        position: "bottom",
+        key: category.id
+      }, /*#__PURE__*/React.createElement(_compiled.Pressable, {
+        id: "category-selector-".concat(category.id),
+        "data-focus-index": index,
+        "aria-label": categoryName,
+        "aria-controls": currentFocus === index ? _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
+        "aria-selected": categoryId === activeCategoryId,
+        xcss: (0, _css.cx)(styles.commonCategoryNew, styles.defaultCategoryNew, categoryId === activeCategoryId && styles.activeCategoryNew, disableCategories && styles.disabledCategory),
+        isDisabled: disableCategories,
+        onClick: handleClick(categoryId, index),
+        testId: categorySelectorCategoryTestId(categoryId),
+        tabIndex: currentFocus === index ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        role: "tab"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        label: categoryName
+      })));
+    })) : /*#__PURE__*/React.createElement("div", {
       role: "tablist",
       "aria-label": formatMessage(_i18n.messages.categoriesSelectorLabel),
       "data-testid": categorySelectorComponentTestId,
@@ -149,7 +185,9 @@ var CategorySelector = function CategorySelector(props) {
       })));
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkvuon _ca0qze3t _n3tdze3t _1doce4h9 _1il9nqa1 _1o3i1l7x _dpd31txw"])
+  }, categoriesSection) : /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };

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

@@ -128,6 +128,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var openTime = (0, _react.useRef)(0);
   var isMounting = (0, _react.useRef)(true);
   var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
+  var isProgrammaticScroll = (0, _react.useRef)(false);
   var currentUser = (0, _react.useMemo)(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -143,6 +144,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
   }, [selectedEmoji]);
   var onCategoryActivated = (0, _react.useCallback)(function (category) {
+    // Ignore scroll-driven category changes while a programmatic reveal()
+    // scroll is in progress — they would flicker the indicator through
+    // intermediate categories before landing on the correct one.
+    if (isProgrammaticScroll.current && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
@@ -304,7 +311,16 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           });
         }
         if (emojiPickerList.current) {
+          if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+            isProgrammaticScroll.current = true;
+          }
           emojiPickerList.current.reveal(categoryId);
+          if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+            // Clear the flag after the scroll animation has settled.
+            setTimeout(function () {
+              isProgrammaticScroll.current = false;
+            }, 300);
+          }
         }
         (0, _reactDom.unstable_batchedUpdates)(function () {
           setActiveCategory(categoryId);

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: "0.0.0-development"
+      packageVersion: "70.3.4"
     }, attributes)
   };
 };

package/dist/es2019/components/picker/CategorySelector.compiled.css

@@ -2,23 +2,39 @@
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._v564h5h4{transition:color .2s ease}
 ._189eidpf{border-width:0}._16jlidpf{flex-grow:0}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1b1v{justify-content:space-around}
+._1bah1h6o{justify-content:center}
+._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
+._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
 ._1e0c1txw{display:flex}
+._1il9nqa1{border-bottom-style:solid}
+._1o3i1j28{border-bottom-color:transparent}
+._1o3i1l7x{border-bottom-color:var(--ds-border,#0b120e24)}
+._1o3ia755{border-bottom-color:var(--ds-border-brand,#1868db)}
 ._1o9zidpf{flex-shrink:0}
 ._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._dpd31txw button{display:flex}
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._1jc41ihb:hover{border-bottom-color:var(--ds-border-bold,#7d818a)}
+._1jc4a755:hover{border-bottom-color:var(--ds-border-brand,#1868db)}
+._30l31rpy:hover{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
@@ -14,12 +15,17 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 const styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qpxbi _n3tdpxbi _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
   defaultCategory: "_syaz1rpy _30l36x5g",
+  defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
   activeCategory: "_syaz6x5g _30l36x5g",
+  activeCategoryNew: "_syaz6x5g _1doc1dm9 _1il9nqa1 _1o3ia755 _30l36x5g _1jc4a755",
   disabledCategory: "_syaz1rpy"
 };
 const categorySelector = null;
+const categorySelectorNew = null;
 const categorySelectorTablist = null;
+const categorySelectorTablistNew = null;
 export const sortCategories = (c1, c2) => CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 const addNewCategories = (oldCategories, newCategories) => {
   if (!newCategories) {
@@ -96,7 +102,37 @@ const CategorySelector = props => {
   };
   let categoriesSection;
   if (categories) {
-    categoriesSection = /*#__PURE__*/React.createElement("div", {
+    categoriesSection = fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      role: "tablist",
+      "aria-label": formatMessage(messages.categoriesSelectorLabel),
+      "data-testid": categorySelectorComponentTestId,
+      ref: categoryRef,
+      className: ax(["_ca0qze3t _n3tdze3t _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1fhb"])
+    }, categories.map((categoryId, index) => {
+      const category = CategoryDescriptionMap[categoryId];
+      const Icon = category.icon;
+      const categoryName = formatMessage(messages[category.name]);
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: categoryName,
+        position: "bottom",
+        key: category.id
+      }, /*#__PURE__*/React.createElement(Pressable, {
+        id: `category-selector-${category.id}`,
+        "data-focus-index": index,
+        "aria-label": categoryName,
+        "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
+        "aria-selected": categoryId === activeCategoryId,
+        xcss: cx(styles.commonCategoryNew, styles.defaultCategoryNew, categoryId === activeCategoryId && styles.activeCategoryNew, disableCategories && styles.disabledCategory),
+        isDisabled: disableCategories,
+        onClick: handleClick(categoryId, index),
+        testId: categorySelectorCategoryTestId(categoryId),
+        tabIndex: currentFocus === index ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        role: "tab"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        label: categoryName
+      })));
+    })) : /*#__PURE__*/React.createElement("div", {
       role: "tablist",
       "aria-label": formatMessage(messages.categoriesSelectorLabel),
       "data-testid": categorySelectorComponentTestId,
@@ -128,7 +164,9 @@ const CategorySelector = props => {
       })));
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkvuon _ca0qze3t _n3tdze3t _1doce4h9 _1il9nqa1 _1o3i1l7x _dpd31txw"])
+  }, categoriesSection) : /*#__PURE__*/React.createElement("div", {
     className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };

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

@@ -72,6 +72,7 @@ const EmojiPickerComponent = ({
   const openTime = useRef(0);
   const isMounting = useRef(true);
   const previousEmojiProvider = useRef(emojiProvider);
+  const isProgrammaticScroll = useRef(false);
   const currentUser = useMemo(() => {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -87,6 +88,12 @@ const EmojiPickerComponent = ({
     }
   }, [selectedEmoji]);
   const onCategoryActivated = useCallback(category => {
+    // Ignore scroll-driven category changes while a programmatic reveal()
+    // scroll is in progress — they would flicker the indicator through
+    // intermediate categories before landing on the correct one.
+    if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
@@ -250,7 +257,16 @@ const EmojiPickerComponent = ({
           });
         }
         if (emojiPickerList.current) {
+          if (fg('platform_emoji_picker_refresh')) {
+            isProgrammaticScroll.current = true;
+          }
           emojiPickerList.current.reveal(categoryId);
+          if (fg('platform_emoji_picker_refresh')) {
+            // Clear the flag after the scroll animation has settled.
+            setTimeout(() => {
+              isProgrammaticScroll.current = false;
+            }, 300);
+          }
         }
         batchedUpdates(() => {
           setActiveCategory(categoryId);

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

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

package/dist/esm/components/picker/CategorySelector.compiled.css

@@ -2,23 +2,39 @@
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._v564h5h4{transition:color .2s ease}
 ._189eidpf{border-width:0}._16jlidpf{flex-grow:0}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1b1v{justify-content:space-around}
+._1bah1h6o{justify-content:center}
+._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
+._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
 ._1e0c1txw{display:flex}
+._1il9nqa1{border-bottom-style:solid}
+._1o3i1j28{border-bottom-color:transparent}
+._1o3i1l7x{border-bottom-color:var(--ds-border,#0b120e24)}
+._1o3ia755{border-bottom-color:var(--ds-border-brand,#1868db)}
 ._1o9zidpf{flex-shrink:0}
 ._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._dpd31txw button{display:flex}
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._1jc41ihb:hover{border-bottom-color:var(--ds-border-bold,#7d818a)}
+._1jc4a755:hover{border-bottom-color:var(--ds-border-brand,#1868db)}
+._30l31rpy:hover{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
@@ -15,12 +16,17 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 var styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qpxbi _n3tdpxbi _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
   defaultCategory: "_syaz1rpy _30l36x5g",
+  defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
   activeCategory: "_syaz6x5g _30l36x5g",
+  activeCategoryNew: "_syaz6x5g _1doc1dm9 _1il9nqa1 _1o3ia755 _30l36x5g _1jc4a755",
   disabledCategory: "_syaz1rpy"
 };
 var categorySelector = null;
+var categorySelectorNew = null;
 var categorySelectorTablist = null;
+var categorySelectorTablistNew = null;
 export var sortCategories = function sortCategories(c1, c2) {
   return CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 };
@@ -108,7 +114,37 @@ var CategorySelector = function CategorySelector(props) {
   };
   var categoriesSection;
   if (categories) {
-    categoriesSection = /*#__PURE__*/React.createElement("div", {
+    categoriesSection = fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      role: "tablist",
+      "aria-label": formatMessage(messages.categoriesSelectorLabel),
+      "data-testid": categorySelectorComponentTestId,
+      ref: categoryRef,
+      className: ax(["_ca0qze3t _n3tdze3t _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1fhb"])
+    }, categories.map(function (categoryId, index) {
+      var category = CategoryDescriptionMap[categoryId];
+      var Icon = category.icon;
+      var categoryName = formatMessage(messages[category.name]);
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: categoryName,
+        position: "bottom",
+        key: category.id
+      }, /*#__PURE__*/React.createElement(Pressable, {
+        id: "category-selector-".concat(category.id),
+        "data-focus-index": index,
+        "aria-label": categoryName,
+        "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
+        "aria-selected": categoryId === activeCategoryId,
+        xcss: cx(styles.commonCategoryNew, styles.defaultCategoryNew, categoryId === activeCategoryId && styles.activeCategoryNew, disableCategories && styles.disabledCategory),
+        isDisabled: disableCategories,
+        onClick: handleClick(categoryId, index),
+        testId: categorySelectorCategoryTestId(categoryId),
+        tabIndex: currentFocus === index ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        role: "tab"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        label: categoryName
+      })));
+    })) : /*#__PURE__*/React.createElement("div", {
       role: "tablist",
       "aria-label": formatMessage(messages.categoriesSelectorLabel),
       "data-testid": categorySelectorComponentTestId,
@@ -140,7 +176,9 @@ var CategorySelector = function CategorySelector(props) {
       })));
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkvuon _ca0qze3t _n3tdze3t _1doce4h9 _1il9nqa1 _1o3i1l7x _dpd31txw"])
+  }, categoriesSection) : /*#__PURE__*/React.createElement("div", {
     className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };

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

@@ -119,6 +119,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var openTime = useRef(0);
   var isMounting = useRef(true);
   var previousEmojiProvider = useRef(emojiProvider);
+  var isProgrammaticScroll = useRef(false);
   var currentUser = useMemo(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -134,6 +135,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
   }, [selectedEmoji]);
   var onCategoryActivated = useCallback(function (category) {
+    // Ignore scroll-driven category changes while a programmatic reveal()
+    // scroll is in progress — they would flicker the indicator through
+    // intermediate categories before landing on the correct one.
+    if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
@@ -295,7 +302,16 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           });
         }
         if (emojiPickerList.current) {
+          if (fg('platform_emoji_picker_refresh')) {
+            isProgrammaticScroll.current = true;
+          }
           emojiPickerList.current.reveal(categoryId);
+          if (fg('platform_emoji_picker_refresh')) {
+            // Clear the flag after the scroll animation has settled.
+            setTimeout(function () {
+              isProgrammaticScroll.current = false;
+            }, 300);
+          }
         }
         batchedUpdates(function () {
           setActiveCategory(categoryId);

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: "0.0.0-development"
+      packageVersion: "70.3.4"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.3.3",
+	"version": "70.4.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,14 +42,14 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.4.0",
 		"@atlaskit/media-client": "^36.1.0",
 		"@atlaskit/media-client-react": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^76.0.0",
+		"@atlaskit/tmp-editor-statsig": "^77.1.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.0.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -139,6 +139,9 @@
 		},
 		"increase-emoji-client-upload-timeout": {
 			"type": "boolean"
+		},
+		"platform_emoji_picker_refresh": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {

package/afm-jira/tsconfig.json

@@ -1,78 +0,0 @@
-{
-	"extends": "../../../../tsconfig.local-consumption.json",
-	"compilerOptions": {
-		"target": "es5",
-		"outDir": "../../../../../jira/tsDist/@atlaskit__emoji/app",
-		"rootDir": "../",
-		"composite": true,
-		"noCheck": true
-	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
-	"exclude": [
-		"../src/**/__tests__/*",
-		"../src/**/*.test.*",
-		"../src/**/test.*",
-		"../src/**/examples.*",
-		"../src/**/examples/*",
-		"../src/**/examples/**/*",
-		"../src/**/*.stories.*",
-		"../src/**/stories/*",
-		"../src/**/stories/**/*"
-	],
-	"references": [
-		{
-			"path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/button/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/css/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/heading/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../media/media-client/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../media/media-client-react/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/textfield/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../editor/tmp-editor-statsig/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../data/ufo-external/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../util-service-support/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/visually-hidden/afm-jira/tsconfig.json"
-		}
-	]
-}