@atlaskit/emoji 69.0.3 → 69.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 69.0.4
+
+### Patch Changes
+
+- [#132688](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132688)
+  [`2ce9c474cca2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ce9c474cca2d) -
+  Updates typeahead imports to use compiled components under FG
+
 ## 69.0.3
 
 ### Patch Changes

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

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CategoryDescriptionMap = void 0;
-var _activity = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/activity"));
-var _custom = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/custom"));
-var _flags = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/flags"));
-var _food = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/food"));
-var _frequent = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/frequent"));
-var _nature = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/nature"));
-var _objects = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/objects"));
-var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/people"));
-var _symbols = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/symbols"));
-var _travel = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/travel"));
-var _productivity = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/productivity"));
+var _basketballEmojiActivity = _interopRequireDefault(require("@atlaskit/icon/core/migration/basketball--emoji-activity"));
+var _addEmojiCustom = _interopRequireDefault(require("@atlaskit/icon/core/migration/add--emoji-custom"));
+var _flagEmojiFlags = _interopRequireDefault(require("@atlaskit/icon/core/migration/flag--emoji-flags"));
+var _takeoutFoodEmojiFood = _interopRequireDefault(require("@atlaskit/icon/core/migration/takeout-food--emoji-food"));
+var _clockEmojiFrequent = _interopRequireDefault(require("@atlaskit/icon/core/migration/clock--emoji-frequent"));
+var _treeEmojiNature = _interopRequireDefault(require("@atlaskit/icon/core/migration/tree--emoji-nature"));
+var _lightbulbEmojiObjects = _interopRequireDefault(require("@atlaskit/icon/core/migration/lightbulb--emoji-objects"));
+var _emojiEmojiPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--emoji-people"));
+var _heartEmojiSymbols = _interopRequireDefault(require("@atlaskit/icon/core/migration/heart--emoji-symbols"));
+var _vehicleCarEmojiTravel = _interopRequireDefault(require("@atlaskit/icon/core/migration/vehicle-car--emoji-travel"));
+var _checkCircleEmojiProductivity = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-circle--emoji-productivity"));
 var _constants = require("../../util/constants");
 var CategoryDescriptionMap = exports.CategoryDescriptionMap = {
   SEARCH: {
@@ -28,73 +28,73 @@ var CategoryDescriptionMap = exports.CategoryDescriptionMap = {
   FREQUENT: {
     id: 'FREQUENT',
     name: 'frequentCategory',
-    icon: _frequent.default,
+    icon: _clockEmojiFrequent.default,
     order: 1
   },
   PEOPLE: {
     id: 'PEOPLE',
     name: 'peopleCategory',
-    icon: _people.default,
+    icon: _emojiEmojiPeople.default,
     order: 2
   },
   NATURE: {
     id: 'NATURE',
     name: 'natureCategory',
-    icon: _nature.default,
+    icon: _treeEmojiNature.default,
     order: 3
   },
   FOODS: {
     id: 'FOODS',
     name: 'foodsCategory',
-    icon: _food.default,
+    icon: _takeoutFoodEmojiFood.default,
     order: 4
   },
   ACTIVITY: {
     id: 'ACTIVITY',
     name: 'activityCategory',
-    icon: _activity.default,
+    icon: _basketballEmojiActivity.default,
     order: 5
   },
   PLACES: {
     id: 'PLACES',
     name: 'placesCategory',
-    icon: _travel.default,
+    icon: _vehicleCarEmojiTravel.default,
     order: 6
   },
   OBJECTS: {
     id: 'OBJECTS',
     name: 'objectsCategory',
-    icon: _objects.default,
+    icon: _lightbulbEmojiObjects.default,
     order: 7
   },
   SYMBOLS: {
     id: 'SYMBOLS',
     name: 'symbolsCategory',
-    icon: _symbols.default,
+    icon: _heartEmojiSymbols.default,
     order: 8
   },
   FLAGS: {
     id: 'FLAGS',
     name: 'flagsCategory',
-    icon: _flags.default,
+    icon: _flagEmojiFlags.default,
     order: 9
   },
   ATLASSIAN: {
     id: 'ATLASSIAN',
     name: 'productivityCategory',
-    icon: _productivity.default,
+    icon: _checkCircleEmojiProductivity.default,
     order: 10
   },
   USER_CUSTOM: {
     id: _constants.customCategory,
     name: _constants.userCustomTitle,
-    icon: _custom.default,
+    icon: _addEmojiCustom.default,
     order: 11
   },
   CUSTOM: {
     id: _constants.customCategory,
     name: _constants.customTitle,
-    icon: _custom.default,
+    icon: _addEmojiCustom.default,
     order: 12
   }
 };

package/dist/cjs/components/typeahead/EmojiTypeAheadItem.js

@@ -29,7 +29,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
 var EmojiTypeAheadItemInternal = /*#__PURE__*/function (_PureComponent) {
   function EmojiTypeAheadItemInternal() {
     var _this;

package/dist/cjs/components/typeahead/EmojiTypeAheadItemInternalCompiled.js

@@ -13,7 +13,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _mouse = require("../../util/mouse");
 var _typeHelpers = require("../../util/type-helpers");
-var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
+var _EmojiPreviewComponent = require("../compiled/common/EmojiPreviewComponent");
 var _styles = require("./styles");
 var typeAheadWidth = 350;
 var typeAheadItem = null;

package/dist/cjs/components/typeahead/EmojiTypeAheadList.js

@@ -18,6 +18,7 @@ var _typeHelpers = require("../../util/type-helpers");
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _mouse = require("../../util/mouse");
 var _Scrollable = _interopRequireDefault(require("../common/Scrollable"));
+var _Scrollable2 = _interopRequireDefault(require("../compiled/common/Scrollable"));
 var _EmojiTypeAheadItem = _interopRequireDefault(require("./EmojiTypeAheadItem"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _EmojiTypeAheadListContainer = require("./EmojiTypeAheadListContainer");
@@ -25,7 +26,7 @@ var _EmojiTypeAheadSpinner = require("./EmojiTypeAheadSpinner");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // ED-26864: use compiled Scrollable when migrating typeahead to compiled css
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function wrapIndex(emojis, index) {
   var len = emojis.length;
   var newIndex = index;
@@ -85,8 +86,11 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
         _this.chooseCurrentSelection();
       });
     });
-    (0, _defineProperty2.default)(_this, "handleScrollableRef", function (ref) {
-      _this.scrollable = ref;
+    (0, _defineProperty2.default)(_this, "handleCompiledScrollableRef", function (ref) {
+      _this.compiledScrollable = ref;
+    });
+    (0, _defineProperty2.default)(_this, "handleEmotionScrollableRef", function (ref) {
+      _this.emotionScrollable = ref;
     });
     _this.state = {
       selectedKey: getKeyByIndex(props.emojis, 0),
@@ -155,8 +159,14 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
     // Internal
     function revealItem(key) {
       var item = this.items[key];
-      if (item && this.scrollable) {
-        this.scrollable.reveal(item);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        if (item && this.compiledScrollable) {
+          this.compiledScrollable.reveal(item);
+        }
+      } else {
+        if (item && this.emotionScrollable) {
+          this.emotionScrollable.reveal(item);
+        }
       }
     }
   }, {
@@ -239,13 +249,17 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
       return /*#__PURE__*/_react.default.createElement(_EmojiTypeAheadListContainer.EmojiTypeAheadListContainer, {
         hasEmoji: hasEmoji,
         loading: loading
-      }, /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
-        ref: this.handleScrollableRef,
+      }, (0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_Scrollable2.default, {
+        ref: this.handleCompiledScrollableRef,
+        maxHeight: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px")
+      }, listBody) : /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
+        ref: this.handleEmotionScrollableRef,
         maxHeight: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px")
       }, listBody));
     }
   }]);
 }(_react.PureComponent);
+// cleanup `platform_editor_css_migrate_emoji` - rename compiledScrollable back to scrollable and delete emotionScrollable
 (0, _defineProperty2.default)(EmojiTypeAheadList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {}
 });

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: "69.0.3"
+      packageVersion: "69.0.4"
     }, attributes)
   };
 };

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

@@ -1,14 +1,14 @@
-import EmojiActivityIcon from '@atlaskit/icon/glyph/emoji/activity';
-import EmojiCustomIcon from '@atlaskit/icon/glyph/emoji/custom';
-import EmojiFlagsIcon from '@atlaskit/icon/glyph/emoji/flags';
-import EmojiFoodIcon from '@atlaskit/icon/glyph/emoji/food';
-import EmojiFrequentIcon from '@atlaskit/icon/glyph/emoji/frequent';
-import EmojiNatureIcon from '@atlaskit/icon/glyph/emoji/nature';
-import EmojiObjectsIcon from '@atlaskit/icon/glyph/emoji/objects';
-import EmojiPeopleIcon from '@atlaskit/icon/glyph/emoji/people';
-import EmojiSymbolsIcon from '@atlaskit/icon/glyph/emoji/symbols';
-import EmojiTravelIcon from '@atlaskit/icon/glyph/emoji/travel';
-import EmojiProductivityIcon from '@atlaskit/icon/glyph/emoji/productivity';
+import BasketballIcon from '@atlaskit/icon/core/migration/basketball--emoji-activity';
+import AddIcon from '@atlaskit/icon/core/migration/add--emoji-custom';
+import FlagIcon from '@atlaskit/icon/core/migration/flag--emoji-flags';
+import TakeoutFoodIcon from '@atlaskit/icon/core/migration/takeout-food--emoji-food';
+import ClockIcon from '@atlaskit/icon/core/migration/clock--emoji-frequent';
+import TreeIcon from '@atlaskit/icon/core/migration/tree--emoji-nature';
+import LightbulbIcon from '@atlaskit/icon/core/migration/lightbulb--emoji-objects';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--emoji-people';
+import HeartIcon from '@atlaskit/icon/core/migration/heart--emoji-symbols';
+import VehicleCarIcon from '@atlaskit/icon/core/migration/vehicle-car--emoji-travel';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle--emoji-productivity';
 import { customCategory, userCustomTitle, customTitle } from '../../util/constants';
 export const CategoryDescriptionMap = {
   SEARCH: {
@@ -21,73 +21,73 @@ export const CategoryDescriptionMap = {
   FREQUENT: {
     id: 'FREQUENT',
     name: 'frequentCategory',
-    icon: EmojiFrequentIcon,
+    icon: ClockIcon,
     order: 1
   },
   PEOPLE: {
     id: 'PEOPLE',
     name: 'peopleCategory',
-    icon: EmojiPeopleIcon,
+    icon: EmojiIcon,
     order: 2
   },
   NATURE: {
     id: 'NATURE',
     name: 'natureCategory',
-    icon: EmojiNatureIcon,
+    icon: TreeIcon,
     order: 3
   },
   FOODS: {
     id: 'FOODS',
     name: 'foodsCategory',
-    icon: EmojiFoodIcon,
+    icon: TakeoutFoodIcon,
     order: 4
   },
   ACTIVITY: {
     id: 'ACTIVITY',
     name: 'activityCategory',
-    icon: EmojiActivityIcon,
+    icon: BasketballIcon,
     order: 5
   },
   PLACES: {
     id: 'PLACES',
     name: 'placesCategory',
-    icon: EmojiTravelIcon,
+    icon: VehicleCarIcon,
     order: 6
   },
   OBJECTS: {
     id: 'OBJECTS',
     name: 'objectsCategory',
-    icon: EmojiObjectsIcon,
+    icon: LightbulbIcon,
     order: 7
   },
   SYMBOLS: {
     id: 'SYMBOLS',
     name: 'symbolsCategory',
-    icon: EmojiSymbolsIcon,
+    icon: HeartIcon,
     order: 8
   },
   FLAGS: {
     id: 'FLAGS',
     name: 'flagsCategory',
-    icon: EmojiFlagsIcon,
+    icon: FlagIcon,
     order: 9
   },
   ATLASSIAN: {
     id: 'ATLASSIAN',
     name: 'productivityCategory',
-    icon: EmojiProductivityIcon,
+    icon: CheckCircleIcon,
     order: 10
   },
   USER_CUSTOM: {
     id: customCategory,
     name: userCustomTitle,
-    icon: EmojiCustomIcon,
+    icon: AddIcon,
     order: 11
   },
   CUSTOM: {
     id: customCategory,
     name: customTitle,
-    icon: EmojiCustomIcon,
+    icon: AddIcon,
     order: 12
   }
 };

package/dist/es2019/components/typeahead/EmojiTypeAheadItem.js

@@ -11,7 +11,7 @@ import { PureComponent } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 import { EmojiTypeAheadItemInternalCompiled } from './EmojiTypeAheadItemInternalCompiled';

package/dist/es2019/components/typeahead/EmojiTypeAheadItemInternalCompiled.js

@@ -6,7 +6,7 @@ import { N30 } from '@atlaskit/theme/colors';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { leftClick } from '../../util/mouse';
 import { toEmojiId } from '../../util/type-helpers';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../compiled/common/EmojiPreviewComponent';
 import { typeaheadSelected } from './styles';
 const typeAheadWidth = 350;
 const typeAheadItem = null;

package/dist/es2019/components/typeahead/EmojiTypeAheadList.js

@@ -4,7 +4,8 @@ import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
 import { toEmojiId } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import Scrollable from '../common/Scrollable'; // ED-26864: use compiled Scrollable when migrating typeahead to compiled css
+import { default as EmotionScrollable } from '../common/Scrollable';
+import { default as CompiledScrollable } from '../compiled/common/Scrollable';
 import EmojiItem from './EmojiTypeAheadItem';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { EmojiTypeAheadListContainer } from './EmojiTypeAheadListContainer';
@@ -69,8 +70,11 @@ export default class EmojiTypeAheadList extends PureComponent {
         this.chooseCurrentSelection();
       });
     });
-    _defineProperty(this, "handleScrollableRef", ref => {
-      this.scrollable = ref;
+    _defineProperty(this, "handleCompiledScrollableRef", ref => {
+      this.compiledScrollable = ref;
+    });
+    _defineProperty(this, "handleEmotionScrollableRef", ref => {
+      this.emotionScrollable = ref;
     });
     this.state = {
       selectedKey: getKeyByIndex(props.emojis, 0),
@@ -137,8 +141,14 @@ export default class EmojiTypeAheadList extends PureComponent {
   // Internal
   revealItem(key) {
     const item = this.items[key];
-    if (item && this.scrollable) {
-      this.scrollable.reveal(item);
+    if (fg('platform_editor_css_migrate_emoji')) {
+      if (item && this.compiledScrollable) {
+        this.compiledScrollable.reveal(item);
+      }
+    } else {
+      if (item && this.emotionScrollable) {
+        this.emotionScrollable.reveal(item);
+      }
     }
   }
   selectIndexNewEmoji(index, emojis) {
@@ -215,12 +225,16 @@ export default class EmojiTypeAheadList extends PureComponent {
     return /*#__PURE__*/React.createElement(EmojiTypeAheadListContainer, {
       hasEmoji: hasEmoji,
       loading: loading
-    }, /*#__PURE__*/React.createElement(Scrollable, {
-      ref: this.handleScrollableRef,
+    }, fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledScrollable, {
+      ref: this.handleCompiledScrollableRef,
+      maxHeight: `${emojiTypeAheadMaxHeight}px`
+    }, listBody) : /*#__PURE__*/React.createElement(EmotionScrollable, {
+      ref: this.handleEmotionScrollableRef,
       maxHeight: `${emojiTypeAheadMaxHeight}px`
     }, listBody));
   }
 }
+// cleanup `platform_editor_css_migrate_emoji` - rename compiledScrollable back to scrollable and delete emotionScrollable
 _defineProperty(EmojiTypeAheadList, "defaultProps", {
   onEmojiSelected: () => {}
 });

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

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.0.3",
+    packageVersion: "69.0.4",
     ...attributes
   }
 });

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

@@ -1,14 +1,14 @@
-import EmojiActivityIcon from '@atlaskit/icon/glyph/emoji/activity';
-import EmojiCustomIcon from '@atlaskit/icon/glyph/emoji/custom';
-import EmojiFlagsIcon from '@atlaskit/icon/glyph/emoji/flags';
-import EmojiFoodIcon from '@atlaskit/icon/glyph/emoji/food';
-import EmojiFrequentIcon from '@atlaskit/icon/glyph/emoji/frequent';
-import EmojiNatureIcon from '@atlaskit/icon/glyph/emoji/nature';
-import EmojiObjectsIcon from '@atlaskit/icon/glyph/emoji/objects';
-import EmojiPeopleIcon from '@atlaskit/icon/glyph/emoji/people';
-import EmojiSymbolsIcon from '@atlaskit/icon/glyph/emoji/symbols';
-import EmojiTravelIcon from '@atlaskit/icon/glyph/emoji/travel';
-import EmojiProductivityIcon from '@atlaskit/icon/glyph/emoji/productivity';
+import BasketballIcon from '@atlaskit/icon/core/migration/basketball--emoji-activity';
+import AddIcon from '@atlaskit/icon/core/migration/add--emoji-custom';
+import FlagIcon from '@atlaskit/icon/core/migration/flag--emoji-flags';
+import TakeoutFoodIcon from '@atlaskit/icon/core/migration/takeout-food--emoji-food';
+import ClockIcon from '@atlaskit/icon/core/migration/clock--emoji-frequent';
+import TreeIcon from '@atlaskit/icon/core/migration/tree--emoji-nature';
+import LightbulbIcon from '@atlaskit/icon/core/migration/lightbulb--emoji-objects';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--emoji-people';
+import HeartIcon from '@atlaskit/icon/core/migration/heart--emoji-symbols';
+import VehicleCarIcon from '@atlaskit/icon/core/migration/vehicle-car--emoji-travel';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle--emoji-productivity';
 import { customCategory, userCustomTitle, customTitle } from '../../util/constants';
 export var CategoryDescriptionMap = {
   SEARCH: {
@@ -21,73 +21,73 @@ export var CategoryDescriptionMap = {
   FREQUENT: {
     id: 'FREQUENT',
     name: 'frequentCategory',
-    icon: EmojiFrequentIcon,
+    icon: ClockIcon,
     order: 1
   },
   PEOPLE: {
     id: 'PEOPLE',
     name: 'peopleCategory',
-    icon: EmojiPeopleIcon,
+    icon: EmojiIcon,
     order: 2
   },
   NATURE: {
     id: 'NATURE',
     name: 'natureCategory',
-    icon: EmojiNatureIcon,
+    icon: TreeIcon,
     order: 3
   },
   FOODS: {
     id: 'FOODS',
     name: 'foodsCategory',
-    icon: EmojiFoodIcon,
+    icon: TakeoutFoodIcon,
     order: 4
   },
   ACTIVITY: {
     id: 'ACTIVITY',
     name: 'activityCategory',
-    icon: EmojiActivityIcon,
+    icon: BasketballIcon,
     order: 5
   },
   PLACES: {
     id: 'PLACES',
     name: 'placesCategory',
-    icon: EmojiTravelIcon,
+    icon: VehicleCarIcon,
     order: 6
   },
   OBJECTS: {
     id: 'OBJECTS',
     name: 'objectsCategory',
-    icon: EmojiObjectsIcon,
+    icon: LightbulbIcon,
     order: 7
   },
   SYMBOLS: {
     id: 'SYMBOLS',
     name: 'symbolsCategory',
-    icon: EmojiSymbolsIcon,
+    icon: HeartIcon,
     order: 8
   },
   FLAGS: {
     id: 'FLAGS',
     name: 'flagsCategory',
-    icon: EmojiFlagsIcon,
+    icon: FlagIcon,
     order: 9
   },
   ATLASSIAN: {
     id: 'ATLASSIAN',
     name: 'productivityCategory',
-    icon: EmojiProductivityIcon,
+    icon: CheckCircleIcon,
     order: 10
   },
   USER_CUSTOM: {
     id: customCategory,
     name: userCustomTitle,
-    icon: EmojiCustomIcon,
+    icon: AddIcon,
     order: 11
   },
   CUSTOM: {
     id: customCategory,
     name: customTitle,
-    icon: EmojiCustomIcon,
+    icon: AddIcon,
     order: 12
   }
 };

package/dist/esm/components/typeahead/EmojiTypeAheadItem.js

@@ -18,7 +18,7 @@ import { PureComponent } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 import { EmojiTypeAheadItemInternalCompiled } from './EmojiTypeAheadItemInternalCompiled';

package/dist/esm/components/typeahead/EmojiTypeAheadItemInternalCompiled.js

@@ -6,7 +6,7 @@ import { N30 } from '@atlaskit/theme/colors';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { leftClick } from '../../util/mouse';
 import { toEmojiId } from '../../util/type-helpers';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../compiled/common/EmojiPreviewComponent';
 import { typeaheadSelected } from './styles';
 var typeAheadWidth = 350;
 var typeAheadItem = null;

package/dist/esm/components/typeahead/EmojiTypeAheadList.js

@@ -11,7 +11,8 @@ import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
 import { toEmojiId } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import Scrollable from '../common/Scrollable'; // ED-26864: use compiled Scrollable when migrating typeahead to compiled css
+import { default as EmotionScrollable } from '../common/Scrollable';
+import { default as CompiledScrollable } from '../compiled/common/Scrollable';
 import EmojiItem from './EmojiTypeAheadItem';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { EmojiTypeAheadListContainer } from './EmojiTypeAheadListContainer';
@@ -75,8 +76,11 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
         _this.chooseCurrentSelection();
       });
     });
-    _defineProperty(_this, "handleScrollableRef", function (ref) {
-      _this.scrollable = ref;
+    _defineProperty(_this, "handleCompiledScrollableRef", function (ref) {
+      _this.compiledScrollable = ref;
+    });
+    _defineProperty(_this, "handleEmotionScrollableRef", function (ref) {
+      _this.emotionScrollable = ref;
     });
     _this.state = {
       selectedKey: getKeyByIndex(props.emojis, 0),
@@ -145,8 +149,14 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
     // Internal
     function revealItem(key) {
       var item = this.items[key];
-      if (item && this.scrollable) {
-        this.scrollable.reveal(item);
+      if (fg('platform_editor_css_migrate_emoji')) {
+        if (item && this.compiledScrollable) {
+          this.compiledScrollable.reveal(item);
+        }
+      } else {
+        if (item && this.emotionScrollable) {
+          this.emotionScrollable.reveal(item);
+        }
       }
     }
   }, {
@@ -229,13 +239,17 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/React.createElement(EmojiTypeAheadListContainer, {
         hasEmoji: hasEmoji,
         loading: loading
-      }, /*#__PURE__*/React.createElement(Scrollable, {
-        ref: this.handleScrollableRef,
+      }, fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledScrollable, {
+        ref: this.handleCompiledScrollableRef,
+        maxHeight: "".concat(emojiTypeAheadMaxHeight, "px")
+      }, listBody) : /*#__PURE__*/React.createElement(EmotionScrollable, {
+        ref: this.handleEmotionScrollableRef,
         maxHeight: "".concat(emojiTypeAheadMaxHeight, "px")
       }, listBody));
     }
   }]);
 }(PureComponent);
+// cleanup `platform_editor_css_migrate_emoji` - rename compiledScrollable back to scrollable and delete emotionScrollable
 _defineProperty(EmojiTypeAheadList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {}
 });

package/dist/esm/util/analytics/analytics.js

@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.0.3"
+      packageVersion: "69.0.4"
     }, attributes)
   };
 };

package/dist/types/components/typeahead/EmojiTypeAheadList.d.ts

@@ -11,7 +11,8 @@ export interface State {
 }
 export default class EmojiTypeAheadList extends PureComponent<Props, State> {
     private lastMousePosition?;
-    private scrollable?;
+    private compiledScrollable?;
+    private emotionScrollable?;
     private items;
     static defaultProps: {
         onEmojiSelected: () => void;
@@ -31,5 +32,6 @@ export default class EmojiTypeAheadList extends PureComponent<Props, State> {
     private renderItems;
     private isSelectedEmoji;
     render(): React.JSX.Element;
-    private handleScrollableRef;
+    private handleCompiledScrollableRef;
+    private handleEmotionScrollableRef;
 }

package/dist/types-ts4.5/components/typeahead/EmojiTypeAheadList.d.ts

@@ -11,7 +11,8 @@ export interface State {
 }
 export default class EmojiTypeAheadList extends PureComponent<Props, State> {
     private lastMousePosition?;
-    private scrollable?;
+    private compiledScrollable?;
+    private emotionScrollable?;
     private items;
     static defaultProps: {
         onEmojiSelected: () => void;
@@ -31,5 +32,6 @@ export default class EmojiTypeAheadList extends PureComponent<Props, State> {
     private renderItems;
     private isSelectedEmoji;
     render(): React.JSX.Element;
-    private handleScrollableRef;
+    private handleCompiledScrollableRef;
+    private handleEmotionScrollableRef;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.0.3",
+	"version": "69.0.4",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.2.0",
 		"@atlaskit/media-client": "^32.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",