@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -6,22 +6,25 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sortCategoriesNew = exports.sortCategories = exports.default = exports.categorySelectorComponentTestId = exports.categorySelectorCategoryTestId = void 0;
+exports.default = exports.categorySelectorComponentTestId = void 0;
 require("./CategorySelector.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _css = require("@atlaskit/css");
 var _reactIntl = require("react-intl");
+var _css = require("@atlaskit/css");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _usePrevious = require("../../hooks/usePrevious");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
 var _categories = require("./categories");
-var _usePrevious = require("../../hooks/usePrevious");
+var _categorySelectorCategoryTestId = require("./categorySelectorCategoryTestId");
 var _EmojiPickerList = require("./EmojiPickerList");
+var _sortCategories = require("./sortCategories");
+var _sortCategoriesNew = require("./sortCategoriesNew");
 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 isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!_featureGateJsClient.default.initializeCompleted()) {
@@ -53,24 +56,15 @@ 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;
-};
-var sortCategoriesNew = exports.sortCategoriesNew = function sortCategoriesNew(c1, c2) {
-  return _categories.CategoryDescriptionMapNew[c1].order - _categories.CategoryDescriptionMapNew[c2].order;
-};
 var addNewCategories = function addNewCategories(oldCategories, newCategories) {
   if (!newCategories) {
     return oldCategories;
   }
   return oldCategories.concat(newCategories.filter(function (category) {
     return !!(isRefreshEmojiPickerEnabled() ? _categories.CategoryDescriptionMapNew : _categories.CategoryDescriptionMap)[category];
-  })).sort(isRefreshEmojiPickerEnabled() ? sortCategoriesNew : sortCategories);
+  })).sort(isRefreshEmojiPickerEnabled() ? _sortCategoriesNew.sortCategoriesNew : _sortCategories.sortCategories);
 };
 var categorySelectorComponentTestId = exports.categorySelectorComponentTestId = 'category-selector-component';
