@atlaskit/emoji 69.0.1 → 69.0.3

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

@@ -0,0 +1,506 @@
+/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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';
+const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+const emojiPickerHeight = 295;
+const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+const emojiPickerWidth = 350;
+const emojiPickerMinHeight = 260;
+const heightOffset = 80;
+const emojiPicker = null;
+const withPreviewHeight = {
+  small: "_4t3ivixp _1tkegx0z",
+  medium: "_4t3i2300 _1tke5x59",
+  large: "_4t3ixt2k _1tke1pna"
+};
+const withoutPreviewHeight = {
+  small: "_4t3iaq3k _1tkegx0z",
+  medium: "_4t3iixjv _1tke5x59",
+  large: "_4t3i1ckg _1tke1pna"
+};
+const FREQUENTLY_USED_MAX = 16;
+const EmojiPickerComponent = ({
+  onSelection,
+  onPickerRef,
+  hideToneSelector,
+  createAnalyticsEvent,
+  size = defaultEmojiPickerSize
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    emojiProvider,
+    isUploadSupported
+  } = useEmoji();
+  const [filteredEmojis, setFilteredEmojis] = useState([]);
+  const [searchEmojis, setSearchEmojis] = useState([]);
+  const [frequentlyUsedEmojis, setFrequentlyUsedEmojis] = useState([]);
+  const [query, setQuery] = useState('');
+  const [dynamicCategories, setDynamicCategories] = useState([]);
+  const [selectedTone, setSelectedTone] = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [selectedEmoji, setSelectedEmoji] = useState();
+  const [activeCategory, setActiveCategory] = useState(null);
+  const [disableCategories, setDisableCategories] = useState(false);
+  const [uploadErrorMessage, setUploadErrorMessage] = useState();
+  const [emojiToDelete, setEmojiToDelete] = useState();
+  const [toneEmoji, setToneEmoji] = useState();
+  const emojiPickerList = useMemo(() => fg('platform_editor_react18_elements_emoji') ? /*#__PURE__*/createRef() : /*#__PURE__*/createRef(), []);
+  const openTime = useRef(0);
+  const isMounting = useRef(true);
+  const previousEmojiProvider = useRef(emojiProvider);
+  const currentUser = useMemo(() => {
+    return emojiProvider.getCurrentUser();
+  }, [emojiProvider]);
+  const isMounted = useIsMounted();
+  const fireAnalytics = useCallback(analyticsEvent => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
+    }
+  }, [createAnalyticsEvent]);
+  const onEmojiActive = useCallback((emojiId, emoji) => {
+    if (!selectedEmoji || selectedEmoji.id !== (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id)) {
+      setSelectedEmoji(emoji);
+    }
+  }, [selectedEmoji]);
+  const onCategoryActivated = useCallback(category => {
+    if (activeCategory !== category) {
+      setActiveCategory(category);
+    }
+  }, [activeCategory]);
+  const calculateElapsedTime = () => {
+    return Date.now() - openTime.current;
+  };
+  const onDynamicCategoryChange = useCallback(categories => {
+    setDynamicCategories(categories);
+  }, []);
+  const onUploadCancelled = useCallback(() => {
+    batchedUpdates(() => {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    });
+    fireAnalytics(uploadCancelButton());
+  }, [fireAnalytics]);
+  const getDynamicCategories = useCallback(() => {
+    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.)
+   */
+  const setStateAfterEmojiChange = useCallback(({
+    searchQuery,
+    emojiToRender,
+    searchEmoji,
+    frequentEmoji
+  }) => {
+    // Only enable categories for full emoji list (non-search)
+    const disableCategories = !!searchQuery;
+    if (!disableCategories && emojiToRender && emojiToRender.length !== filteredEmojis.length) {
+      getDynamicCategories().then(categories => {
+        onDynamicCategoryChange(categories);
+      });
+    }
+    if (emojiToRender && !containsEmojiId(emojiToRender, selectedEmoji)) {
+      batchedUpdates(() => {
+        setSelectedEmoji(undefined);
+      });
+    }
+    batchedUpdates(() => {
+      if (emojiToRender) {
+        setFilteredEmojis(emojiToRender);
+      }
+      if (searchEmoji) {
+        setSearchEmojis(searchEmoji);
+      }
+      if (frequentEmoji) {
+        setFrequentlyUsedEmojis(frequentEmoji);
+      }
+      setLoading(false);
+      setDisableCategories(disableCategories);
+    });
+  }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
+  const onFrequentEmojiResult = useCallback(frequentEmoji => {
+    // change the category of each of the featured emoji
+    const recategorised = frequentEmoji.map(emoji => {
+      const clone = JSON.parse(JSON.stringify(emoji));
+      clone.category = frequentCategory;
+      return clone;
+    });
+    setStateAfterEmojiChange({
+      frequentEmoji: recategorised
+    });
+  }, [setStateAfterEmojiChange]);
+  const onSearchResult = useCallback(searchResults => {
+    const frequentlyUsedEmoji = frequentlyUsedEmojis || [];
+    const 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.
+     */
+    let emojiToRender;
+    if (!frequentlyUsedEmoji.length || query) {
+      emojiToRender = searchResults.emojis;
+    } else {
+      emojiToRender = [...searchResults.emojis, ...frequentlyUsedEmoji];
+    }
+    setStateAfterEmojiChange({
+      searchQuery,
+      emojiToRender,
+      searchEmoji: searchResults.emojis
+    });
+    fireAnalytics(pickerSearchedEvent({
+      queryLength: searchQuery.length,
+      numMatches: searchResults.emojis.length
+    }));
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
+  const onProviderChange = useMemo(() => {
+    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.
+   */
+  const updateEmojis = useCallback((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
+      const frequentOptions = {
+        ...options,
+        sort: SearchSort.None,
+        limit: FREQUENTLY_USED_MAX
+      };
+      emojiProvider.getFrequentlyUsed(frequentOptions).then(onFrequentEmojiResult);
+    }
+    emojiProvider.filter(query, options);
+  }, [emojiProvider, onFrequentEmojiResult]);
+  const onToneSelected = useCallback(toneValue => {
+    emojiProvider.setSelectedTone(toneValue);
+    updateEmojis(query, {
+      skinTone: toneValue
+    });
+    setSelectedTone(toneValue);
+  }, [emojiProvider, query, updateEmojis]);
+  const onToneSelectorCancelled = useCallback(() => {
+    fireAnalytics(toneSelectorClosedEvent());
+  }, [fireAnalytics]);
+  const onSelectWrapper = useCallback((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]);
+  const onCategorySelected = useCallback(categoryId => {
+    if (!categoryId) {
+      return;
+    }
+    emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
+      if (!disableCategories) {
+        let newSelectedEmoji;
+        if (emojisInCategory && emojisInCategory.length > 0) {
+          newSelectedEmoji = getEmojiVariation(emojisInCategory[0], {
+            skinTone: selectedTone
+          });
+        }
+        if (emojiPickerList.current) {
+          emojiPickerList.current.reveal(categoryId);
+        }
+        batchedUpdates(() => {
+          setActiveCategory(categoryId);
+          setSelectedEmoji(newSelectedEmoji);
+        });
+        fireAnalytics(categoryClickedEvent({
+          category: categoryId
+        }));
+      }
+    });
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
+  const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
+  const onFileChooserClicked = useCallback(() => {
+    fireAnalytics(selectedFileEvent());
+  }, [fireAnalytics]);
+  const scrollToTopOfList = useCallback(() => {
+    var _emojiPickerList$curr;
+    (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToTop();
+  }, [emojiPickerList]);
+  const onSearch = useCallback(searchQuery => {
+    const 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]);
+  const onOpenUpload = useCallback(() => {
+    // Prime upload token so it's ready when the user adds
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
+    batchedUpdates(() => {
+      setUploadErrorMessage(undefined);
+      setUploading(true);
+    });
+    fireAnalytics(uploadBeginButton());
+  }, [emojiProvider, fireAnalytics]);
+  const scrollToUploadedEmoji = useCallback(emojiDescription => {
+    if (emojiPickerList.current) {
+      // Wait a tick to ensure repaint and updated height for picker list
+      window.setTimeout(() => {
+        var _emojiPickerList$curr2;
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
+      }, 0);
+    }
+  }, [emojiPickerList]);
+  const onUploadEmoji = useCallback((upload, retry) => {
+    fireAnalytics(uploadConfirmButton({
+      retry
+    }));
+    const errorSetter = message => {
+      setUploadErrorMessage(message);
+    };
+    const onSuccess = emojiDescription => {
+      batchedUpdates(() => {
+        setActiveCategory(customCategory);
+        setSelectedEmoji(emojiDescription);
+        setUploading(false);
+      });
+      scrollToUploadedEmoji(emojiDescription);
+    };
+    uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
+  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
+  const onTriggerDelete = useCallback((_emojiId, emoji) => {
+    if (_emojiId) {
+      fireAnalytics(deleteBeginEvent({
+        emojiId: _emojiId.id
+      }));
+      setEmojiToDelete(emoji);
+    }
+  }, [fireAnalytics]);
+  const onCloseDelete = useCallback(() => {
+    fireAnalytics(deleteCancelEvent({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    setEmojiToDelete(undefined);
+  }, [emojiToDelete, fireAnalytics]);
+  const onDeleteEmoji = useCallback(emoji => {
+    fireAnalytics(deleteConfirmEvent({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    return emojiProvider.deleteSiteEmoji(emoji).then(success => {
+      if (success) {
+        updateEmojis(query, {
+          skinTone: selectedTone
+        });
+      }
+      return success;
+    });
+  }, [emojiProvider, emojiToDelete, fireAnalytics, query, selectedTone, updateEmojis]);
+  const onComponentDidMount = useCallback(() => {
+    emojiProvider.subscribe(onProviderChange);
+    onSearch(query);
+    if (!hideToneSelector) {
+      const toneEmoji = getToneEmoji(emojiProvider);
+      if (isPromise(toneEmoji)) {
+        toneEmoji.then(emoji => 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
+  const 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(() => {
+    // componentDidMount logic
+    if (!isMounted) {
+      onComponentDidMount();
+    }
+  }, [onComponentDidMount, isMounted]);
+  useEffect(() => {
+    previousEmojiProvider.current.unsubscribe(onProviderChange);
+    previousEmojiProvider.current = emojiProvider;
+    emojiProvider.subscribe(onProviderChange);
+    return () => {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  useEffect(() => {
+    if (!frequentlyUsedEmojis.length || query) {
+      setFilteredEmojis(searchEmojis);
+    } else {
+      setFilteredEmojis([...searchEmojis, ...frequentlyUsedEmojis]);
+    }
+  }, [frequentlyUsedEmojis, query, searchEmojis]);
+  useEffect(() => {
+    // Fire analytics on component unmount
+    return () => {
+      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(() => {
+    // Unsubscribe emojiProvider on component unmount
+    return () => {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  const 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(["_19itcyqh _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+  }, /*#__PURE__*/React.createElement(CategorySelector, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), fg('platform_editor_react18_elements_emoji') ? /*#__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/es2019/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/es2019/components/compiled/picker/EmojiPickerEmojiRow.js

@@ -0,0 +1,69 @@
+/* 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';
+const emojiItem = null;
+const emojiPickerRow = null;
+const EmojiPickerEmojiRow = ({
+  emojis,
+  onSelected,
+  onMouseMove,
+  onFocus,
+  title,
+  showDelete,
+  onDelete,
+  virtualItemContext
+}) => {
+  const {
+    currentEmojisFocus,
+    setEmojisFocus
+  } = useEmojiPickerListContext();
+  const rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
+  const {
+    formatMessage
+  } = useIntl();
+  const handleFocus = index => (emojiId, emoji, event) => {
+    setEmojisFocus({
+      rowIndex,
+      columnIndex: index
+    });
+    onFocus && onFocus(emojiId, emoji, event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: ax(["_18u0u2gc"])
+  }, emojis.map((emoji, index) => {
+    const {
+      shortName,
+      id
+    } = emoji;
+    const key = id ? `${id}-${title}` : `${shortName}-${title}`;
+    const 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": `${rowIndex}-${index}`,
+      tabIndex: focus ? 0 : -1,
+      "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
+      shouldBeInteractive: true
+    }));
+  }));
+};
+export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

package/dist/es2019/components/compiled/picker/EmojiPickerFooter.compiled.css

@@ -0,0 +1,5 @@
+
+._x3do1kuc{border-top:2px solid var(--ds-border,rgba(9,30,66,.08))}._16jlidpf{flex-grow:0}
+._16qs2hsd{box-shadow:0 -1px 1px 0 var(--ds-border,rgba(0,0,0,.1))}
+._1o9zidpf{flex-shrink:0}
+._i0dl1wug{flex-basis:auto}

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

@@ -0,0 +1,19 @@
+/* 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';
+const emojiPickerFooter = null;
+const emojiPickerFooterWithTopShadow = null;
+export const emojiPickerFooterTestId = 'emoji-picker-footer';
+const EmojiPickerFooter = ({
+  selectedEmoji
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": emojiPickerFooterTestId,
+  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1kuc _16qs2hsd"])
+}, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
+  emoji: selectedEmoji
+}));
+export default /*#__PURE__*/memo(EmojiPickerFooter);

package/dist/es2019/components/compiled/picker/EmojiPickerListSearch.compiled.css

@@ -0,0 +1,23 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._13xeglyw:invalid{box-shadow:none}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1osq{width:100%}
+._1e0cglyw{display:none}
+._1goxglyw::-ms-clear{display:none}
+._1q51t94y{padding-block-start:1px}
+._1qu2glyw{outline-style:none}
+._3um015vq{visibility:hidden}
+._80om1kw7{cursor:inherit}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz1kw7{color:inherit}
+._tzy4105o{opacity:.5}
+._tzy4idpf{opacity:0}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._vchhusvi{box-sizing:border-box}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}