@atlaskit/emoji 67.0.3 → 67.0.5

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

@@ -1,11 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 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) { _defineProperty(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; }
-
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { jsx } from '@emotion/react';
@@ -14,9 +11,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
-import { containsEmojiId, isPromise
-/*, isEmojiIdEqual, isEmojiLoaded*/
-, isEmojiDescription } from '../../util/type-helpers';
+import { containsEmojiId, isPromise /*, isEmojiIdEqual, isEmojiLoaded*/, isEmojiDescription } from '../../util/type-helpers';
 import { SearchSort } from '../../types';
 import { getToneEmoji } from '../../util/filters';
 import { uploadEmoji } from '../common/UploadEmoji';
@@ -29,89 +24,72 @@ import { emojiPicker } from './styles';
 import { useDidMount } from '../hooks';
 import { useEmoji } from '../../hooks/useEmoji';
 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;
-
+    onPickerRef = _ref.onPickerRef,
+    hideToneSelector = _ref.hideToneSelector,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaultEmojiPickerSize : _ref$size;
   var _useEmoji = useEmoji(),
-      emojiProvider = _useEmoji.emojiProvider,
-      isUploadSupported = _useEmoji.isUploadSupported;
-
+    emojiProvider = _useEmoji.emojiProvider,
+    isUploadSupported = _useEmoji.isUploadSupported;
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      filteredEmojis = _useState2[0],
-      setFilteredEmojis = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredEmojis = _useState2[0],
+    setFilteredEmojis = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      searchEmojis = _useState4[0],
-      setSearchEmojis = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchEmojis = _useState4[0],
+    setSearchEmojis = _useState4[1];
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      frequentlyUsedEmojis = _useState6[0],
-      setFrequentlyUsedEmojis = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    frequentlyUsedEmojis = _useState6[0],
+    setFrequentlyUsedEmojis = _useState6[1];
   var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      query = _useState8[0],
-      setQuery = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    query = _useState8[0],
+    setQuery = _useState8[1];
   var _useState9 = useState([]),
-      _useState10 = _slicedToArray(_useState9, 2),
-      dynamicCategories = _useState10[0],
-      setDynamicCategories = _useState10[1];
-
+    _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];
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedTone = _useState12[0],
+    setSelectedTone = _useState12[1];
   var _useState13 = useState(true),
-      _useState14 = _slicedToArray(_useState13, 2),
-      loading = _useState14[0],
-      setLoading = _useState14[1];
-
+    _useState14 = _slicedToArray(_useState13, 2),
+    loading = _useState14[0],
+    setLoading = _useState14[1];
   var _useState15 = useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      uploading = _useState16[0],
-      setUploading = _useState16[1];
-
+    _useState16 = _slicedToArray(_useState15, 2),
+    uploading = _useState16[0],
+    setUploading = _useState16[1];
   var _useState17 = useState(),
-      _useState18 = _slicedToArray(_useState17, 2),
-      selectedEmoji = _useState18[0],
-      setSelectedEmoji = _useState18[1];
-
+    _useState18 = _slicedToArray(_useState17, 2),
+    selectedEmoji = _useState18[0],
+    setSelectedEmoji = _useState18[1];
   var _useState19 = useState(null),
-      _useState20 = _slicedToArray(_useState19, 2),
-      activeCategory = _useState20[0],
-      setActiveCategory = _useState20[1];
-
+    _useState20 = _slicedToArray(_useState19, 2),
+    activeCategory = _useState20[0],
+    setActiveCategory = _useState20[1];
   var _useState21 = useState(false),
-      _useState22 = _slicedToArray(_useState21, 2),
-      disableCategories = _useState22[0],
-      setDisableCategories = _useState22[1];
-
+    _useState22 = _slicedToArray(_useState21, 2),
+    disableCategories = _useState22[0],
+    setDisableCategories = _useState22[1];
   var _useState23 = useState(),
-      _useState24 = _slicedToArray(_useState23, 2),
-      uploadErrorMessage = _useState24[0],
-      setUploadErrorMessage = _useState24[1];
-
+    _useState24 = _slicedToArray(_useState23, 2),
+    uploadErrorMessage = _useState24[0],
+    setUploadErrorMessage = _useState24[1];
   var _useState25 = useState(),
-      _useState26 = _slicedToArray(_useState25, 2),
-      emojiToDelete = _useState26[0],
-      setEmojiToDelete = _useState26[1];
-
+    _useState26 = _slicedToArray(_useState25, 2),
+    emojiToDelete = _useState26[0],
+    setEmojiToDelete = _useState26[1];
   var _useState27 = useState(),