-var categorySelectorCategoryTestId = exports.categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {
-  return "category-selector-".concat(categoryId);
-};
 var CategorySelector = function CategorySelector(props) {
   var disableCategories = props.disableCategories,
     dynamicCategories = props.dynamicCategories,
@@ -185,7 +179,7 @@ var CategorySelector = function CategorySelector(props) {
         xcss: (0, _css.cx)(styles.commonCategoryNew, styles.defaultCategoryNew, categoryId === activeCategoryId && styles.activeCategoryNew, disableCategories && styles.disabledCategory),
         isDisabled: disableCategories,
         onClick: handleClick(categoryId, index),
-        testId: categorySelectorCategoryTestId(categoryId),
+        testId: (0, _categorySelectorCategoryTestId.categorySelectorCategoryTestId)(categoryId),
         tabIndex: currentFocus === index ? 0 : -1,
         onKeyDown: handleKeyDown,
         role: "tab"
@@ -215,7 +209,7 @@ var CategorySelector = function CategorySelector(props) {
         xcss: (0, _css.cx)(styles.commonCategory, styles.defaultCategory, categoryId === activeCategoryId && styles.activeCategory, disableCategories && styles.disabledCategory),
         isDisabled: disableCategories,
         onClick: handleClick(categoryId, index),
-        testId: categorySelectorCategoryTestId(categoryId),
+        testId: (0, _categorySelectorCategoryTestId.categorySelectorCategoryTestId)(categoryId),
         tabIndex: currentFocus === index ? 0 : -1,
         onKeyDown: handleKeyDown,
         role: "tab"

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

@@ -1,118 +1,56 @@
-/* EmojiPicker.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.preloadEmojiPicker = exports.default = exports.EmojiPickerInternal = void 0;
-require("./EmojiPicker.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../util/analytics");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
-var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
-var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
-var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
-var _constants = require("../../util/constants");
-var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
-var _excluded = ["emojiProvider"];
-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; })(); }
-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" != (0, _typeof2.default)(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 isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
-  if (!_featureGateJsClient.default.initializeCompleted()) {
-    return false;
+exports.EmojiPicker = void 0;
+Object.defineProperty(exports, "EmojiPickerInternal", {
+  enumerable: true,
+  get: function get() {
+    return _EmojiPickerInternal.EmojiPickerInternal;
   }
-
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-var emojiPicker = null;
-var emojiPickerNew = null;
-var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent'));
-  });
-};
-var emojiPickerLoader = function emojiPickerLoader() {
-  return emojiPickerModuleLoader().then(function (module) {
-    return module.default;
-  });
-};
-var preloadEmojiPicker = exports.preloadEmojiPicker = function preloadEmojiPicker() {
-  emojiPickerLoader().then(function (component) {
-    EmojiPickerInternal.AsyncLoadedComponent = component;
-  });
-};
-var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
-  function EmojiPickerInternal(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, EmojiPickerInternal);
-    _this = _callSuper(this, EmojiPickerInternal, [props, {}]);
-    (0, _defineProperty2.default)(_this, "state", {
-      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
-    });
-    _analytics.ufoExperiences['emoji-picker-opened'].start();
-    return _this;
+});
+exports.default = void 0;
+Object.defineProperty(exports, "emojiPickerLoader", {
+  enumerable: true,
+  get: function get() {
+    return _emojiPickerLoader.emojiPickerLoader;
+  }
+});
+Object.defineProperty(exports, "emojiPickerModuleLoader", {
+  enumerable: true,
+  get: function get() {
+    return _emojiPickerModuleLoader.emojiPickerModuleLoader;
   }
-  (0, _inherits2.default)(EmojiPickerInternal, _LoadingEmojiComponen);
-  return (0, _createClass2.default)(EmojiPickerInternal, [{
-    key: "asyncLoadComponent",
-    value: function asyncLoadComponent() {
-      var _this2 = this;
-      emojiPickerLoader().then(function (component) {
-        EmojiPickerInternal.AsyncLoadedComponent = component;
-        _this2.setAsyncState(component);
-      });
-    }
-  }, {
-    key: "renderLoading",
-    value: function renderLoading() {
-      var _this3 = this;
-      var item = new _EmojiPickerVirtualItems.LoadingItem();
-      var handlePickerRef = function handlePickerRef(ref) {
-        if (_this3.props.onPickerRef) {
-          _this3.props.onPickerRef(ref);
-        }
-      };
-      _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
-      return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/_react.default.createElement("div", {
-        ref: handlePickerRef,
-        className: (0, _runtime.ax)(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-      }, item.renderItem()) : /*#__PURE__*/_react.default.createElement("div", {
-        ref: handlePickerRef,
-        className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-      }, item.renderItem());
-    }
-  }, {
-    key: "renderLoaded",
-    value: function renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
-      var _this$props = this.props,
-        emojiProvider = _this$props.emojiProvider,
-        otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
-        experiences: [_analytics.ufoExperiences['emoji-picker-opened']]
-      }, /*#__PURE__*/_react.default.createElement(_EmojiCommonProvider.EmojiCommonProvider, {
-        emojiProvider: loadedEmojiProvider
-      }, /*#__PURE__*/_react.default.createElement(EmojiPickerComponent, otherProps)));
-    }
-  }]);
-}(_LoadingEmojiComponent.default);
-// state initialised with static component to prevent
-// rerender when the module has already been loaded
-(0, _defineProperty2.default)(EmojiPickerInternal, "defaultProps", {
-  size: _constants.defaultEmojiPickerSize
 });
-var EmojiPicker = (0, _analyticsNext.withAnalyticsEvents)()(EmojiPickerInternal);
-var _default = exports.default = EmojiPicker;
+Object.defineProperty(exports, "preloadEmojiPicker", {
+  enumerable: true,
+  get: function get() {
+    return _preloadEmojiPicker.preloadEmojiPicker;
+  }
+});
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _EmojiPickerInternal = require("./EmojiPickerInternal");
+var _preloadEmojiPicker = require("./preloadEmojiPicker");
+var _emojiPickerModuleLoader = require("./emojiPickerModuleLoader");
+var _emojiPickerLoader = require("./emojiPickerLoader");
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var EmojiPicker = exports.EmojiPicker = (0, _analyticsNext.withAnalyticsEvents)()(_EmojiPickerInternal.EmojiPickerInternal);
+var _default = exports.default = EmojiPicker;
+/**
+ * @deprecated Use `import { preloadEmojiPicker } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+/**
+ * @deprecated Use `import { EmojiPickerInternal } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+/**
+ * @deprecated Use `import { emojiPickerModuleLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+/**
+ * @deprecated Use `import { emojiPickerLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */

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

@@ -10,9 +10,9 @@ exports.default = exports.RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = void 0;
 require("./EmojiPickerCategoryHeading.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactIntl = require("react-intl");
-var _typeHelpers = require("../../util/type-helpers");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _isMessagesKey = require("../../util/is-messages-key");
 var _i18n = require("../i18n");
 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 emojiCategoryTitle = null;
@@ -38,6 +38,6 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
   }, /*#__PURE__*/React.createElement(_heading.default, {
     size: "xsmall",
     as: "h2"
-  }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title)));
+  }, (0, _isMessagesKey.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title)));
 };
 var _default = exports.default = EmojiPickerCategoryHeading;

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

@@ -16,32 +16,48 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _reactDom = require("react-dom");
+var _reactIntl = require("react-intl");
 var _browserApis = require("@atlaskit/browser-apis");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/external/adapter");
 var _file = require("@atlaskit/pragmatic-drag-and-drop/external/file");
-var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
-var _reactDom = require("react-dom");
-var _reactIntl = require("react-intl");
-var _EmojiRepository = require("../../api/EmojiRepository");
-var _EmojiResource = require("../../api/EmojiResource");
-var _constants = require("../../util/constants");
-var _typeHelpers = require("../../util/type-helpers");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _getEmojiVariation = require("../../api/getEmojiVariation");
+var _supportsUploadFeature = require("../../api/supportsUploadFeature");
+var _useEmoji2 = require("../../hooks/useEmoji");
+var _useIsMounted = require("../../hooks/useIsMounted");
 var _types = require("../../types");
-var _filters = require("../../util/filters");
-var _UploadEmoji = require("../common/UploadEmoji");
+var _analytics = require("../../util/analytics/analytics");
+var _categoryClickedEvent = require("../../util/analytics/categoryClickedEvent");
+var _closedPickerEvent = require("../../util/analytics/closedPickerEvent");
+var _deleteBeginEvent = require("../../util/analytics/deleteBeginEvent");
+var _deleteCancelEvent = require("../../util/analytics/deleteCancelEvent");
+var _deleteConfirmEvent = require("../../util/analytics/deleteConfirmEvent");
+var _openedPickerEvent = require("../../util/analytics/openedPickerEvent");
+var _pickerClickedEvent = require("../../util/analytics/pickerClickedEvent");
+var _pickerSearchedEvent = require("../../util/analytics/pickerSearchedEvent");
+var _selectedFileEvent = require("../../util/analytics/selectedFileEvent");
+var _toneSelectorClosedEvent = require("../../util/analytics/toneSelectorClosedEvent");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+var _uploadBeginButton = require("../../util/analytics/uploadBeginButton");
+var _uploadCancelButton = require("../../util/analytics/uploadCancelButton");
+var _uploadConfirmButton = require("../../util/analytics/uploadConfirmButton");
+var _constants = require("../../util/constants");
+var _containsEmojiId = require("../../util/contains-emoji-id");
+var _filterHiddenEmojis = require("../../util/filter-hidden-emojis");
+var _getToneEmoji = require("../../util/get-tone-emoji");
+var _isEmojiDescription = require("../../util/is-emoji-description");
+var _isPromise = require("../../util/is-promise");
+var _productivityColors = require("../../util/productivity-colors");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
+var _UploadEmoji = require("../common/UploadEmoji");
+var _i18n = require("../i18n");
 var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
 var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
 var _EmojiPickerList = require("./EmojiPickerList");
-var _analytics = require("../../util/analytics");
-var _useEmoji2 = require("../../hooks/useEmoji");
-var _useIsMounted = require("../../hooks/useIsMounted");
-var _i18n = require("../i18n");
-var _productivityColors = require("../../util/productivity-colors");
-var _hiddenEmojis = require("../../util/hidden-emojis");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -253,7 +269,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setUploading(false);
       setUploadErrorMessage(undefined);
     });
