@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -7,26 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _core = require("@emotion/core");
 
 var _react = require("react");
 
+var _reactDom = require("react-dom");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _EmojiRepository = require("../../api/EmojiRepository");
@@ -57,381 +49,505 @@ var _styles = require("./styles");
 
 var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
 
+var _hooks = require("../hooks");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var FREQUENTLY_USED_MAX = 16;
 
-var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPickerComponent, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerComponent);
-
-  function EmojiPickerComponent(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EmojiPickerComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiActive", function (_emojiId, emoji) {
-      if (_this.state.selectedEmoji !== emoji) {
-        _this.setState({
-          selectedEmoji: emoji
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCategoryActivated", function (category) {
-      if (_this.state.activeCategory !== category) {
-        _this.setState({
-          activeCategory: category
-        });
-      }
+var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+      onSelection = _ref.onSelection,
+      onPickerRef = _ref.onPickerRef,
+      hideToneSelector = _ref.hideToneSelector,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      filteredEmojis = _useState2[0],
+      setFilteredEmojis = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      searchEmojis = _useState4[0],
+      setSearchEmojis = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      frequentlyUsedEmojis = _useState6[0],
+      setFrequentlyUsedEmojis = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      query = _useState8[0],
+      setQuery = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      dynamicCategories = _useState10[0],
+      setDynamicCategories = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selectedTone = _useState12[0],
+      setSelectedTone = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      loading = _useState14[0],
+      setLoading = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      uploadSupported = _useState16[0],
+      setUploadSupported = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      uploading = _useState18[0],
+      setUploading = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      selectedEmoji = _useState20[0],
+      setSelectedEmoji = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(null),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      activeCategory = _useState22[0],
+      setActiveCategory = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      disableCategories = _useState24[0],
+      setDisableCategories = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      uploadErrorMessage = _useState26[0],
+      setUploadErrorMessage = _useState26[1];
+
+  var _useState27 = (0, _react.useState)(),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      emojiToDelete = _useState28[0],
+      setEmojiToDelete = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      toneEmoji = _useState30[0],
+      setToneEmoji = _useState30[1];
+
+  var emojiPickerList = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _react.createRef)();
+  }, []);
+  var openTime = (0, _react.useRef)(0);
+  var isMounting = (0, _react.useRef)(true);
+  var didMount = (0, _hooks.useDidMount)();
+  var updateAfterDidMount = (0, _react.useRef)(true);
+  var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
+  var currentUser = (0, _react.useMemo)(function () {
+    return emojiProvider.getCurrentUser();
+  }, [emojiProvider]);
+  var fireAnalytics = (0, _react.useCallback)(function (analyticsEvent) {
+    if (createAnalyticsEvent) {
+      (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
+    }
+  }, [createAnalyticsEvent]);
+  var onEmojiActive = (0, _react.useCallback)(function (emojiId, emoji) {
+    if (!selectedEmoji || selectedEmoji.id !== (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id)) {
+      setSelectedEmoji(emoji);
+    }
+  }, [selectedEmoji]);
+  var onCategoryActivated = (0, _react.useCallback)(function (category) {
+    if (activeCategory !== category) {
+      setActiveCategory(category);
+    }
+  }, [activeCategory]);
+
+  var calculateElapsedTime = function calculateElapsedTime() {
+    return Date.now() - openTime.current;
+  };
+
+  var onUploadSupported = (0, _react.useCallback)(function (supported) {
+    setUploadSupported(supported);
+  }, []);
+  var onDynamicCategoryChange = (0, _react.useCallback)(function (categories) {
+    setDynamicCategories(categories);
+  }, []);
+  var onUploadCancelled = (0, _react.useCallback)(function () {
+    (0, _reactDom.unstable_batchedUpdates)(function () {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCategorySelected", function (categoryId) {
-      var emojiProvider = _this.props.emojiProvider;
-
-      if (!categoryId) {
-        return;
-      }
-
-      emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
-        var disableCategories = _this.state.disableCategories;
-
-        if (!disableCategories) {
-          var selectedEmoji;
+    fireAnalytics((0, _analytics.uploadCancelButton)());
+  }, [fireAnalytics]);
+  var getDynamicCategories = (0, _react.useCallback)(function () {
+    if (!emojiProvider.calculateDynamicCategories) {
+      return Promise.resolve([]);
+    }
 
-          if (emojisInCategory && emojisInCategory.length > 0) {
-            selectedEmoji = (0, _EmojiRepository.getEmojiVariation)(emojisInCategory[0], {
-              skinTone: _this.state.selectedTone
-            });
-          }
+    return emojiProvider.calculateDynamicCategories();
+  }, [emojiProvider]);
+  /**
+   * Calculate and set the new state of the component in response to the list of emoji changing for some reason (a search has returned
+   * or the frequently used emoji have updated.)
+   */
+
+  var setStateAfterEmojiChange = (0, _react.useCallback)(function (_ref2) {
+    var searchQuery = _ref2.searchQuery,
+        emojiToRender = _ref2.emojiToRender,
+        searchEmoji = _ref2.searchEmoji,
+        frequentEmoji = _ref2.frequentEmoji;
+    // Only enable categories for full emoji list (non-search)
+    var disableCategories = !!searchQuery;
+
+    if (!disableCategories && emojiToRender && emojiToRender.length !== filteredEmojis.length) {
+      getDynamicCategories().then(function (categories) {
+        onDynamicCategoryChange(categories);
+      });
+    }
 
-          var emojiPickerList = _this.refs.emojiPickerList;
+    if (emojiToRender && !(0, _typeHelpers.containsEmojiId)(emojiToRender, selectedEmoji)) {
+      (0, _reactDom.unstable_batchedUpdates)(function () {
+        setSelectedEmoji(undefined); // Only enable categories for full emoji list (non-search)
 
-          if (emojiPickerList) {
-            emojiPickerList.reveal(categoryId);
-          }
+        setActiveCategory(null);
+      });
+    }
 
-          _this.setState({
-            activeCategory: categoryId,
-            selectedEmoji: selectedEmoji
-          });
+    (0, _reactDom.unstable_batchedUpdates)(function () {
+      if (emojiToRender) {
+        setFilteredEmojis(emojiToRender);
+      }
 
-          _this.fireAnalytics((0, _analytics.categoryClickedEvent)({
-            category: categoryId
-          }));
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChooserClicked", function () {
-      _this.fireAnalytics((0, _analytics.selectedFileEvent)());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsEvent) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+      if (searchEmoji) {
+        setSearchEmojis(searchEmoji);
+      }
 
-      if (createAnalyticsEvent) {
-        (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
+      if (frequentEmoji) {
+        setFrequentlyUsedEmojis(frequentEmoji);
       }
+
+      setLoading(false);
+      setDisableCategories(disableCategories);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateElapsedTime", function () {
-      return Date.now() - _this.openTime;
+  }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
+  var onFrequentEmojiResult = (0, _react.useCallback)(function (frequentEmoji) {
+    // change the category of each of the featured emoji
+    var recategorised = frequentEmoji.map(function (emoji) {
+      var clone = JSON.parse(JSON.stringify(emoji));
+      clone.category = _constants.frequentCategory;
+      return clone;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadSupported", function (supported) {
-      _this.setState({
-        uploadSupported: supported
-      });
+    setStateAfterEmojiChange({
+      frequentEmoji: recategorised
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearch", function (query) {
-      var options = {
-        skinTone: _this.state.selectedTone
-      };
+  }, [setStateAfterEmojiChange]);
+  var onSearchResult = (0, _react.useCallback)(function (searchResults) {
+    var frequentlyUsedEmoji = frequentlyUsedEmojis || [];
+    var searchQuery = searchResults.query || '';
+    /**
+     * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
+     * also include a special category of most frequently used emoji (if there are any). This method decides if we are in this 'no search'
+     * state and appends the frequent emoji if necessary.
+     */
 
-      if (query !== _this.state.query) {
-        _analytics.ufoExperiences['emoji-searched'].start();
+    var emojiToRender;
 
-        _analytics.ufoExperiences['emoji-searched'].addMetadata({
-          queryLength: query.length,
-          source: 'picker'
-        });
-      }
+    if (!frequentlyUsedEmoji.length || query) {
+      emojiToRender = searchResults.emojis;
+    } else {
+      emojiToRender = [].concat((0, _toConsumableArray2.default)(searchResults.emojis), (0, _toConsumableArray2.default)(frequentlyUsedEmoji));
+    }
 
-      _this.updateEmojis(query, options);
+    setStateAfterEmojiChange({
+      searchQuery: searchQuery,
+      emojiToRender: emojiToRender,
+      searchEmoji: searchResults.emojis
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearchResult", function (searchResults) {
-      var frequentlyUsedEmoji = _this.state.frequentlyUsedEmojis || [];
-      var searchQuery = searchResults.query || '';
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange]);
+  var onProviderChange = (0, _react.useMemo)(function () {
+    return {
+      result: onSearchResult
+    };
+  }, [onSearchResult]);
+  /**
+   * Updates the emoji displayed by the picker. If there is no query specified then we expect to retrieve all emoji for display,
+   * by category, in the picker. This differs from when there is a query in which case we expect to receive a sorted result matching
+   * the search.
+   */
+
+  var updateEmojis = (0, _react.useCallback)(function (query, options) {
+    // if the query is empty then we want the emoji to be in service defined order, unless specified otherwise
+    // and we want emoji for the 'frequently used' category to be refreshed as well.
+    if (!query) {
+      if (!options) {
+        options = {};
+      }
 
-      var emojiToRender = _this.buildQuerySpecificEmojiList(searchQuery, searchResults.emojis, frequentlyUsedEmoji);
+      if (!options.sort) {
+        options.sort = _types.SearchSort.None;
+      } // take a copy of search options so that the frequently used can be limited to 16 without affecting the full emoji query
 
-      if (searchQuery !== _this.state.query) {
-        _this.fireAnalytics((0, _analytics.pickerSearchedEvent)({
-          queryLength: searchQuery.length,
-          numMatches: emojiToRender.length
-        }));
 
-        _analytics.ufoExperiences['emoji-searched'].success({
-          metadata: {
-            emojisLength: emojiToRender.length
-          }
-        });
-      }
-
-      _this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFrequentEmojiResult", function (frequentEmoji) {
-      var _this$state = _this.state,
-          query = _this$state.query,
-          searchEmojis = _this$state.searchEmojis; // change the category of each of the featured emoji
-
-      var recategorised = frequentEmoji.map(function (emoji) {
-        var clone = JSON.parse(JSON.stringify(emoji));
-        clone.category = _constants.frequentCategory;
-        return clone;
+      var frequentOptions = _objectSpread(_objectSpread({}, options), {}, {
+        sort: _types.SearchSort.None,
+        limit: FREQUENTLY_USED_MAX
       });
 
-      var emojiToRender = _this.buildQuerySpecificEmojiList(query, searchEmojis, recategorised);
+      emojiProvider.getFrequentlyUsed(frequentOptions).then(onFrequentEmojiResult);
+    }
 
-      _this.setStateAfterEmojiChange(query, emojiToRender, searchEmojis, recategorised);
+    emojiProvider.filter(query, options);
+  }, [emojiProvider, onFrequentEmojiResult]);
+  var onToneSelected = (0, _react.useCallback)(function (toneValue) {
+    emojiProvider.setSelectedTone(toneValue);
+    updateEmojis(query, {
+      skinTone: toneValue
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDynamicCategoryChange", function (categories) {
-      _this.setState({
-        dynamicCategories: categories
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onProviderChange", {
-      result: _this.onSearchResult
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
-      _this.setState({
-        selectedTone: toneValue
-      });
-
-      _this.props.emojiProvider.setSelectedTone(toneValue);
+    setSelectedTone(toneValue);
+  }, [emojiProvider, query, updateEmojis]);
+  var onToneSelectorCancelled = (0, _react.useCallback)(function () {
+    fireAnalytics((0, _analytics.toneSelectorClosedEvent)());
+  }, [fireAnalytics]);
+  var onSelectWrapper = (0, _react.useCallback)(function (emojiId, emoji, event) {
+    if (onSelection) {
+      onSelection(emojiId, emoji, event);
+      fireAnalytics((0, _analytics.pickerClickedEvent)({
+        duration: calculateElapsedTime(),
+        emojiId: (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) || '',
+        category: emoji && emoji.category || '',
+        type: emoji && emoji.type || '',
+        queryLength: query && query.length || 0
+      }));
+    }
+  }, [fireAnalytics, onSelection, query]);
+  var onCategorySelected = (0, _react.useCallback)(function (categoryId) {
+    if (!categoryId) {
+      return;
+    }
 
-      var _this$state$query = _this.state.query,
-          query = _this$state$query === void 0 ? '' : _this$state$query;
+    emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
+      if (!disableCategories) {
+        var newSelectedEmoji;
 
-      _this.updateEmojis(query, {
-        skinTone: toneValue
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelectorCancelled", function () {
-      _this.fireAnalytics((0, _analytics.toneSelectorClosedEvent)());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateEmojis", function (query, options) {
-      // if the query is empty then we want the emoji to be in service defined order, unless specified otherwise
-      // and we want emoji for the 'frequently used' category to be refreshed as well.
-      if (!query) {
-        if (!options) {
-          options = {};
+        if (emojisInCategory && emojisInCategory.length > 0) {
+          newSelectedEmoji = (0, _EmojiRepository.getEmojiVariation)(emojisInCategory[0], {
+            skinTone: selectedTone
+          });
         }
 
-        if (!options.sort) {
-          options.sort = _types.SearchSort.None;
-        } // take a copy of search options so that the frequently used can be limited to 16 without affecting the full emoji query
-
+        if (emojiPickerList.current) {
+          emojiPickerList.current.reveal(categoryId);
+        }
 
-        var frequentOptions = _objectSpread(_objectSpread({}, options), {}, {
-          sort: _types.SearchSort.None,
-          limit: FREQUENTLY_USED_MAX
+        (0, _reactDom.unstable_batchedUpdates)(function () {
+          setActiveCategory(categoryId);
+          setSelectedEmoji(newSelectedEmoji);
         });
-
-        _this.props.emojiProvider.getFrequentlyUsed(frequentOptions).then(_this.onFrequentEmojiResult);
+        fireAnalytics((0, _analytics.categoryClickedEvent)({
+          category: categoryId
+        }));
       }
-
-      _this.props.emojiProvider.filter(query, options);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenUpload", function () {
-      // Prime upload token so it's ready when the user adds
-      var emojiProvider = _this.props.emojiProvider;
-
-      if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
-        emojiProvider.prepareForUpload();
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  var recordUsageOnSelection = (0, _react.useMemo)(function () {
+    return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
+      return fireAnalytics(analytic('picker'));
+    });
+  }, [emojiProvider, fireAnalytics, onSelectWrapper]);
+  var formattedErrorMessage = (0, _react.useMemo)(function () {
+    return uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+  }, [uploadErrorMessage]);
+  var emojiContextValue = (0, _react.useMemo)(function () {
+    return {
+      emoji: {
+        emojiProvider: emojiProvider
       }
+    };
+  }, [emojiProvider]);
+  var onFileChooserClicked = (0, _react.useCallback)(function () {
+    fireAnalytics((0, _analytics.selectedFileEvent)());
+  }, [fireAnalytics]);
+  var onSearch = (0, _react.useCallback)(function (searchQuery) {
+    var options = {
+      skinTone: selectedTone
+    };
 
-      _this.setState({
-        uploadErrorMessage: undefined,
-        uploading: true
-      });
-
-      _this.fireAnalytics((0, _analytics.uploadBeginButton)());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadEmoji", function (upload, retry) {
-      var emojiProvider = _this.props.emojiProvider;
+    if (query) {
+      _analytics.ufoExperiences['emoji-searched'].start();
 
-      _this.fireAnalytics((0, _analytics.uploadConfirmButton)({
-        retry: retry
-      }));
+      _analytics.ufoExperiences['emoji-searched'].addMetadata({
+        queryLength: query.length,
+        source: 'picker'
+      });
+    }
 
-      var errorSetter = function errorSetter(message) {
-        _this.setState({
-          uploadErrorMessage: message
-        });
-      };
+    if (searchQuery !== query) {
+      setQuery(searchQuery);
+    }
 
-      var onSuccess = function onSuccess(emojiDescription) {
-        _this.setState({
-          activeCategory: _constants.customCategory,
-          selectedEmoji: emojiDescription,
-          uploading: false
-        }); // this.loadEmoji(emojiProvider, emojiDescription);
+    updateEmojis(query, options);
+  }, [query, selectedTone, updateEmojis]);
+  var onOpenUpload = (0, _react.useCallback)(function () {
+    // Prime upload token so it's ready when the user adds
+    if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
 
+    (0, _reactDom.unstable_batchedUpdates)(function () {
+      setUploadErrorMessage(undefined);
+      setUploading(true);
+    });
+    fireAnalytics((0, _analytics.uploadBeginButton)());
+  }, [emojiProvider, fireAnalytics]);
+  var scrollToEndOfList = (0, _react.useCallback)(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-        _this.scrollToEndOfList();
-      };
+    if (emojiPickerList.current) {
+      // Wait a tick to ensure repaint and updated height for picker list
+      window.setTimeout(function () {
+        var _emojiPickerList$curr;
 
-      (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, _this.fireAnalytics, retry);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTriggerDelete", function (_emojiId, emoji) {
-      _this.fireAnalytics((0, _analytics.deleteBeginEvent)({
-        emojiId: _emojiId.id
-      }));
+        (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
+      }, 0);
+    }
+  }, [emojiPickerList]);
+  var onUploadEmoji = (0, _react.useCallback)(function (upload, retry) {
+    fireAnalytics((0, _analytics.uploadConfirmButton)({
+      retry: retry
+    }));
+
+    var errorSetter = function errorSetter(message) {
+      setUploadErrorMessage(message);
+    };
 
-      _this.setState({
-        emojiToDelete: emoji
+    var onSuccess = function onSuccess(emojiDescription) {
+      (0, _reactDom.unstable_batchedUpdates)(function () {
+        setActiveCategory(_constants.customCategory);
+        setSelectedEmoji(emojiDescription);
+        setUploading(false);
       });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCloseDelete", function () {
-      var emojiToDelete = _this.state.emojiToDelete;
+      scrollToEndOfList();
+    };
 
-      _this.fireAnalytics((0, _analytics.deleteCancelEvent)({
-        emojiId: emojiToDelete && emojiToDelete.id
+    (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
+  }, [emojiProvider, fireAnalytics, scrollToEndOfList]);
+  var onTriggerDelete = (0, _react.useCallback)(function (_emojiId, emoji) {
+    if (_emojiId) {
+      fireAnalytics((0, _analytics.deleteBeginEvent)({
+        emojiId: _emojiId.id
       }));
+      setEmojiToDelete(emoji);
+    }
+  }, [fireAnalytics]);
+  var onCloseDelete = (0, _react.useCallback)(function () {
+    fireAnalytics((0, _analytics.deleteCancelEvent)({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    setEmojiToDelete(undefined);
+  }, [emojiToDelete, fireAnalytics]);
+  var onDeleteEmoji = (0, _react.useCallback)(function (emoji) {
+    fireAnalytics((0, _analytics.deleteConfirmEvent)({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    return emojiProvider.deleteSiteEmoji(emoji).then(function (success) {
+      if (success) {
+        updateEmojis(query, {
+          skinTone: selectedTone
+        });
+      }
 
-      _this.setState({
-        emojiToDelete: undefined
-      });
+      return success;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeleteEmoji", function (emoji) {
-      var _this$state2 = _this.state,
-          emojiToDelete = _this$state2.emojiToDelete,
-          query = _this$state2.query,
-          selectedTone = _this$state2.selectedTone;
-
-      _this.fireAnalytics((0, _analytics.deleteConfirmEvent)({
-        emojiId: emojiToDelete && emojiToDelete.id
-      }));
+  }, [emojiProvider, emojiToDelete, fireAnalytics, query, selectedTone, updateEmojis]);
+  var onComponentDidMount = (0, _react.useCallback)(function () {
+    emojiProvider.subscribe(onProviderChange);
+    onSearch(query);
 
-      return _this.props.emojiProvider.deleteSiteEmoji(emoji).then(function (success) {
-        if (success) {
-          _this.updateEmojis(query, {
-            skinTone: selectedTone
-          });
-        }
+    if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+      emojiProvider.isUploadSupported().then(onUploadSupported);
+    }
 
-        return success;
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToEndOfList", function () {
-      var emojiPickerList = _this.refs.emojiPickerList;
+    if (!hideToneSelector) {
+      var _toneEmoji = (0, _filters.getToneEmoji)(emojiProvider);
 
-      if (typeof window === 'undefined') {
-        return;
+      if ((0, _typeHelpers.isPromise)(_toneEmoji)) {
+        _toneEmoji.then(function (emoji) {
+          return setToneEmoji(emoji);
+        });
+      } else if (_toneEmoji === undefined || (0, _typeHelpers.isEmojiDescription)(_toneEmoji)) {
+        setToneEmoji(_toneEmoji);
       }
+    }
+  }, [emojiProvider, hideToneSelector, onProviderChange, onSearch, onUploadSupported, query]);
 
-      if (emojiPickerList) {
-        // Wait a tick to ensure repaint and updated height for picker list
-        window.setTimeout(function () {
-          emojiPickerList.scrollToBottom();
-        }, 0);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadCancelled", function () {
-      _this.setState({
-        uploading: false,
-        uploadErrorMessage: undefined
-      });
+  if (isMounting.current) {
+    // componentWillMount equivalent
+    _analytics.ufoExperiences['emoji-picker-opened'].success();
 
-      _this.fireAnalytics((0, _analytics.uploadCancelButton)());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePickerRef", function (ref) {
-      if (_this.props.onPickerRef) {
-        _this.props.onPickerRef(ref);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectWrapper", function (emojiId, emoji, event) {
-      var onSelection = _this.props.onSelection;
-      var query = _this.state.query;
-
-      if (onSelection) {
-        onSelection(emojiId, emoji, event);
-
-        _this.fireAnalytics((0, _analytics.pickerClickedEvent)({
-          duration: _this.calculateElapsedTime(),
-          emojiId: emojiId.id || '',
-          category: emoji && emoji.category || '',
-          type: emoji && emoji.type || '',
-          queryLength: query && query.length || 0
-        }));
-      }
-    });
-    var _emojiProvider = props.emojiProvider,
-        hideToneSelector = props.hideToneSelector;
-    _this.state = {
-      filteredEmojis: [],
-      searchEmojis: [],
-      frequentlyUsedEmojis: [],
-      query: '',
-      dynamicCategories: [],
-      selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
-      loading: true,
-      uploadSupported: false,
-      uploading: false
-    };
-    _this.openTime = 0;
-    return _this;
+    openTime.current = Date.now();
+    fireAnalytics((0, _analytics.openedPickerEvent)());
+    isMounting.current = false;
   }
 
-  (0, _createClass2.default)(EmojiPickerComponent, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      _analytics.ufoExperiences['emoji-picker-opened'].success();
-
-      this.openTime = Date.now();
-      this.fireAnalytics((0, _analytics.openedPickerEvent)());
+  (0, _react.useEffect)(function () {
+    // componentDidMount logic
+    if (didMount && updateAfterDidMount.current) {
+      onComponentDidMount();
+      updateAfterDidMount.current = false;
+    }
+  }, [didMount, onComponentDidMount]);
+  (0, _react.useEffect)(function () {
+    previousEmojiProvider.current.unsubscribe(onProviderChange);
+    previousEmojiProvider.current = emojiProvider;
+    emojiProvider.subscribe(onProviderChange);
+
+    if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+      emojiProvider.isUploadSupported().then(onUploadSupported);
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          emojiProvider = _this$props.emojiProvider,
-          hideToneSelector = _this$props.hideToneSelector;
-      emojiProvider.subscribe(this.onProviderChange);
-      this.onSearch(this.state.query);
-
-      if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
-        emojiProvider.isUploadSupported().then(this.onUploadSupported);
-      }
-
-      if (!hideToneSelector) {
-        var toneEmoji = (0, _filters.getToneEmoji)(emojiProvider);
 
-        if ((0, _typeHelpers.isPromise)(toneEmoji)) {
-          toneEmoji.then(function (emoji) {
-            return _this2.setState({
-              toneEmoji: emoji
-            });
-          });
-        } else if (toneEmoji === undefined || (0, _typeHelpers.isEmojiDescription)(toneEmoji)) {
-          this.setState({
-            toneEmoji: toneEmoji
-          });
-        }
+    return function () {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange, onUploadSupported]);
+  (0, _react.useEffect)(function () {
+    // We changed provider which means we subscribed to filter results for a new subscriber.
+    // So we refresh the emoji display with onSearch and we do it here, after the new props have
+    // been set since onSearch leads to filter being called on the current emojiProvider.
+    // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
+    // an emojiProvider we have already unsubscribed from)
+    onSearch(query);
+  }, [emojiProvider, onSearch, query]);
+  (0, _react.useEffect)(function () {
+    // Fire analytics event whenever query changes
+    fireAnalytics((0, _analytics.pickerSearchedEvent)({
+      queryLength: query.length,
+      numMatches: filteredEmojis.length
+    }));
+
+    _analytics.ufoExperiences['emoji-searched'].success({
+      metadata: {
+        emojisLength: filteredEmojis.length
       }
+    });
+  }, [filteredEmojis.length, fireAnalytics, query]);
+  (0, _react.useEffect)(function () {
+    if (!frequentlyUsedEmojis.length || query) {
+      setFilteredEmojis(searchEmojis);
+    } else {
+      setFilteredEmojis([].concat((0, _toConsumableArray2.default)(searchEmojis), (0, _toConsumableArray2.default)(frequentlyUsedEmojis)));
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var emojiProvider = this.props.emojiProvider;
-      emojiProvider.unsubscribe(this.onProviderChange);
-      this.fireAnalytics((0, _analytics.closedPickerEvent)({
-        duration: this.calculateElapsedTime()
+  }, [frequentlyUsedEmojis, query, searchEmojis]);
+  (0, _react.useEffect)(function () {
+    // Fire analytics on component unmount
+    return function () {
+      fireAnalytics((0, _analytics.closedPickerEvent)({
+        duration: calculateElapsedTime()
       }));
 
       _analytics.ufoExperiences['emoji-picker-opened'].abort({
@@ -447,185 +563,57 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           reason: 'unmount'
         }
       });
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var prevEmojiProvider = this.props.emojiProvider;
-      var nextEmojiProvider = nextProps.emojiProvider;
-
-      if (prevEmojiProvider !== nextEmojiProvider) {
-        if ((0, _EmojiResource.supportsUploadFeature)(nextEmojiProvider)) {
-          nextEmojiProvider.isUploadSupported().then(this.onUploadSupported);
-        }
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var prevEmojiProvider = prevProps.emojiProvider;
-      var currentEmojiProvider = this.props.emojiProvider;
-
-      if (prevEmojiProvider !== currentEmojiProvider) {
-        prevEmojiProvider.unsubscribe(this.onProviderChange);
-        currentEmojiProvider.subscribe(this.onProviderChange); // We changed provider which means we subscribed to filter results for a new subscriber.
-        // So we refresh the emoji display with onSearch and we do it here, after the new props have
-        // been set since onSearch leads to filter being called on the current emojiProvider.
-        // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
-        // an emojiProvider we have already unsubscribed from)
-
-        this.onSearch(this.state.query);
-      }
-    }
-  }, {
-    key: "buildQuerySpecificEmojiList",
-    value:
-    /**
-     * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
-     * also include a special category of most frequently used emoji (if there are any). This method decides if we are in this 'no search'
-     * state and appends the frequent emoji if necessary.
-     *
-     * @param searchEmoji the emoji last received from the EmojiRepository after a search (may be empty)
-     * @param frequentEmoji the frequently used emoji last received from the EmojiRepository (may be empty)
-     */
-    function buildQuerySpecificEmojiList(query, searchEmoji, frequentEmoji) {
-      // If there are no frequent emoji, or if there was a search query then we want to take the search result exactly as is.
-      if (!frequentEmoji.length || query) {
-        return searchEmoji;
-      }
-
-      return [].concat((0, _toConsumableArray2.default)(searchEmoji), (0, _toConsumableArray2.default)(frequentEmoji));
-    }
-    /**
-     * Calculate and set the new state of the component in response to the list of emoji changing for some reason (a search has returned
-     * or the frequently used emoji have updated.)
-     */
-
-  }, {
-    key: "setStateAfterEmojiChange",
-    value: function setStateAfterEmojiChange(query, emojiToRender, searchEmoji, frequentEmoji) {
-      var _this3 = this;
-
-      var filteredEmojis = this.state.filteredEmojis; // Only enable categories for full emoji list (non-search)
-
-      var disableCategories = !!query;
-
-      if (!disableCategories && emojiToRender.length !== filteredEmojis.length) {
-        this.getDynamicCategories().then(function (categories) {
-          _this3.onDynamicCategoryChange(categories);
-        });
-      }
-
-      var selectedEmoji;
-      var activeCategory;
-
-      if ((0, _typeHelpers.containsEmojiId)(emojiToRender, this.state.selectedEmoji)) {
-        // Keep existing emoji selected if still in results
-        selectedEmoji = this.state.selectedEmoji;
-        activeCategory = this.state.activeCategory;
-      } else {
-        selectedEmoji = undefined; // Only enable categories for full emoji list (non-search)
-
-        activeCategory = undefined;
-      }
-
-      this.setState({
-        filteredEmojis: emojiToRender,
-        searchEmojis: searchEmoji,
-        frequentlyUsedEmojis: frequentEmoji,
-        selectedEmoji: selectedEmoji,
-        activeCategory: activeCategory,
-        disableCategories: disableCategories,
-        query: query,
-        loading: false
-      });
-    }
-  }, {
-    key: "getDynamicCategories",
-    value: function getDynamicCategories() {
-      if (!this.props.emojiProvider.calculateDynamicCategories) {
-        return Promise.resolve([]);
-      }
-
-      return this.props.emojiProvider.calculateDynamicCategories();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var emojiProvider = this.props.emojiProvider;
-      var _this$state3 = this.state,
-          activeCategory = _this$state3.activeCategory,
-          disableCategories = _this$state3.disableCategories,
-          dynamicCategories = _this$state3.dynamicCategories,
-          filteredEmojis = _this$state3.filteredEmojis,
-          loading = _this$state3.loading,
-          query = _this$state3.query,
-          selectedEmoji = _this$state3.selectedEmoji,
-          selectedTone = _this$state3.selectedTone,
-          toneEmoji = _this$state3.toneEmoji,
-          emojiToDelete = _this$state3.emojiToDelete,
-          uploading = _this$state3.uploading,
-          uploadErrorMessage = _this$state3.uploadErrorMessage,
-          uploadSupported = _this$state3.uploadSupported;
-      var recordUsageOnSelection = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
-        return _this4.fireAnalytics(analytic('picker'));
-      });
-      var formattedErrorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      var picker = (0, _core.jsx)(_LegacyEmojiContextProvider.default, {
-        emojiContextValue: emojiContextValue
-      }, (0, _core.jsx)("div", {
-        css: _styles.emojiPicker,
-        ref: this.handlePickerRef,
-        "data-emoji-picker-container": true
-      }, (0, _core.jsx)(_CategorySelector.default, {
-        activeCategoryId: activeCategory,
-        dynamicCategories: dynamicCategories,
-        disableCategories: disableCategories,
-        onCategorySelected: this.onCategorySelected
-      }), (0, _core.jsx)(_EmojiPickerList.default, {
-        emojis: filteredEmojis,
-        currentUser: emojiProvider.getCurrentUser(),
-        onEmojiSelected: recordUsageOnSelection,
-        onEmojiActive: this.onEmojiActive,
-        onEmojiDelete: this.onTriggerDelete,
-        onCategoryActivated: this.onCategoryActivated,
-        onSearch: this.onSearch,
-        query: query,
-        selectedTone: selectedTone,
-        loading: loading,
-        ref: "emojiPickerList",
-        initialUploadName: query,
-        onToneSelected: this.onToneSelected,
-        onToneSelectorCancelled: this.onToneSelectorCancelled,
-        toneEmoji: toneEmoji,
-        uploading: uploading,
-        emojiToDelete: emojiToDelete,
-        uploadErrorMessage: formattedErrorMessage,
-        uploadEnabled: uploadSupported && !uploading,
-        onUploadEmoji: this.onUploadEmoji,
-        onUploadCancelled: this.onUploadCancelled,
-        onDeleteEmoji: this.onDeleteEmoji,
-        onCloseDelete: this.onCloseDelete,
-        onFileChooserClicked: this.onFileChooserClicked,
-        onOpenUpload: this.onOpenUpload
-      }), (0, _core.jsx)(_EmojiPickerFooter.default, {
-        selectedEmoji: selectedEmoji,
-        isUploading: uploading
-      })));
-      return picker;
-    }
-  }]);
-  return EmojiPickerComponent;
-}(_react.PureComponent);
-
-exports.default = EmojiPickerComponent;
-(0, _defineProperty2.default)(EmojiPickerComponent, "defaultProps", {
-  onSelection: function onSelection() {}
-});
+    };
+  }, [fireAnalytics]);
+  (0, _react.useEffect)(function () {
+    // Unsubscribe emojiProvider on component unmount
+    return function () {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  var showPreview = selectedEmoji && !uploading;
+  return (0, _core.jsx)(_LegacyEmojiContextProvider.default, {
+    emojiContextValue: emojiContextValue
+  }, (0, _core.jsx)("div", {
+    css: (0, _styles.emojiPicker)(showPreview),
+    ref: onPickerRef,
+    "data-emoji-picker-container": true
+  }, (0, _core.jsx)(_CategorySelector.default, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), (0, _core.jsx)(_EmojiPickerList.default, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: uploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload
+  }), showPreview && (0, _core.jsx)(_EmojiPickerFooter.default, {
+    selectedEmoji: selectedEmoji
+  })));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);
+
+exports.default = _default;