-      _useState28 = _slicedToArray(_useState27, 2),
-      toneEmoji = _useState28[0],
-      setToneEmoji = _useState28[1];
-
+    _useState28 = _slicedToArray(_useState27, 2),
+    toneEmoji = _useState28[0],
+    setToneEmoji = _useState28[1];
   var emojiPickerList = useMemo(function () {
     return /*#__PURE__*/createRef();
   }, []);
@@ -138,11 +116,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setActiveCategory(category);
     }
   }, [activeCategory]);
-
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
-
   var onDynamicCategoryChange = useCallback(function (categories) {
     setDynamicCategories(categories);
   }, []);
@@ -157,49 +133,42 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     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;
+      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); // Only enable categories for full emoji list (non-search)
-
+        setSelectedEmoji(undefined);
+        // Only enable categories for full emoji list (non-search)
         setActiveCategory(null);
       });
     }
-
     batchedUpdates(function () {
       if (emojiToRender) {
         setFilteredEmojis(emojiToRender);
       }
-
       if (searchEmoji) {
         setSearchEmojis(searchEmoji);
       }
-
       if (frequentEmoji) {
         setFrequentlyUsedEmojis(frequentEmoji);
       }
-
       setLoading(false);
       setDisableCategories(disableCategories);
     });
@@ -218,20 +187,18 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   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,
@@ -243,12 +210,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       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.
@@ -256,20 +223,17 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       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
-
+      }
 
+      // 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) {
@@ -298,21 +262,17 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     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);
@@ -338,7 +298,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     var options = {
       skinTone: selectedTone
     };
-
     if (query) {
       ufoExperiences['emoji-searched'].start();
       ufoExperiences['emoji-searched'].addMetadata({
@@ -346,11 +305,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         source: 'EmojiPickerComponent'
       });
     }
-
     if (searchQuery !== query) {
       setQuery(searchQuery);
     }
-
     updateEmojis(query, options);
   }, [query, selectedTone, updateEmojis]);
   var onOpenUpload = useCallback(function () {
@@ -358,7 +315,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (supportsUploadFeature(emojiProvider)) {
       emojiProvider.prepareForUpload();
     }
-
     batchedUpdates(function () {
       setUploadErrorMessage(undefined);
       setUploading(true);
@@ -370,7 +326,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(function () {
         var _emojiPickerList$curr;
-
         (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
       }, 0);
     }
@@ -379,11 +334,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     fireAnalytics(uploadConfirmButton({
       retry: retry
     }));
-
     var errorSetter = function errorSetter(message) {
       setUploadErrorMessage(message);
     };
-
     var onSuccess = function onSuccess(emojiDescription) {
       batchedUpdates(function () {
         setActiveCategory(customCategory);
@@ -392,7 +345,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       });
       scrollToEndOfList();
     };
-
     uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
   }, [emojiProvider, fireAnalytics, scrollToEndOfList]);
   var onTriggerDelete = useCallback(function (_emojiId, emoji) {
@@ -419,17 +371,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           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);
@@ -439,7 +388,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       }
     }
   }, [emojiProvider, hideToneSelector, onProviderChange, onSearch, query]);
-
   if (isMounting.current) {
     // componentWillMount equivalent
     ufoExperiences['emoji-picker-opened'].success();
@@ -447,7 +395,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     fireAnalytics(openedPickerEvent());
     isMounting.current = false;
   }
-
   useEffect(function () {
     // componentDidMount logic
     if (didMount && updateAfterDidMount.current) {
@@ -557,5 +504,4 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     selectedEmoji: selectedEmoji
   }));
 };
-
 export default /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -3,19 +3,18 @@ import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import CachingEmoji from '../common/CachingEmoji';
 import { emojiItem, emojiPickerRow } from './styles';
-
 var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
-      onSelected = _ref.onSelected,
-      onMouseMove = _ref.onMouseMove,
-      title = _ref.title,
-      showDelete = _ref.showDelete,
-      onDelete = _ref.onDelete;
+    onSelected = _ref.onSelected,
+    onMouseMove = _ref.onMouseMove,
+    title = _ref.title,
+    showDelete = _ref.showDelete,
+    onDelete = _ref.onDelete;
   return jsx("div", {
     css: emojiPickerRow
   }, emojis.map(function (emoji) {
     var shortName = emoji.shortName,
-        id = emoji.id;
+      id = emoji.id;
     var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
     return jsx("span", {
       css: emojiItem,
@@ -32,5 +31,4 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
     }));
   }));
 };
-
 export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

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

@@ -5,7 +5,6 @@ import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
 var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 export var emojiPickerFooterTestId = 'emoji-picker-footer';
-
 var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
   var selectedEmoji = _ref.selectedEmoji;
   return jsx("div", {
@@ -15,5 +14,4 @@ var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
     emoji: selectedEmoji
   }));
 };
-
 export default /*#__PURE__*/memo(EmojiPickerFooter);