@atlaskit/emoji 69.0.7 → 69.0.9

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

@@ -1,564 +0,0 @@
-/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./EmojiPickerComponent.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-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) { _defineProperty(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; }
-import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
-import { N40 } from '@atlaskit/theme/colors';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { FormattedMessage, useIntl } from 'react-intl-next';
-import { getEmojiVariation } from '../../../api/EmojiRepository';
-import { supportsUploadFeature } from '../../../api/EmojiResource';
-import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../../util/constants';
-import { containsEmojiId, isPromise /*, isEmojiIdEqual, isEmojiLoaded*/, isEmojiDescription } from '../../../util/type-helpers';
-import { SearchSort, SearchSourceTypes } from '../../../types';
-import { getToneEmoji } from '../../../util/filters';
-import { uploadEmoji } from '../../common/UploadEmoji';
-import { createRecordSelectionDefault } from '../../common/RecordSelectionDefault';
-import CategorySelector from './CategorySelector';
-import EmojiPickerFooter from './EmojiPickerFooter';
-import { EmojiPickerVirtualListInternalOld as EmojiPickerListOld, EmojiPickerVirtualListInternalNew as EmojiPickerListNew } from '../../picker/EmojiPickerList';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../../util/analytics';
-import { useEmoji } from '../../../hooks/useEmoji';
-import { useIsMounted } from '../../../hooks/useIsMounted';
-import { messages } from '../../i18n';
-import { fg } from '@atlaskit/platform-feature-flags';
-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 ? defaultEmojiPickerSize : _ref$size;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var _useEmoji = useEmoji(),
-    emojiProvider = _useEmoji.emojiProvider,
-    isUploadSupported = _useEmoji.isUploadSupported;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredEmojis = _useState2[0],
-    setFilteredEmojis = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchEmojis = _useState4[0],
-    setSearchEmojis = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    frequentlyUsedEmojis = _useState6[0],
-    setFrequentlyUsedEmojis = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    query = _useState8[0],
-    setQuery = _useState8[1];
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    dynamicCategories = _useState10[0],
-    setDynamicCategories = _useState10[1];
-  var _useState11 = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedTone = _useState12[0],
-    setSelectedTone = _useState12[1];
-  var _useState13 = useState(true),
-    _useState14 = _slicedToArray(_useState13, 2),
-    loading = _useState14[0],
-    setLoading = _useState14[1];
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    uploading = _useState16[0],
-    setUploading = _useState16[1];
-  var _useState17 = useState(),
-    _useState18 = _slicedToArray(_useState17, 2),
-    selectedEmoji = _useState18[0],
-    setSelectedEmoji = _useState18[1];
-  var _useState19 = useState(null),
-    _useState20 = _slicedToArray(_useState19, 2),
-    activeCategory = _useState20[0],
-    setActiveCategory = _useState20[1];
-  var _useState21 = useState(false),
-    _useState22 = _slicedToArray(_useState21, 2),
-    disableCategories = _useState22[0],
-    setDisableCategories = _useState22[1];
-  var _useState23 = useState(),
-    _useState24 = _slicedToArray(_useState23, 2),
-    uploadErrorMessage = _useState24[0],
-    setUploadErrorMessage = _useState24[1];
-  var _useState25 = useState(),
-    _useState26 = _slicedToArray(_useState25, 2),
-    emojiToDelete = _useState26[0],
-    setEmojiToDelete = _useState26[1];
-  var _useState27 = useState(),
-    _useState28 = _slicedToArray(_useState27, 2),
-    toneEmoji = _useState28[0],
-    setToneEmoji = _useState28[1];
-  var emojiPickerList = useMemo(function () {
-    return fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/createRef() : /*#__PURE__*/createRef();
-  }, []);
-  var openTime = useRef(0);
-  var isMounting = useRef(true);
-  var previousEmojiProvider = useRef(emojiProvider);
-  var currentUser = useMemo(function () {
-    return emojiProvider.getCurrentUser();
-  }, [emojiProvider]);
-  var isMounted = useIsMounted();
-  var fireAnalytics = useCallback(function (analyticsEvent) {
-    if (createAnalyticsEvent) {
-      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
-    }
-  }, [createAnalyticsEvent]);
-  var onEmojiActive = useCallback(function (emojiId, emoji) {
-    if (!selectedEmoji || selectedEmoji.id !== (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id)) {
-      setSelectedEmoji(emoji);
-    }
-  }, [selectedEmoji]);
-  var onCategoryActivated = useCallback(function (category) {
-    if (activeCategory !== category) {
-      setActiveCategory(category);
-    }
-  }, [activeCategory]);
-  var calculateElapsedTime = function calculateElapsedTime() {
-    return Date.now() - openTime.current;
-  };
-  var onDynamicCategoryChange = useCallback(function (categories) {
-    setDynamicCategories(categories);
-  }, []);
-  var onUploadCancelled = useCallback(function () {
-    batchedUpdates(function () {
-      setUploading(false);
-      setUploadErrorMessage(undefined);
-    });
-    fireAnalytics(uploadCancelButton());
-  }, [fireAnalytics]);
-  var getDynamicCategories = 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 = 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 && !containsEmojiId(emojiToRender, selectedEmoji)) {
-      batchedUpdates(function () {
-        setSelectedEmoji(undefined);
-      });
-    }
-    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 = 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 = frequentCategory;
-      return clone;
-    });
-    setStateAfterEmojiChange({
-      frequentEmoji: recategorised
-    });
-  }, [setStateAfterEmojiChange]);
-  var onSearchResult = 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(_toConsumableArray(searchResults.emojis), _toConsumableArray(frequentlyUsedEmoji));
-    }
-    setStateAfterEmojiChange({
-      searchQuery: searchQuery,
-      emojiToRender: emojiToRender,
-      searchEmoji: searchResults.emojis
-    });
-    fireAnalytics(pickerSearchedEvent({
-      queryLength: searchQuery.length,
-      numMatches: searchResults.emojis.length
-    }));
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
-  var onProviderChange = 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 = 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 = 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: SearchSort.None,
-        limit: FREQUENTLY_USED_MAX
-      });
-      emojiProvider.getFrequentlyUsed(frequentOptions).then(onFrequentEmojiResult);
-    }
-    emojiProvider.filter(query, options);
-  }, [emojiProvider, onFrequentEmojiResult]);
-  var onToneSelected = useCallback(function (toneValue) {
-    emojiProvider.setSelectedTone(toneValue);
-    updateEmojis(query, {
-      skinTone: toneValue
-    });
-    setSelectedTone(toneValue);
-  }, [emojiProvider, query, updateEmojis]);
-  var onToneSelectorCancelled = useCallback(function () {
-    fireAnalytics(toneSelectorClosedEvent());
-  }, [fireAnalytics]);
-  var onSelectWrapper = useCallback(function (emojiId, emoji, event) {
-    if (onSelection) {
-      onSelection(emojiId, emoji, event);
-      fireAnalytics(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 = useCallback(function (categoryId) {
-    if (!categoryId) {
-      return;
-    }
-    emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
-      if (!disableCategories) {
-        var newSelectedEmoji;
-        if (emojisInCategory && emojisInCategory.length > 0) {
-          newSelectedEmoji = getEmojiVariation(emojisInCategory[0], {
-            skinTone: selectedTone
-          });
-        }
-        if (emojiPickerList.current) {
-          emojiPickerList.current.reveal(categoryId);
-        }
-        batchedUpdates(function () {
-          setActiveCategory(categoryId);
-          setSelectedEmoji(newSelectedEmoji);
-        });
-        fireAnalytics(categoryClickedEvent({
-          category: categoryId
-        }));
-      }
-    });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
-  var recordUsageOnSelection = useMemo(function () {
-    return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
-      return fireAnalytics(analytic(SearchSourceTypes.PICKER));
-    });
-  }, [emojiProvider, fireAnalytics, onSelectWrapper]);
-  var formattedErrorMessage = useMemo(function () {
-    return uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-  }, [uploadErrorMessage]);
-  var onFileChooserClicked = useCallback(function () {
-    fireAnalytics(selectedFileEvent());
-  }, [fireAnalytics]);
-  var scrollToTopOfList = useCallback(function () {
-    var _emojiPickerList$curr;
-    (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 || _emojiPickerList$curr.scrollToTop();
-  }, [emojiPickerList]);
-  var onSearch = useCallback(function (searchQuery) {
-    var options = {
-      skinTone: selectedTone,
-      source: 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 = useCallback(function () {
-    // Prime upload token so it's ready when the user adds
-    if (supportsUploadFeature(emojiProvider)) {
-      emojiProvider.prepareForUpload();
-    }
-    batchedUpdates(function () {
-      setUploadErrorMessage(undefined);
-      setUploading(true);
-    });
-    fireAnalytics(uploadBeginButton());
-  }, [emojiProvider, fireAnalytics]);
-  var scrollToUploadedEmoji = 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 = useCallback(function (upload, retry) {
-    fireAnalytics(uploadConfirmButton({
-      retry: retry
-    }));
-    var errorSetter = function errorSetter(message) {
-      setUploadErrorMessage(message);
-    };
-    var onSuccess = function onSuccess(emojiDescription) {
-      batchedUpdates(function () {
-        setActiveCategory(customCategory);
-        setSelectedEmoji(emojiDescription);
-        setUploading(false);
-      });
-      scrollToUploadedEmoji(emojiDescription);
-    };
-    uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
-  var onTriggerDelete = useCallback(function (_emojiId, emoji) {
-    if (_emojiId) {
-      fireAnalytics(deleteBeginEvent({
-        emojiId: _emojiId.id
-      }));
-      setEmojiToDelete(emoji);
-    }
-  }, [fireAnalytics]);
-  var onCloseDelete = useCallback(function () {
-    fireAnalytics(deleteCancelEvent({
-      emojiId: emojiToDelete && emojiToDelete.id
-    }));
-    setEmojiToDelete(undefined);
-  }, [emojiToDelete, fireAnalytics]);
-  var onDeleteEmoji = useCallback(function (emoji) {
-    fireAnalytics(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 = useCallback(function () {
-    emojiProvider.subscribe(onProviderChange);
-    onSearch(query);
-    if (!hideToneSelector) {
-      var _toneEmoji = getToneEmoji(emojiProvider);
-      if (isPromise(_toneEmoji)) {
-        _toneEmoji.then(function (emoji) {
-          return setToneEmoji(emoji);
-        });
-      } else if (_toneEmoji === undefined || isEmojiDescription(_toneEmoji)) {
-        setToneEmoji(_toneEmoji);
-      }
-    }
-  }, [emojiProvider, hideToneSelector, onProviderChange, onSearch, query]);
-  if (isMounting.current) {
-    // componentWillMount equivalent
-    ufoExperiences['emoji-picker-opened'].success();
-    openTime.current = Date.now();
-    fireAnalytics(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 === KeyboardKeys.Enter) {
-      e.preventDefault();
-    }
-  };
-  useEffect(function () {
-    // componentDidMount logic
-    if (!isMounted) {
-      onComponentDidMount();
-    }
-  }, [onComponentDidMount, isMounted]);
-  useEffect(function () {
-    previousEmojiProvider.current.unsubscribe(onProviderChange);
-    previousEmojiProvider.current = emojiProvider;
-    emojiProvider.subscribe(onProviderChange);
-    return function () {
-      emojiProvider.unsubscribe(onProviderChange);
-    };
-  }, [emojiProvider, onProviderChange]);
-  useEffect(function () {
-    if (!frequentlyUsedEmojis.length || query) {
-      setFilteredEmojis(searchEmojis);
-    } else {
-      setFilteredEmojis([].concat(_toConsumableArray(searchEmojis), _toConsumableArray(frequentlyUsedEmojis)));
-    }
-  }, [frequentlyUsedEmojis, query, searchEmojis]);
-  useEffect(function () {
-    // Fire analytics on component unmount
-    return function () {
-      fireAnalytics(closedPickerEvent({
-        duration: calculateElapsedTime()
-      }));
-      ufoExperiences['emoji-picker-opened'].abort({
-        metadata: {
-          source: 'EmojiPickerComponent',
-          reason: 'unmount'
-        }
-      });
-      ufoExperiences['emoji-searched'].abort({
-        metadata: {
-          source: 'EmojiPickerComponent',
-          reason: 'unmount'
-        }
-      });
-    };
-  }, [fireAnalytics]);
-  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(messages.emojiPickerTitle),
-    "aria-modal": true,
-    onKeyPress: suppressKeyPress,
-    onKeyUp: suppressKeyPress,
-    onKeyDown: suppressKeyPress,
-    className: ax(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
-    style: {
-      "--_t8mjz6": ix("".concat("var(--ds-border, ".concat(N40, ")"), " 1px solid")),
-      "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
-      "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
-    }
-  }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: activeCategory,
-    dynamicCategories: dynamicCategories,
-    disableCategories: disableCategories,
-    onCategorySelected: onCategorySelected
-  }), fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/React.createElement(EmojiPickerListNew, {
-    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(EmojiPickerListOld, {
-    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, {
-    selectedEmoji: selectedEmoji
-  }));
-};
-export default /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -1,66 +0,0 @@
-/* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./EmojiPickerEmojiRow.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { memo } from 'react';
-import { useIntl } from 'react-intl-next';
-import CachingEmoji from '../../common/CachingEmoji';
-import { useEmojiPickerListContext } from '../../../hooks/useEmojiPickerListContext';
-import { messages } from '../../i18n';
-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 = useEmojiPickerListContext(),
-    currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
-    setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
-  var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
-  var _useIntl = 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: 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: 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, {
-      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(messages.emojiButtonRoleDescription),
-      shouldBeInteractive: true
-    }));
-  }));
-};
-export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

package/dist/esm/components/compiled/picker/EmojiPickerFooter.js

@@ -1,24 +0,0 @@
-/* EmojiPickerFooter.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./EmojiPickerFooter.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { memo } from 'react';
-import { N30A } from '@atlaskit/theme/colors';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
-var emojiPickerFooter = null;
-var emojiPickerFooterWithTopShadow = null;
-export var emojiPickerFooterTestId = 'emoji-picker-footer';
-var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
-  var selectedEmoji = _ref.selectedEmoji;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": emojiPickerFooterTestId,
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do18ew _16qs4j53"]),
-    style: {
-      "--_m6cf7x": ix("2px solid ".concat("var(--ds-border, ".concat(N30A, ")"))),
-      "--_cfawkn": ix("0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
-    }
-  }, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
-    emoji: selectedEmoji
-  }));
-};
-export default /*#__PURE__*/memo(EmojiPickerFooter);