@atlaskit/emoji 70.3.4 → 70.4.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 70.4.1
+
+### Patch Changes
+
+- [`c4804f9e7bdaf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4804f9e7bdaf) -
+  Update add emoji icon to use add emoji icon
+- Updated dependencies
+
+## 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

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/common/EmojiActions.js

@@ -23,6 +23,7 @@ var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
+var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
 var _constants = require("../../util/constants");
@@ -44,15 +45,20 @@ var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiTestId,
     className: (0, _runtime.ax)(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _i18n.messages.addEmojiLabel : _i18n.messages.addCustomEmojiLabel, function (label) {
     return /*#__PURE__*/React.createElement(_standardButton.default, {
       onClick: onOpenUpload,
       iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
         xcss: styles.icon
-      }, /*#__PURE__*/React.createElement(_add.default, {
+      }, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(_emojiAdd.default, {
+        color: "currentColor",
+        label: formatMessage(_i18n.messages.addCustomEmojiLabel)
+      }) : /*#__PURE__*/React.createElement(_add.default, {
         color: "currentColor",
         label: ""
       })),

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

@@ -27,6 +27,7 @@ var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview"));
 var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 closeEmojiUploadButton = null;
 var emojiUpload = null;
@@ -87,7 +88,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
-  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _i18n.messages.addEmojiLabel : _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(_standardButton.default, {
     onClick: onUploadCancelled,

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntl = require("react-intl");
+var messages = exports.messages = (0, _reactIntl.defineMessages)({
+  addCustomEmojiLabel: {
+    id: 'addCustomEmojiLabel',
+    defaultMessage: 'Add custom emoji',
+    description: 'Accessible label for add custom emoji button'
+  }
+});

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;
 };
@@ -38,7 +44,7 @@ var addNewCategories = function addNewCategories(oldCategories, newCategories) {
     return oldCategories;
   }
   return oldCategories.concat(newCategories.filter(function (category) {
-    return !!_categories.CategoryDescriptionMap[category];
+    return !!((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _categories.CategoryDescriptionMapNew : _categories.CategoryDescriptionMap)[category];
   })).sort(sortCategories);
 };
 var categorySelectorComponentTestId = exports.categorySelectorComponentTestId = 'category-selector-component';
@@ -117,16 +123,46 @@ 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)(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
+      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,
+      ref: categoryRef,
+      className: (0, _runtime.ax)(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
+    }, categories.map(function (categoryId, index) {
+      var category = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _categories.CategoryDescriptionMapNew[categoryId] : _categories.CategoryDescriptionMap[categoryId];
+      var Icon = category.icon;
+      var categoryName = formatMessage(_i18n.messages[category.name]);
       return /*#__PURE__*/React.createElement(_tooltip.default, {
         content: categoryName,
         position: "bottom",
@@ -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/components/picker/EmojiPickerList.js

@@ -9,6 +9,7 @@ exports.RENDER_EMOJI_PICKER_LIST_TESTID = exports.EmojiPickerVirtualListInternal
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../util/constants");
 var _categories = require("./categories");
 var _CategoryTracker = _interopRequireDefault(require("./CategoryTracker"));
@@ -139,7 +140,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   }, [groupByCategory]);
   var addToCategoryMap = function addToCategoryMap(categoryToGroupMap, emoji, category) {
     if (!categoryToGroupMap[category]) {
-      var categoryDefinition = _categories.CategoryDescriptionMap[category];
+      var categoryDefinition = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _categories.CategoryDescriptionMapNew[category] : _categories.CategoryDescriptionMap[category];
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CategoryDescriptionMap = void 0;
+exports.CategoryDescriptionMapNew = exports.CategoryDescriptionMap = void 0;
 var _basketball = _interopRequireDefault(require("@atlaskit/icon/core/basketball"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
+var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
 var _flag = _interopRequireDefault(require("@atlaskit/icon/core/flag"));
 var _takeoutFood = _interopRequireDefault(require("@atlaskit/icon/core/takeout-food"));
 var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
@@ -97,4 +98,85 @@ var CategoryDescriptionMap = exports.CategoryDescriptionMap = {
     icon: _add.default,
     order: 12
   }
+};
+var CategoryDescriptionMapNew = exports.CategoryDescriptionMapNew = {
+  SEARCH: {
+    id: 'SEARCH',
+    name: 'categoriesSearchResults',
+    // refers to i18n categoriesSearchResults key
+    icon: undefined,
+    order: 0
+  },
+  FREQUENT: {
+    id: 'FREQUENT',
+    name: 'frequentCategory',
+    icon: _clock.default,
+    order: 1
+  },
+  PEOPLE: {
+    id: 'PEOPLE',
+    name: 'peopleCategory',
+    icon: _emoji.default,
+    order: 2
+  },
+  NATURE: {
+    id: 'NATURE',
+    name: 'natureCategory',
+    icon: _tree.default,
+    order: 3
+  },
+  FOODS: {
+    id: 'FOODS',
+    name: 'foodsCategory',
+    icon: _takeoutFood.default,
+    order: 4
+  },
+  ACTIVITY: {
+    id: 'ACTIVITY',
+    name: 'activityCategory',
+    icon: _basketball.default,
+    order: 5
+  },
+  PLACES: {
+    id: 'PLACES',
+    name: 'placesCategory',
+    icon: _vehicleCar.default,
+    order: 6
+  },
+  OBJECTS: {
+    id: 'OBJECTS',
+    name: 'objectsCategory',
+    icon: _lightbulb.default,
+    order: 7
+  },
+  SYMBOLS: {
+    id: 'SYMBOLS',
+    name: 'symbolsCategory',
+    icon: _heart.default,
+    order: 8
+  },
+  FLAGS: {
+    id: 'FLAGS',
+    name: 'flagsCategory',
+    icon: _flag.default,
+    order: 9
+  },
+  ATLASSIAN: {
+    id: 'ATLASSIAN',
+    name: 'productivityCategory',
+    icon: _checkCircle.default,
+    order: 10
+  },
+  USER_CUSTOM: {
+    id: _constants.customCategory,
+    name: _constants.userCustomTitle,
+    icon: _add.default,
+    order: 11
+  },
+  CUSTOM: {
+    id: _constants.customCategory,
+    name: _constants.customTitle,
+    icon: _emojiAdd.default,
+    order: 12
+  }
 };

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

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl, useIntl } from 'react-intl';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
@@ -14,6 +14,7 @@ import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/add';
+import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
@@ -36,14 +37,20 @@ const AddOwnEmoji = props => {
     onOpenUpload,
     uploadEnabled
   } = props;
+  const {
+    formatMessage
+  } = useIntl();
   return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiTestId,
     className: ax(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform_emoji_picker_refresh') ? messages.addEmojiLabel : messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
     onClick: onOpenUpload,
     iconBefore: /*#__PURE__*/React.createElement(Box, {
       xcss: styles.icon
-    }, /*#__PURE__*/React.createElement(AddIcon, {
+    }, fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(EmojiAddIcon, {
+      color: "currentColor",
+      label: formatMessage(messages.addCustomEmojiLabel)
+    }) : /*#__PURE__*/React.createElement(AddIcon, {
       color: "currentColor",
       label: ""
     })),

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

@@ -16,6 +16,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
+import { fg } from '@atlaskit/platform-feature-flags';
 const closeEmojiUploadButton = null;
 const emojiUpload = null;
 const emojiUploadTop = null;
@@ -78,7 +79,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform_emoji_picker_refresh') ? messages.addEmojiLabel : messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(AkButton, {
     onClick: onUploadCancelled,

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+export const messages = defineMessages({
+  addCustomEmojiLabel: {
+    id: 'addCustomEmojiLabel',
+    defaultMessage: 'Add custom emoji',
+    description: 'Accessible label for add custom emoji button'
+  }
+});

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,28 +4,34 @@ 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';
 import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
 import { messages } from '../i18n';
-import { CategoryDescriptionMap } from './categories';
+import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 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) {
     return oldCategories;
   }
-  return oldCategories.concat(newCategories.filter(category => !!CategoryDescriptionMap[category])).sort(sortCategories);
+  return oldCategories.concat(newCategories.filter(category => !!(fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew : CategoryDescriptionMap)[category])).sort(sortCategories);
 };
 export const categorySelectorComponentTestId = 'category-selector-component';
 export const categorySelectorCategoryTestId = categoryId => `category-selector-${categoryId}`;
@@ -96,16 +102,46 @@ 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(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
+      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,
+      ref: categoryRef,
+      className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
+    }, categories.map((categoryId, index) => {
+      const category = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew[categoryId] : CategoryDescriptionMap[categoryId];
+      const Icon = category.icon;
+      const categoryName = formatMessage(messages[category.name]);
       return /*#__PURE__*/React.createElement(Tooltip, {
         content: categoryName,
         position: "bottom",
@@ -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);