-    fireAnalytics((0, _analytics.uploadCancelButton)());
+    fireAnalytics((0, _uploadCancelButton.uploadCancelButton)());
     if (isRefreshEmojiPickerEnabled()) {
       setTimeout(function () {
         var _getDocument;
@@ -284,7 +300,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         onDynamicCategoryChange(categories);
       });
     }
-    if (emojiToRender && !(0, _typeHelpers.containsEmojiId)(emojiToRender, selectedEmoji)) {
+    if (emojiToRender && !(0, _containsEmojiId.containsEmojiId)(emojiToRender, selectedEmoji)) {
       (0, _reactDom.unstable_batchedUpdates)(function () {
         setSelectedEmoji(undefined);
       });
@@ -305,7 +321,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
   var onFrequentEmojiResult = (0, _react.useCallback)(function (frequentEmoji) {
     // change the category of each of the featured emoji
-    var visibleFrequentEmoji = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(frequentEmoji) : frequentEmoji;
+    var visibleFrequentEmoji = isTeamojiExperimentEnabled ? (0, _filterHiddenEmojis.filterHiddenEmojis)(frequentEmoji) : frequentEmoji;
     var recategorised = visibleFrequentEmoji.map(function (emoji) {
       var clone = JSON.parse(JSON.stringify(emoji));
       clone.category = _constants.frequentCategory;
@@ -318,7 +334,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onSearchResult = (0, _react.useCallback)(function (searchResults) {
     var frequentlyUsedEmoji = frequentlyUsedEmojis || [];
     var searchQuery = searchResults.query || '';
-    var visibleSearchEmojis = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(searchResults.emojis) : searchResults.emojis;
+    var visibleSearchEmojis = isTeamojiExperimentEnabled ? (0, _filterHiddenEmojis.filterHiddenEmojis)(searchResults.emojis) : searchResults.emojis;
 
     /**
      * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
@@ -336,7 +352,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       emojiToRender: emojiToRender,
       searchEmoji: visibleSearchEmojis
     });
-    fireAnalytics((0, _analytics.pickerSearchedEvent)({
+    fireAnalytics((0, _pickerSearchedEvent.pickerSearchedEvent)({
       queryLength: searchQuery.length,
       numMatches: visibleSearchEmojis.length
     }));
@@ -380,7 +396,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     setSelectedTone(toneValue);
   }, [emojiProvider, query, updateEmojis]);
   var onToneSelectorCancelled = (0, _react.useCallback)(function () {
-    fireAnalytics((0, _analytics.toneSelectorClosedEvent)());
+    fireAnalytics((0, _toneSelectorClosedEvent.toneSelectorClosedEvent)());
   }, [fireAnalytics]);
   var onProductivityColorSelected = (0, _react.useCallback)(function (color) {
     setSelectedProductivityColor(color);
@@ -389,7 +405,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onSelectWrapper = (0, _react.useCallback)(function (emojiId, emoji, event) {
     if (onSelection) {
       onSelection(emojiId, emoji, event);
-      fireAnalytics((0, _analytics.pickerClickedEvent)({
+      fireAnalytics((0, _pickerClickedEvent.pickerClickedEvent)({
         duration: calculateElapsedTime(),
         emojiId: (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) || '',
         category: emoji && emoji.category || '',
@@ -416,9 +432,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
-        var visibleEmojisInCategory = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojisInCategory || []) : emojisInCategory || [];
+        var visibleEmojisInCategory = isTeamojiExperimentEnabled ? (0, _filterHiddenEmojis.filterHiddenEmojis)(emojisInCategory || []) : emojisInCategory || [];
         if (visibleEmojisInCategory.length > 0) {
-          newSelectedEmoji = (0, _EmojiRepository.getEmojiVariation)(visibleEmojisInCategory[0], {
+          newSelectedEmoji = (0, _getEmojiVariation.getEmojiVariation)(visibleEmojisInCategory[0], {
             skinTone: selectedTone
           });
         }
@@ -438,7 +454,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           setActiveCategory(categoryId);
           setSelectedEmoji(newSelectedEmoji);
         });
-        fireAnalytics((0, _analytics.categoryClickedEvent)({
+        fireAnalytics((0, _categoryClickedEvent.categoryClickedEvent)({
           category: categoryId
         }));
       }
@@ -453,7 +469,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     return uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, uploadErrorMessage) : null;
   }, [uploadErrorMessage]);
   var onFileChooserClicked = (0, _react.useCallback)(function () {
-    fireAnalytics((0, _analytics.selectedFileEvent)());
+    fireAnalytics((0, _selectedFileEvent.selectedFileEvent)());
   }, [fireAnalytics]);
   var scrollToTopOfList = (0, _react.useCallback)(function () {
     var _emojiPickerList$curr;
@@ -513,7 +529,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [uploading]);
   var onOpenUpload = (0, _react.useCallback)(function () {
     // Prime upload token so it's ready when the user adds
-    if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+    if ((0, _supportsUploadFeature.supportsUploadFeature)(emojiProvider)) {
       emojiProvider.prepareForUpload();
     }
     (0, _reactDom.unstable_batchedUpdates)(function () {
@@ -521,7 +537,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setHasUploadPreviewError(false);
       setUploading(true);
     });
-    fireAnalytics((0, _analytics.uploadBeginButton)());
+    fireAnalytics((0, _uploadBeginButton.uploadBeginButton)());
   }, [emojiProvider, fireAnalytics]);
   var scrollToUploadedEmoji = (0, _react.useCallback)(function (emojiDescription) {
     if (emojiPickerList.current) {
@@ -538,7 +554,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            fireAnalytics((0, _analytics.uploadConfirmButton)({
+            fireAnalytics((0, _uploadConfirmButton.uploadConfirmButton)({
               retry: retry
             }));
             errorSetter = function errorSetter(message) {
@@ -581,20 +597,20 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }(), [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   var onTriggerDelete = (0, _react.useCallback)(function (_emojiId, emoji) {
     if (_emojiId) {
-      fireAnalytics((0, _analytics.deleteBeginEvent)({
+      fireAnalytics((0, _deleteBeginEvent.deleteBeginEvent)({
         emojiId: _emojiId.id
       }));
       setEmojiToDelete(emoji);
     }
   }, [fireAnalytics]);
   var onCloseDelete = (0, _react.useCallback)(function () {
-    fireAnalytics((0, _analytics.deleteCancelEvent)({
+    fireAnalytics((0, _deleteCancelEvent.deleteCancelEvent)({
       emojiId: emojiToDelete && emojiToDelete.id
     }));
     setEmojiToDelete(undefined);
   }, [emojiToDelete, fireAnalytics]);
   var onDeleteEmoji = (0, _react.useCallback)(function (emoji) {
-    fireAnalytics((0, _analytics.deleteConfirmEvent)({
+    fireAnalytics((0, _deleteConfirmEvent.deleteConfirmEvent)({
       emojiId: emojiToDelete && emojiToDelete.id
     }));
     return emojiProvider.deleteSiteEmoji(emoji).then(function (success) {
@@ -610,21 +626,21 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     emojiProvider.subscribe(onProviderChange);
     onSearch(query);
     if (!hideToneSelector) {
-      var _toneEmoji = (0, _filters.getToneEmoji)(emojiProvider);
-      if ((0, _typeHelpers.isPromise)(_toneEmoji)) {
+      var _toneEmoji = (0, _getToneEmoji.getToneEmoji)(emojiProvider);
+      if ((0, _isPromise.isPromise)(_toneEmoji)) {
         _toneEmoji.then(function (emoji) {
           return setToneEmoji(emoji);
         });
-      } else if (_toneEmoji === undefined || (0, _typeHelpers.isEmojiDescription)(_toneEmoji)) {
+      } else if (_toneEmoji === undefined || (0, _isEmojiDescription.isEmojiDescription)(_toneEmoji)) {
         setToneEmoji(_toneEmoji);
       }
     }
   }, [emojiProvider, hideToneSelector, onProviderChange, onSearch, query]);
   if (isMounting.current) {
     // componentWillMount equivalent
-    _analytics.ufoExperiences['emoji-picker-opened'].success();
+    _ufoExperiences.ufoExperiences['emoji-picker-opened'].success();
     openTime.current = Date.now();
-    fireAnalytics((0, _analytics.openedPickerEvent)());
+    fireAnalytics((0, _openedPickerEvent.openedPickerEvent)());
     isMounting.current = false;
   }
 
@@ -667,16 +683,16 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   (0, _react.useEffect)(function () {
     // Fire analytics on component unmount
     return function () {
-      fireAnalytics((0, _analytics.closedPickerEvent)({
+      fireAnalytics((0, _closedPickerEvent.closedPickerEvent)({
         duration: calculateElapsedTime()
       }));
-      _analytics.ufoExperiences['emoji-picker-opened'].abort({
+      _ufoExperiences.ufoExperiences['emoji-picker-opened'].abort({
         metadata: {
           source: 'EmojiPickerComponent',
           reason: 'unmount'
         }
       });
-      _analytics.ufoExperiences['emoji-searched'].abort({
+      _ufoExperiences.ufoExperiences['emoji-searched'].abort({
         metadata: {
           source: 'EmojiPickerComponent',
           reason: 'unmount'

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

@@ -0,0 +1,99 @@
+/* EmojiPickerInternal.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiPickerInternal = void 0;
+require("./EmojiPickerInternal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+var _constants = require("../../util/constants");
+var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
+var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
+var _LoadingItem = require("./LoadingItem");
+var _emojiPickerLoader = require("./emojiPickerLoader");
+var _excluded = ["emojiProvider"];
+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; })(); }
+var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!_featureGateJsClient.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
+var emojiPicker = null;
+var emojiPickerNew = null;
+var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
+  function EmojiPickerInternal(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmojiPickerInternal);
+    _this = _callSuper(this, EmojiPickerInternal, [props, {}]);
+    (0, _defineProperty2.default)(_this, "state", {
+      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
+    });
+    _ufoExperiences.ufoExperiences['emoji-picker-opened'].start();
+    return _this;
+  }
+  (0, _inherits2.default)(EmojiPickerInternal, _LoadingEmojiComponen);
+  return (0, _createClass2.default)(EmojiPickerInternal, [{
+    key: "asyncLoadComponent",
+    value: function asyncLoadComponent() {
+      var _this2 = this;
+      (0, _emojiPickerLoader.emojiPickerLoader)().then(function (component) {
+        EmojiPickerInternal.AsyncLoadedComponent = component;
+        _this2.setAsyncState(component);
+      });
+    }
+  }, {
+    key: "renderLoading",
+    value: function renderLoading() {
+      var _this3 = this;
+      var item = new _LoadingItem.LoadingItem();
+      var handlePickerRef = function handlePickerRef(ref) {
+        if (_this3.props.onPickerRef) {
+          _this3.props.onPickerRef(ref);
+        }
+      };
+      _ufoExperiences.ufoExperiences['emoji-picker-opened'].markFMP();
+      return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/_react.default.createElement("div", {
+        ref: handlePickerRef,
+        className: (0, _runtime.ax)(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+      }, item.renderItem()) : /*#__PURE__*/_react.default.createElement("div", {
+        ref: handlePickerRef,
+        className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+      }, item.renderItem());
+    }
+  }, {
+    key: "renderLoaded",
+    value: function renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
+      var _this$props = this.props,
+        emojiProvider = _this$props.emojiProvider,
+        otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
+        experiences: [_ufoExperiences.ufoExperiences['emoji-picker-opened']]
+      }, /*#__PURE__*/_react.default.createElement(_EmojiCommonProvider.EmojiCommonProvider, {
+        emojiProvider: loadedEmojiProvider
+      }, /*#__PURE__*/_react.default.createElement(EmojiPickerComponent, otherProps)));
+    }
+  }]);
+}(_LoadingEmojiComponent.default);
+// state initialised with static component to prevent
+// rerender when the module has already been loaded
+(0, _defineProperty2.default)(EmojiPickerInternal, "defaultProps", {
+  size: _constants.defaultEmojiPickerSize
+});