@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -2,12 +2,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } 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 { SearchSort } from '../../types';
+import { SearchSort, SearchSourceTypes } from '../../types';
 import { getToneEmoji } from '../../util/filters';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
@@ -16,8 +16,9 @@ import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
-import { useDidMount } from '../hooks';
 import { useEmoji } from '../../hooks/useEmoji';
+import { useIsMounted } from '../../hooks/useIsMounted';
+import { messages } from '../i18n';
 const FREQUENTLY_USED_MAX = 16;
 const EmojiPickerComponent = ({
   onSelection,
@@ -26,6 +27,9 @@ const EmojiPickerComponent = ({
   createAnalyticsEvent,
   size = defaultEmojiPickerSize
 }) => {
+  const {
+    formatMessage
+  } = useIntl();
   const {
     emojiProvider,
     isUploadSupported
@@ -47,12 +51,11 @@ const EmojiPickerComponent = ({
   const emojiPickerList = useMemo(() => /*#__PURE__*/createRef(), []);
   const openTime = useRef(0);
   const isMounting = useRef(true);
-  const didMount = useDidMount();
-  const updateAfterDidMount = 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);
@@ -157,7 +160,11 @@ const EmojiPickerComponent = ({
       emojiToRender,
       searchEmoji: searchResults.emojis
     });
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange]);
+    fireAnalytics(pickerSearchedEvent({
+      queryLength: searchQuery.length,
+      numMatches: searchResults.emojis.length
+    }));
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
   const onProviderChange = useMemo(() => {
     return {
       result: onSearchResult
@@ -242,22 +249,22 @@ const EmojiPickerComponent = ({
   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
+      skinTone: selectedTone,
+      source: SearchSourceTypes.PICKER
     };
-    if (query) {
-      ufoExperiences['emoji-searched'].start();
-      ufoExperiences['emoji-searched'].addMetadata({
-        queryLength: query.length,
-        source: 'EmojiPickerComponent'
-      });
-    }
     if (searchQuery !== query) {
       setQuery(searchQuery);
+      // scroll to top when search, which is search results section
+      scrollToTopOfList();
     }
-    updateEmojis(query, options);
-  }, [query, selectedTone, updateEmojis]);
+    updateEmojis(searchQuery, options);
+  }, [query, selectedTone, updateEmojis, scrollToTopOfList]);
   const onOpenUpload = useCallback(() => {
     // Prime upload token so it's ready when the user adds
     if (supportsUploadFeature(emojiProvider)) {
@@ -269,12 +276,12 @@ const EmojiPickerComponent = ({
     });
     fireAnalytics(uploadBeginButton());
   }, [emojiProvider, fireAnalytics]);
-  const scrollToEndOfList = useCallback(() => {
+  const scrollToUploadedEmoji = useCallback(() => {
     if (emojiPickerList.current) {
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(() => {
-        var _emojiPickerList$curr;
-        (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
+        var _emojiPickerList$curr2;
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded();
       }, 0);
     }
   }, [emojiPickerList]);
@@ -291,10 +298,10 @@ const EmojiPickerComponent = ({
         setSelectedEmoji(emojiDescription);
         setUploading(false);
       });
-      scrollToEndOfList();
+      scrollToUploadedEmoji();
     };
     uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-  }, [emojiProvider, fireAnalytics, scrollToEndOfList]);
+  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   const onTriggerDelete = useCallback((_emojiId, emoji) => {
     if (_emojiId) {
       fireAnalytics(deleteBeginEvent({
@@ -343,11 +350,10 @@ const EmojiPickerComponent = ({
   }
   useEffect(() => {
     // componentDidMount logic
-    if (didMount && updateAfterDidMount.current) {
+    if (!isMounted) {
       onComponentDidMount();
-      updateAfterDidMount.current = false;
     }
-  }, [didMount, onComponentDidMount]);
+  }, [onComponentDidMount, isMounted]);
   useEffect(() => {
     previousEmojiProvider.current.unsubscribe(onProviderChange);
     previousEmojiProvider.current = emojiProvider;
@@ -356,26 +362,6 @@ const EmojiPickerComponent = ({
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  useEffect(() => {
-    // We changed provider which means we subscribed to filter results for a new subscriber.
-    // So we refresh the emoji display with onSearch and we do it here, after the new props have
-    // been set since onSearch leads to filter being called on the current emojiProvider.
-    // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
-    // an emojiProvider we have already unsubscribed from)
-    onSearch(query);
-  }, [emojiProvider, onSearch, query]);
-  useEffect(() => {
-    // Fire analytics event whenever query changes
-    fireAnalytics(pickerSearchedEvent({
-      queryLength: query.length,
-      numMatches: filteredEmojis.length
-    }));
-    ufoExperiences['emoji-searched'].success({
-      metadata: {
-        emojisLength: filteredEmojis.length
-      }
-    });
-  }, [filteredEmojis.length, fireAnalytics, query]);
   useEffect(() => {
     if (!frequentlyUsedEmojis.length || query) {
       setFilteredEmojis(searchEmojis);
@@ -413,7 +399,10 @@ const EmojiPickerComponent = ({
   return jsx("div", {
     css: emojiPicker(showPreview, size),
     ref: onPickerRef,
-    "data-emoji-picker-container": true
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(messages.emojiPickerTitle),
+    "aria-modal": true
   }, jsx(CategorySelector, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,
@@ -445,7 +434,8 @@ const EmojiPickerComponent = ({
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
-    size: size
+    size: size,
+    activeCategoryId: activeCategory
   }), showPreview && jsx(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji
   }));

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

@@ -1,35 +1,65 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import CachingEmoji from '../common/CachingEmoji';
 import { emojiItem, emojiPickerRow } from './styles';
+import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
+import { messages } from '../i18n';
 const EmojiPickerEmojiRow = ({
   emojis,
   onSelected,
   onMouseMove,
+  onFocus,
   title,
   showDelete,
-  onDelete
-}) => jsx("div", {
-  css: emojiPickerRow
-}, emojis.map(emoji => {
+  onDelete,
+  virtualItemContext
+}) => {
   const {
-    shortName,
-    id
-  } = emoji;
-  const key = id ? `${id}-${title}` : `${shortName}-${title}`;
-  return jsx("span", {
-    css: emojiItem,
-    key: key
-  }, jsx(CachingEmoji, {
-    emoji: emoji,
-    selectOnHover: true,
-    onSelected: onSelected,
-    onMouseMove: onMouseMove,
-    showDelete: showDelete,
-    onDelete: onDelete,
-    placeholderSize: 24,
-    shouldBeInteractive: true
+    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 jsx("div", {
+    css: emojiPickerRow,
+    role: "presentation"
+  }, emojis.map((emoji, index) => {
+    const {
+      shortName,
+      id
+    } = emoji;
+    const key = id ? `${id}-${title}` : `${shortName}-${title}`;
+    const focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
+    return jsx("span", {
+      css: emojiItem,
+      key: key,
+      role: "gridcell",
+      "aria-colindex": index + 1 // aria-colindex is 1 based
+    }, jsx(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/picker/EmojiPickerList.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { customCategory, defaultEmojiPickerSize, userCustomTitle } from '../../util/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
 import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
@@ -11,25 +12,60 @@ import EmojiActions from '../common/EmojiActions';
 import { emojiPickerList } from './styles';
 import { emojiPickerHeightOffset } from './utils';
 import { VirtualList } from './VirtualList';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
 export const RENDER_EMOJI_PICKER_LIST_TESTID = 'render-emoji-picker-list';
 const categoryClassname = 'emoji-category';
 const byOrder = (orderableA, orderableB) => (orderableA.order || 0) - (orderableB.order || 0);
-export default class EmojiPickerVirtualList extends PureComponent {
+
+/**
+ * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file to functional component in future
+ * ticket: COLLAB-2317
+ */
+
+class EmojiPickerTabPanelInternal extends PureComponent {
+  render() {
+    const {
+      intl: {
+        formatMessage
+      },
+      children,
+      showSearchResults
+    } = this.props;
+    return jsx("div", {
+      ref: "root",
+      css: emojiPickerList,
+      "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
+      id: RENDER_EMOJI_PICKER_LIST_TESTID,
+      role: "tabpanel",
+      "aria-label": formatMessage(messages.emojiPickerListPanel)
+    }, jsx(VisuallyHidden, {
+      id: "emoji-picker-table-description"
+    }, formatMessage(messages.emojiPickerGrid, {
+      showSearchResults
+    })), children);
+  }
+}
+const EmojiPickerTabPanel = injectIntl(EmojiPickerTabPanelInternal);
+export default class EmojiPickerVirtualListInternal extends PureComponent {
   constructor(_props) {
     super(_props);
     _defineProperty(this, "virtualItems", []);
     _defineProperty(this, "categoryTracker", new CategoryTracker());
-    _defineProperty(this, "onEmojiMouseEnter", (emojiId, emoji) => {
+    _defineProperty(this, "listRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "onEmojiActive", (emojiId, emoji) => {
       if (this.props.onEmojiActive) {
         this.props.onEmojiActive(emojiId, emoji);
       }
     });
-    _defineProperty(this, "onSearch", e => {
+    _defineProperty(this, "onSearch", value => {
       if (this.props.onSearch) {
-        this.props.onSearch(e.target.value);
+        this.props.onSearch(value);
       }
     });
     _defineProperty(this, "buildVirtualItemFromGroup", group => {
@@ -48,12 +84,14 @@ export default class EmojiPickerVirtualList extends PureComponent {
         const rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
         remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
         items.push(new EmojisRowItem({
+          category: group.category,
           emojis: rowEmojis,
           title: group.title,
           showDelete: group.title === userCustomTitle,
           onSelected: onEmojiSelected,
           onDelete: onEmojiDelete,
-          onMouseMove: this.onEmojiMouseEnter
+          onMouseMove: this.onEmojiActive,
+          onFocus: this.onEmojiActive
         }));
       }
       return items;
@@ -73,7 +111,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
           const search = CategoryDescriptionMap.SEARCH;
           // Only a single "result" category
           items = [...items, ...this.buildVirtualItemFromGroup({
-            category: 'SEARCH',
+            category: searchCategory,
             title: search.name,
             emojis,
             order: search.order
@@ -87,22 +125,16 @@ export default class EmojiPickerVirtualList extends PureComponent {
             // by not passing it to irrelevant groups
             this.categoryTracker.add(group.emojis[0].category, items.length);
             items = [...items, ...this.buildVirtualItemFromGroup(group)];
+            if (group.category === yourUploadsCategory) {
+              this.lastYourUploadsRow = items.length - 1;
+            }
+          });
+          this.onRowsRendered({
+            startIndex: 0
           });
         }
       }
-      const rowCountChanged = this.virtualItems.length !== items.length;
       this.virtualItems = items;
-      const list = this.refs.list;
-      if (!rowCountChanged && list) {
-        // Row count has not changed, so need to tell list to rerender.
-        list.forceUpdateGrid();
-      }
-      if (!query && list) {
-        // VirtualList can apply stale heights since it performs a shallow
-        // compare to check if the list has changed. Should manually recompute
-        // row heights for the case when frequent category come in later
-        list.recomputeRowHeights();
-      }
     });
     _defineProperty(this, "addToCategoryMap", (categoryToGroupMap, emoji, category) => {
       if (!categoryToGroupMap[category]) {
@@ -121,46 +153,54 @@ export default class EmojiPickerVirtualList extends PureComponent {
       this.addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
       // separate user emojis
       if (emoji.category === customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
-        this.addToCategoryMap(categoryToGroupMap, emoji, 'USER_CUSTOM');
+        this.addToCategoryMap(categoryToGroupMap, emoji, yourUploadsCategory);
       }
       return categoryToGroupMap;
     });
     _defineProperty(this, "buildEmojiGroupedByCategory", (emojis, currentUser) => {
       const categoryToGroupMap = emojis.reduce(this.groupByCategory(currentUser), {});
       this.allEmojiGroups = Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(group => {
-        if (group.category !== 'FREQUENT') {
+        if (group.category !== frequentCategory) {
           group.emojis.sort(byOrder);
         }
         return group;
       }).sort(byOrder);
     });
-    _defineProperty(this, "repaintList", () => {
-      if (this.refs.root) {
-        const root = this.refs.root;
-        const display = root.style.display;
-        root.style.display = 'none';
-
-        // we need to access offset to force repaint
-        // eslint-disable-next-line no-unused-expressions
-        root.offsetHeight;
-        root.style.display = display;
+    _defineProperty(this, "findCategoryToActivate", row => {
+      let category = null;
+      if (row instanceof CategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof EmojisRowItem) {
+        category = row.props.category;
       }
+      // your uploads is rendered, take it as upload category, so could be highlighted in category selector
+      if (category === yourUploadsCategory) {
+        return customCategory;
+        // search results is rendered, return null so won't be highlighted for category selector
+      } else if (category === searchCategory) {
+        return null;
+      }
+      return category;
     });
-    _defineProperty(this, "checkCategoryIdChange", indexes => {
+    _defineProperty(this, "onRowsRendered", indexes => {
       const {
         startIndex
       } = indexes;
+      const rowItem = this.virtualItems[startIndex];
+      const list = this.listRef.current;
 
-      // FS-1844 Fix a rendering problem when scrolling to the top
-      if (startIndex === 0) {
-        this.repaintList();
+      // update tabIndex manually, startIndex is not 0 based here
+      if (rowItem instanceof CategoryHeadingItem) {
+        // if top of row rendered is category heading, update tabIndex for the next emoji row
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
+      } else if (rowItem instanceof EmojisRowItem) {
+        // if top of row rendered is emoji row, update it's tabIndex.
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
       }
       if (!this.props.query) {
         // Calculate category in view - only relevant if categories shown, i.e. no query
-        const list = this.refs.list;
-        const currentCategory = this.categoryTracker.findNearestCategoryAbove(startIndex, list);
-        if (currentCategory && this.activeCategoryId !== currentCategory) {
-          this.activeCategoryId = currentCategory;
+        const currentCategory = this.findCategoryToActivate(rowItem);
+        if (currentCategory !== null && this.props.activeCategoryId !== currentCategory) {
           if (this.props.onCategoryActivated) {
             this.props.onCategoryActivated(currentCategory);
           }
@@ -174,6 +214,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
     _defineProperty(this, "renderRow", context => {
       return virtualItemRenderer(this.virtualItems, context);
     });
+    this.lastYourUploadsRow = 0;
     this.buildEmojiGroupedByCategory(_props.emojis, _props.currentUser);
     this.buildVirtualItems(_props, this.state);
   }
@@ -191,12 +232,24 @@ export default class EmojiPickerVirtualList extends PureComponent {
    */
   reveal(category) {
     const row = this.categoryTracker.getRow(category);
-    const list = this.refs.list;
-    list.scrollToRow(row);
+    this.scrollToRow(row);
   }
   scrollToBottom() {
-    const list = this.refs.list;
-    list.scrollToRow(this.virtualItems.length);
+    this.scrollToRow(this.virtualItems.length);
+  }
+  scrollToTop() {
+    this.scrollToRow(0);
+  }
+  scrollToRow(index) {
+    var _this$listRef$current;
+    (_this$listRef$current = this.listRef.current) === null || _this$listRef$current === void 0 ? void 0 : _this$listRef$current.scrollToRow(index);
+  }
+  scrollToRecentlyUploaded() {
+    const row = this.lastYourUploadsRow;
+    if (row > 0) {
+      var _this$listRef$current2;
+      (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.scrollToRowAndFocusLastEmoji(this.lastYourUploadsRow);
+    }
   }
   render() {
     const {
@@ -216,13 +269,12 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onDeleteEmoji,
       onFileChooserClicked,
       onOpenUpload,
-      size = defaultEmojiPickerSize
+      size = defaultEmojiPickerSize,
+      emojis
     } = this.props;
     const virtualListHeight = sizes.listHeight + emojiPickerHeightOffset(size);
-    return jsx("div", {
-      ref: "root",
-      css: emojiPickerList,
-      "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID
+    return jsx(EmojiPickerTabPanel, {
+      showSearchResults: !!query
     }, jsx(EmojiActions, {
       selectedTone: selectedTone,
       onToneSelected: onToneSelected,
@@ -240,9 +292,15 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onFileChooserClicked: onFileChooserClicked,
       onOpenUpload: onOpenUpload,
       query: query,
-      onChange: this.onSearch
-    }), jsx(VirtualList, {
-      ref: "list",
+      onChange: this.onSearch,
+      resultsCount: emojis.length
+    }), jsx(EmojiPickerListContextProvider, {
+      initialEmojisFocus: {
+        rowIndex: 1,
+        columnIndex: 0
+      }
+    }, jsx(VirtualList, {
+      ref: this.listRef,
       height: virtualListHeight,
       overscanRowCount: 10,
       rowCount: this.virtualItems.length,
@@ -250,11 +308,11 @@ export default class EmojiPickerVirtualList extends PureComponent {
       rowRenderer: this.renderRow,
       scrollToAlignment: "start",
       width: sizes.listWidth,
-      onRowsRendered: this.checkCategoryIdChange
-    }));
+      onRowsRendered: this.onRowsRendered
+    })));
   }
 }
-_defineProperty(EmojiPickerVirtualList, "defaultProps", {
+_defineProperty(EmojiPickerVirtualListInternal, "defaultProps", {
   onEmojiSelected: () => {},
   onEmojiActive: () => {},
   onEmojiDelete: () => {},