@atlaskit/emoji 70.4.0 → 70.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/emoji
 
+## 70.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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.js

@@ -44,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';
@@ -160,7 +160,7 @@ var CategorySelector = function CategorySelector(props) {
       ref: categoryRef,
       className: (0, _runtime.ax)(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
     }, categories.map(function (categoryId, index) {
-      var category = _categories.CategoryDescriptionMap[categoryId];
+      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, {

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.4"
+      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.js

@@ -10,7 +10,7 @@ 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 = {
@@ -31,7 +31,7 @@ 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}`;
@@ -139,7 +139,7 @@ const CategorySelector = props => {
       ref: categoryRef,
       className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
     }, categories.map((categoryId, index) => {
-      const category = CategoryDescriptionMap[categoryId];
+      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, {

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
-import { CategoryDescriptionMap } from './categories';
+import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
@@ -107,7 +108,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   }, [groupByCategory]);
   const addToCategoryMap = (categoryToGroupMap, emoji, category) => {
     if (!categoryToGroupMap[category]) {
-      const categoryDefinition = CategoryDescriptionMap[category];
+      const categoryDefinition = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,

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

@@ -1,5 +1,6 @@
 import BasketballIcon from '@atlaskit/icon/core/basketball';
 import AddIcon from '@atlaskit/icon/core/add';
+import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import FlagIcon from '@atlaskit/icon/core/flag';
 import TakeoutFoodIcon from '@atlaskit/icon/core/takeout-food';
 import ClockIcon from '@atlaskit/icon/core/clock';
@@ -90,4 +91,85 @@ export const CategoryDescriptionMap = {
     icon: AddIcon,
     order: 12
   }
+};
+export const CategoryDescriptionMapNew = {
+  SEARCH: {
+    id: 'SEARCH',
+    name: 'categoriesSearchResults',
+    // refers to i18n categoriesSearchResults key
+    icon: undefined,
+    order: 0
+  },
+  FREQUENT: {
+    id: 'FREQUENT',
+    name: 'frequentCategory',
+    icon: ClockIcon,
+    order: 1
+  },
+  PEOPLE: {
+    id: 'PEOPLE',
+    name: 'peopleCategory',
+    icon: EmojiIcon,
+    order: 2
+  },
+  NATURE: {
+    id: 'NATURE',
+    name: 'natureCategory',
+    icon: TreeIcon,
+    order: 3
+  },
+  FOODS: {
+    id: 'FOODS',
+    name: 'foodsCategory',
+    icon: TakeoutFoodIcon,
+    order: 4
+  },
+  ACTIVITY: {
+    id: 'ACTIVITY',
+    name: 'activityCategory',
+    icon: BasketballIcon,
+    order: 5
+  },
+  PLACES: {
+    id: 'PLACES',
+    name: 'placesCategory',
+    icon: VehicleCarIcon,
+    order: 6
+  },
+  OBJECTS: {
+    id: 'OBJECTS',
+    name: 'objectsCategory',
+    icon: LightbulbIcon,
+    order: 7
+  },
+  SYMBOLS: {
+    id: 'SYMBOLS',
+    name: 'symbolsCategory',
+    icon: HeartIcon,
+    order: 8
+  },
+  FLAGS: {
+    id: 'FLAGS',
+    name: 'flagsCategory',
+    icon: FlagIcon,
+    order: 9
+  },
+  ATLASSIAN: {
+    id: 'ATLASSIAN',
+    name: 'productivityCategory',
+    icon: CheckCircleIcon,
+    order: 10
+  },
+  USER_CUSTOM: {
+    id: customCategory,
+    name: userCustomTitle,
+    icon: AddIcon,
+    order: 11
+  },
+  CUSTOM: {
+    id: customCategory,
+    name: customTitle,
+    icon: EmojiAddIcon,
+    order: 12
+  }
 };

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

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

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

@@ -6,7 +6,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';
@@ -15,6 +15,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';
@@ -35,15 +36,20 @@ export var uploadEmojiTestId = 'upload-emoji';
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   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, function (label) {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform_emoji_picker_refresh') ? messages.addEmojiLabel : messages.addCustomEmojiLabel, function (label) {
     return /*#__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/esm/components/common/EmojiUploadPicker.js

@@ -19,6 +19,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';
 var closeEmojiUploadButton = null;
 var emojiUpload = null;
 var emojiUploadTop = null;
@@ -78,7 +79,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (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/esm/components/common/messages.js

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

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

@@ -11,7 +11,7 @@ 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';
 var styles = {
@@ -35,7 +35,7 @@ var addNewCategories = function addNewCategories(oldCategories, newCategories) {
     return oldCategories;
   }
   return oldCategories.concat(newCategories.filter(function (category) {
-    return !!CategoryDescriptionMap[category];
+    return !!(fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew : CategoryDescriptionMap)[category];
   })).sort(sortCategories);
 };
 export var categorySelectorComponentTestId = 'category-selector-component';
@@ -151,7 +151,7 @@ var CategorySelector = function CategorySelector(props) {
       ref: categoryRef,
       className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
     }, categories.map(function (categoryId, index) {
-      var category = CategoryDescriptionMap[categoryId];
+      var category = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew[categoryId] : CategoryDescriptionMap[categoryId];
       var Icon = category.icon;
       var categoryName = formatMessage(messages[category.name]);
       return /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -1,8 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
-import { CategoryDescriptionMap } from './categories';
+import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
@@ -131,7 +132,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
   }, [groupByCategory]);
   var addToCategoryMap = function addToCategoryMap(categoryToGroupMap, emoji, category) {
     if (!categoryToGroupMap[category]) {
-      var categoryDefinition = CategoryDescriptionMap[category];
+      var categoryDefinition = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,

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

@@ -1,5 +1,6 @@
 import BasketballIcon from '@atlaskit/icon/core/basketball';
 import AddIcon from '@atlaskit/icon/core/add';
+import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import FlagIcon from '@atlaskit/icon/core/flag';
 import TakeoutFoodIcon from '@atlaskit/icon/core/takeout-food';
 import ClockIcon from '@atlaskit/icon/core/clock';
@@ -90,4 +91,85 @@ export var CategoryDescriptionMap = {
     icon: AddIcon,
     order: 12
   }
+};
+export var CategoryDescriptionMapNew = {
+  SEARCH: {
+    id: 'SEARCH',
+    name: 'categoriesSearchResults',
+    // refers to i18n categoriesSearchResults key
+    icon: undefined,
+    order: 0
+  },
+  FREQUENT: {
+    id: 'FREQUENT',
+    name: 'frequentCategory',
+    icon: ClockIcon,
+    order: 1
+  },
+  PEOPLE: {
+    id: 'PEOPLE',
+    name: 'peopleCategory',
+    icon: EmojiIcon,
+    order: 2
+  },
+  NATURE: {
+    id: 'NATURE',
+    name: 'natureCategory',
+    icon: TreeIcon,
+    order: 3
+  },
+  FOODS: {
+    id: 'FOODS',
+    name: 'foodsCategory',
+    icon: TakeoutFoodIcon,
+    order: 4
+  },
+  ACTIVITY: {
+    id: 'ACTIVITY',
+    name: 'activityCategory',
+    icon: BasketballIcon,
+    order: 5
+  },
+  PLACES: {
+    id: 'PLACES',
+    name: 'placesCategory',
+    icon: VehicleCarIcon,
+    order: 6
+  },
+  OBJECTS: {
+    id: 'OBJECTS',
+    name: 'objectsCategory',
+    icon: LightbulbIcon,
+    order: 7
+  },
+  SYMBOLS: {
+    id: 'SYMBOLS',
+    name: 'symbolsCategory',
+    icon: HeartIcon,
+    order: 8
+  },
+  FLAGS: {
+    id: 'FLAGS',
+    name: 'flagsCategory',
+    icon: FlagIcon,
+    order: 9
+  },
+  ATLASSIAN: {
+    id: 'ATLASSIAN',
+    name: 'productivityCategory',
+    icon: CheckCircleIcon,
+    order: 10
+  },
+  USER_CUSTOM: {
+    id: customCategory,
+    name: userCustomTitle,
+    icon: AddIcon,
+    order: 11
+  },
+  CUSTOM: {
+    id: customCategory,
+    name: customTitle,
+    icon: EmojiAddIcon,
+    order: 12
+  }
 };

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

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

@@ -0,0 +1,7 @@
+export declare const messages: {
+    addCustomEmojiLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -5,4 +5,5 @@ type CategoryDescriptionRecord = {
     [key in CategoryGroupKey]: CategoryDescription;
 };
 export declare const CategoryDescriptionMap: CategoryDescriptionRecord;
+export declare const CategoryDescriptionMapNew: CategoryDescriptionRecord;
 export {};

package/dist/types-ts4.5/components/common/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    addCustomEmojiLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/components/picker/categories.d.ts

@@ -5,4 +5,5 @@ type CategoryDescriptionRecord = {
     [key in CategoryGroupKey]: CategoryDescription;
 };
 export declare const CategoryDescriptionMap: CategoryDescriptionRecord;
+export declare const CategoryDescriptionMapNew: CategoryDescriptionRecord;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.4.0",
+	"version": "70.4.2",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,16 +42,16 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.4.0",
-		"@atlaskit/media-client": "^36.1.0",
+		"@atlaskit/icon": "^34.5.0",
+		"@atlaskit/media-client": "^36.2.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": "^77.1.0",
+		"@atlaskit/tmp-editor-statsig": "^78.0.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.0.0",
+		"@atlaskit/tooltip": "^22.1.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
@@ -79,7 +79,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/theme": "^23.2.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",