@atlaskit/emoji 69.0.1 → 69.0.3

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

@@ -0,0 +1,574 @@
+/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./EmojiPickerComponent.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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 _colors = require("@atlaskit/theme/colors");
+var _reactDom = require("react-dom");
+var _reactIntlNext = require("react-intl-next");
+var _EmojiRepository = require("../../../api/EmojiRepository");
+var _EmojiResource = require("../../../api/EmojiResource");
+var _constants = require("../../../util/constants");
+var _typeHelpers = require("../../../util/type-helpers");
+var _types = require("../../../types");
+var _filters = require("../../../util/filters");
+var _UploadEmoji = require("../../common/UploadEmoji");
+var _RecordSelectionDefault = require("../../common/RecordSelectionDefault");
+var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
+var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
+var _EmojiPickerList = require("../../picker/EmojiPickerList");
+var _analytics = require("../../../util/analytics");
+var _useEmoji2 = require("../../../hooks/useEmoji");
+var _useIsMounted = require("../../../hooks/useIsMounted");
+var _i18n = require("../../i18n");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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 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; }
+var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+var emojiPickerHeight = 295;
+var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+var emojiPickerWidth = 350;
+var emojiPickerMinHeight = 260;
+var heightOffset = 80;
+var emojiPicker = null;
+var withPreviewHeight = {
+  small: "_4t3ivixp _1tkegx0z",
+  medium: "_4t3i2300 _1tke5x59",
+  large: "_4t3ixt2k _1tke1pna"
+};
+var withoutPreviewHeight = {
+  small: "_4t3iaq3k _1tkegx0z",
+  medium: "_4t3iixjv _1tke5x59",
+  large: "_4t3i1ckg _1tke1pna"
+};
+var FREQUENTLY_USED_MAX = 16;
+var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
+  var onSelection = _ref.onSelection,
+    onPickerRef = _ref.onPickerRef,
+    hideToneSelector = _ref.hideToneSelector,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.defaultEmojiPickerSize : _ref$size;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEmoji = (0, _useEmoji2.useEmoji)(),
+    emojiProvider = _useEmoji.emojiProvider,
+    isUploadSupported = _useEmoji.isUploadSupported;
+  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),
+    uploading = _useState16[0],
+    setUploading = _useState16[1];
+  var _useState17 = (0, _react.useState)(),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    selectedEmoji = _useState18[0],
+    setSelectedEmoji = _useState18[1];
+  var _useState19 = (0, _react.useState)(null),
+    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+    activeCategory = _useState20[0],
+    setActiveCategory = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
+    _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+    disableCategories = _useState22[0],
+    setDisableCategories = _useState22[1];
+  var _useState23 = (0, _react.useState)(),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    uploadErrorMessage = _useState24[0],
+    setUploadErrorMessage = _useState24[1];
+  var _useState25 = (0, _react.useState)(),
+    _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+    emojiToDelete = _useState26[0],
+    setEmojiToDelete = _useState26[1];
+  var _useState27 = (0, _react.useState)(),
+    _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+    toneEmoji = _useState28[0],
+    setToneEmoji = _useState28[1];
+  var emojiPickerList = (0, _react.useMemo)(function () {
+    return (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? /*#__PURE__*/(0, _react.createRef)() : /*#__PURE__*/(0, _react.createRef)();
+  }, []);
+  var openTime = (0, _react.useRef)(0);
+  var isMounting = (0, _react.useRef)(true);
+  var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
+  var currentUser = (0, _react.useMemo)(function () {
+    return emojiProvider.getCurrentUser();
+  }, [emojiProvider]);
+  var isMounted = (0, _useIsMounted.useIsMounted)();
+  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 onDynamicCategoryChange = (0, _react.useCallback)(function (categories) {
+    setDynamicCategories(categories);
+  }, []);
+  var onUploadCancelled = (0, _react.useCallback)(function () {
+    (0, _reactDom.unstable_batchedUpdates)(function () {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    });
+    fireAnalytics((0, _analytics.uploadCancelButton)());
+  }, [fireAnalytics]);
+  var getDynamicCategories = (0, _react.useCallback)(function () {
+    if (!emojiProvider.calculateDynamicCategories) {
+      return Promise.resolve([]);
+    }
+    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);
+      });
+    }
+    if (emojiToRender && !(0, _typeHelpers.containsEmojiId)(emojiToRender, selectedEmoji)) {
+      (0, _reactDom.unstable_batchedUpdates)(function () {
+        setSelectedEmoji(undefined);
+      });
+    }
+    (0, _reactDom.unstable_batchedUpdates)(function () {
+      if (emojiToRender) {
+        setFilteredEmojis(emojiToRender);
+      }
+      if (searchEmoji) {
+        setSearchEmojis(searchEmoji);
+      }
+      if (frequentEmoji) {
+        setFrequentlyUsedEmojis(frequentEmoji);
+      }
+      setLoading(false);
+      setDisableCategories(disableCategories);
+    });
+  }, [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;
+    });
+    setStateAfterEmojiChange({
+      frequentEmoji: recategorised
+    });
+  }, [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.
+     */
+    var emojiToRender;
+    if (!frequentlyUsedEmoji.length || query) {
+      emojiToRender = searchResults.emojis;
+    } else {
+      emojiToRender = [].concat((0, _toConsumableArray2.default)(searchResults.emojis), (0, _toConsumableArray2.default)(frequentlyUsedEmoji));
+    }
+    setStateAfterEmojiChange({
+      searchQuery: searchQuery,
+      emojiToRender: emojiToRender,
+      searchEmoji: searchResults.emojis
+    });
+    fireAnalytics((0, _analytics.pickerSearchedEvent)({
+      queryLength: searchQuery.length,
+      numMatches: searchResults.emojis.length
+    }));
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
+  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 = {};
+      }
+      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
+      var frequentOptions = _objectSpread(_objectSpread({}, options), {}, {
+        sort: _types.SearchSort.None,
+        limit: FREQUENTLY_USED_MAX
+      });
+      emojiProvider.getFrequentlyUsed(frequentOptions).then(onFrequentEmojiResult);
+    }
+    emojiProvider.filter(query, options);
+  }, [emojiProvider, onFrequentEmojiResult]);
+  var onToneSelected = (0, _react.useCallback)(function (toneValue) {
+    emojiProvider.setSelectedTone(toneValue);
+    updateEmojis(query, {
+      skinTone: 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;
+    }
+    emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
+      if (!disableCategories) {
+        var newSelectedEmoji;
+        if (emojisInCategory && emojisInCategory.length > 0) {
+          newSelectedEmoji = (0, _EmojiRepository.getEmojiVariation)(emojisInCategory[0], {
+            skinTone: selectedTone
+          });
+        }
+        if (emojiPickerList.current) {
+          emojiPickerList.current.reveal(categoryId);
+        }
+        (0, _reactDom.unstable_batchedUpdates)(function () {
+          setActiveCategory(categoryId);
+          setSelectedEmoji(newSelectedEmoji);
+        });
+        fireAnalytics((0, _analytics.categoryClickedEvent)({
+          category: categoryId
+        }));
+      }
+    });
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  var recordUsageOnSelection = (0, _react.useMemo)(function () {
+    return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
+      return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
+    });
+  }, [emojiProvider, fireAnalytics, onSelectWrapper]);
+  var formattedErrorMessage = (0, _react.useMemo)(function () {
+    return uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+  }, [uploadErrorMessage]);
+  var onFileChooserClicked = (0, _react.useCallback)(function () {
+    fireAnalytics((0, _analytics.selectedFileEvent)());
+  }, [fireAnalytics]);
+  var scrollToTopOfList = (0, _react.useCallback)(function () {
+    var _emojiPickerList$curr;
+    (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 || _emojiPickerList$curr.scrollToTop();
+  }, [emojiPickerList]);
+  var onSearch = (0, _react.useCallback)(function (searchQuery) {
+    var options = {
+      skinTone: selectedTone,
+      source: _types.SearchSourceTypes.PICKER
+    };
+    if (searchQuery !== query) {
+      setQuery(searchQuery);
+    }
+    updateEmojis(searchQuery, options);
+    if (filteredEmojis.length > 0) {
+      // scroll to top when search, which is search results section
+      scrollToTopOfList();
+    }
+  }, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
+  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 scrollToUploadedEmoji = (0, _react.useCallback)(function (emojiDescription) {
+    if (emojiPickerList.current) {
+      // Wait a tick to ensure repaint and updated height for picker list
+      window.setTimeout(function () {
+        var _emojiPickerList$curr2;
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 || _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
+      }, 0);
+    }
+  }, [emojiPickerList]);
+  var onUploadEmoji = (0, _react.useCallback)(function (upload, retry) {
+    fireAnalytics((0, _analytics.uploadConfirmButton)({
+      retry: retry
+    }));
+    var errorSetter = function errorSetter(message) {
+      setUploadErrorMessage(message);
+    };
+    var onSuccess = function onSuccess(emojiDescription) {
+      (0, _reactDom.unstable_batchedUpdates)(function () {
+        setActiveCategory(_constants.customCategory);
+        setSelectedEmoji(emojiDescription);
+        setUploading(false);
+      });
+      scrollToUploadedEmoji(emojiDescription);
+    };
+    (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
+  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
+  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
+        });
+      }
+      return success;
+    });
+  }, [emojiProvider, emojiToDelete, fireAnalytics, query, selectedTone, updateEmojis]);
+  var onComponentDidMount = (0, _react.useCallback)(function () {
+    emojiProvider.subscribe(onProviderChange);
+    onSearch(query);
+    if (!hideToneSelector) {
+      var _toneEmoji = (0, _filters.getToneEmoji)(emojiProvider);
+      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, query]);
+  if (isMounting.current) {
+    // componentWillMount equivalent
+    _analytics.ufoExperiences['emoji-picker-opened'].success();
+    openTime.current = Date.now();
+    fireAnalytics((0, _analytics.openedPickerEvent)());
+    isMounting.current = false;
+  }
+
+  // stop all key propagation to other event listeners
+  var suppressKeyPress = function suppressKeyPress(e) {
+    e.stopPropagation();
+    // We prevent default for enter keypresses
+    // since products like Bitbucket might have parent forms
+    // that listen for keydown events to trigger form submission
+    // https://product-fabric.atlassian.net/browse/ED-19532
+    if (e.key === _constants.KeyboardKeys.Enter) {
+      e.preventDefault();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    // componentDidMount logic
+    if (!isMounted) {
+      onComponentDidMount();
+    }
+  }, [onComponentDidMount, isMounted]);
+  (0, _react.useEffect)(function () {
+    previousEmojiProvider.current.unsubscribe(onProviderChange);
+    previousEmojiProvider.current = emojiProvider;
+    emojiProvider.subscribe(onProviderChange);
+    return function () {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  (0, _react.useEffect)(function () {
+    if (!frequentlyUsedEmojis.length || query) {
+      setFilteredEmojis(searchEmojis);
+    } else {
+      setFilteredEmojis([].concat((0, _toConsumableArray2.default)(searchEmojis), (0, _toConsumableArray2.default)(frequentlyUsedEmojis)));
+    }
+  }, [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({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
+      _analytics.ufoExperiences['emoji-searched'].abort({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
+    };
+  }, [fireAnalytics]);
+  (0, _react.useEffect)(function () {
+    // Unsubscribe emojiProvider on component unmount
+    return function () {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  var showPreview = selectedEmoji && !uploading;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: onPickerRef,
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress,
+    className: (0, _runtime.ax)(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    style: {
+      "--_t8mjz6": (0, _runtime.ix)("".concat("var(--ds-border, ".concat(_colors.N40, ")"), " 1px solid")),
+      "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
+      "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
+    }
+  }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? /*#__PURE__*/React.createElement(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
+    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: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }) : /*#__PURE__*/React.createElement(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
+    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: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+    selectedEmoji: selectedEmoji
+  }));
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);

package/dist/cjs/components/compiled/picker/EmojiPickerEmojiRow.compiled.css

@@ -0,0 +1,35 @@
+
+._1wcg14y2 .emoji-common-node{border-radius:5px}._115ch2mm .emoji-common-node>img{position:relative}
+._1678tlke .emoji-common-node{cursor:pointer}
+._17dz1tcg .emoji-common-node>img{max-width:24px}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._18x3u2gc .emoji-common-placeholder{margin-right:var(--ds-space-100,8px)}
+._1909ze3t .emoji-common-placeholder{padding-right:var(--ds-space-0,0)}
+._1bsb1ylp{width:40px}
+._1cf71tcg .emoji-common-node{height:24px}
+._1e0c1o8l{display:inline-block}
+._1k8z1tcg .emoji-common-node>img{max-height:24px}
+._1lvc1tcg .emoji-common-node{width:24px}
+._1mc3ze3t .emoji-common-node .emoji-common-placeholder{margin-left:var(--ds-space-0,0)}
+._1mn81tcg .emoji-common-node>.emoji-common-emoji-sprite{height:24px}
+._1rf4u2gc .emoji-common-node{padding-right:var(--ds-space-100,8px)}
+._1tcfze3t .emoji-common-placeholder{padding-bottom:var(--ds-space-0,0)}
+._29jju2gc .emoji-common-placeholder{margin-left:var(--ds-space-100,8px)}
+._4ubfu2gc .emoji-common-placeholder{margin-top:var(--ds-space-100,8px)}
+._5mfndbra .emoji-common-node>img{transform:translateX(-50%) translateY(-50%)}
+._7b50u2gc .emoji-common-node{padding-top:var(--ds-space-100,8px)}
+._85ft1ssb .emoji-common-node>img{top:50%}
+._8vlfze3t .emoji-common-placeholder{padding-top:var(--ds-space-0,0)}
+._b4kiu2gc .emoji-common-node{padding-bottom:var(--ds-space-100,8px)}
+._bm9mu2gc .emoji-common-node{padding-left:var(--ds-space-100,8px)}
+._elsp1tcg .emoji-common-placeholder{max-width:24px}
+._fw9su2gc .emoji-common-placeholder{margin-bottom:var(--ds-space-100,8px)}
+._n7xcze3t .emoji-common-placeholder{padding-left:var(--ds-space-0,0)}
+._o5kcze3t .emoji-common-node .emoji-common-placeholder{margin-bottom:var(--ds-space-0,0)}
+._qpkw1tcg .emoji-common-placeholder{min-width:24px}
+._u5ah1tcg .emoji-common-node>.emoji-common-emoji-sprite{width:24px}
+._vtzrze3t .emoji-common-node .emoji-common-placeholder{margin-top:var(--ds-space-0,0)}
+._w2q0ze3t .emoji-common-node .emoji-common-placeholder{margin-right:var(--ds-space-0,0)}
+._y3gn1h6o{text-align:center}
+._yrst1ssb .emoji-common-node>img{left:50%}
+._zdyf1ule .emoji-common-node>img{display:block}

package/dist/cjs/components/compiled/picker/EmojiPickerEmojiRow.js

@@ -0,0 +1,76 @@
+/* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./EmojiPickerEmojiRow.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _reactIntlNext = require("react-intl-next");
+var _CachingEmoji = _interopRequireDefault(require("../../common/CachingEmoji"));
+var _useEmojiPickerListContext = require("../../../hooks/useEmojiPickerListContext");
+var _i18n = require("../../i18n");
+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; }
+var emojiItem = null;
+var emojiPickerRow = null;
+var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
+  var emojis = _ref.emojis,
+    onSelected = _ref.onSelected,
+    onMouseMove = _ref.onMouseMove,
+    onFocus = _ref.onFocus,
+    title = _ref.title,
+    showDelete = _ref.showDelete,
+    onDelete = _ref.onDelete,
+    virtualItemContext = _ref.virtualItemContext;
+  var _useEmojiPickerListCo = (0, _useEmojiPickerListContext.useEmojiPickerListContext)(),
+    currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
+    setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
+  var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleFocus = function handleFocus(index) {
+    return function (emojiId, emoji, event) {
+      setEmojisFocus({
+        rowIndex: rowIndex,
+        columnIndex: index
+      });
+      onFocus && onFocus(emojiId, emoji, event);
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: (0, _runtime.ax)(["_18u0u2gc"])
+  }, emojis.map(function (emoji, index) {
+    var shortName = emoji.shortName,
+      id = emoji.id;
+    var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
+    var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
+    return /*#__PURE__*/React.createElement("span", {
+      key: key,
+      role: "gridcell",
+      "aria-colindex": index + 1 // aria-colindex is 1 based
+      ,
+      className: (0, _runtime.ax)(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg14y2 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
+    }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
+      emoji: emoji,
+      selectOnHover: true,
+      onSelected: onSelected,
+      onMouseMove: onMouseMove,
+      onFocus: handleFocus(index),
+      showDelete: showDelete,
+      onDelete: onDelete,
+      placeholderSize: 24,
+      "data-focus-index": "".concat(rowIndex, "-").concat(index),
+      tabIndex: focus ? 0 : -1,
+      "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
+      shouldBeInteractive: true
+    }));
+  }));
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerEmojiRow);