@atlaskit/emoji 67.2.1 → 67.3.1

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

@@ -157,8 +157,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (emojiToRender && !containsEmojiId(emojiToRender, selectedEmoji)) {
       batchedUpdates(function () {
         setSelectedEmoji(undefined);
-        // Only enable categories for full emoji list (non-search)
-        setActiveCategory(null);
       });
     }
     batchedUpdates(function () {
@@ -327,12 +325,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     });
     fireAnalytics(uploadBeginButton());
   }, [emojiProvider, fireAnalytics]);
-  var scrollToUploadedEmoji = useCallback(function () {
+  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 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded();
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
       }, 0);
     }
   }, [emojiPickerList]);
@@ -349,7 +347,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         setSelectedEmoji(emojiDescription);
         setUploading(false);
       });
-      scrollToUploadedEmoji();
+      scrollToUploadedEmoji(emojiDescription);
     };
     uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
   }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
@@ -401,6 +399,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     fireAnalytics(openedPickerEvent());
     isMounting.current = false;
   }
+
+  // stop all key propagation to other event listeners
+  var suppressKeyPress = function suppressKeyPress(e) {
+    e.stopPropagation();
+  };
   useEffect(function () {
     // componentDidMount logic
     if (!isMounted) {
@@ -455,7 +458,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),
-    "aria-modal": true
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress
   }, jsx(CategorySelector, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,

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

@@ -89,6 +89,24 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
         _this.props.onSearch(value);
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "findEmojiRowAndColumnById", function (emojiId) {
+      var columnIndex = -1;
+      // for most of cases, it'd be in first emoji row, so should be quite fast to find in real world
+      var rowIndex = _this.virtualItems.findIndex(function (rowItem) {
+        if (rowItem instanceof EmojisRowItem) {
+          // find uploaded emoji in each emoji row
+          columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+            return emoji.id === emojiId;
+          });
+          return columnIndex !== -1;
+        }
+        return false;
+      });
+      return {
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
+      };
+    });
     _defineProperty(_assertThisInitialized(_this), "buildVirtualItemFromGroup", function (group) {
       var _this$props2 = _this.props,
         onEmojiSelected = _this$props2.onEmojiSelected,
@@ -121,6 +139,7 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
         loading = props.loading,
         query = props.query;
       var items = [];
+      var prevFirstCategory = _this.categoryTracker.getFirstCategory();
       _this.categoryTracker.reset();
       if (loading) {
         items.push(new LoadingItem());
@@ -147,12 +166,18 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
               _this.lastYourUploadsRow = items.length - 1;
             }
           });
+        }
+      }
+
+      // make sure virtualItems is up-to-date before calling onRowsRendered
+      _this.virtualItems = items;
+      if (!loading && !query) {
+        if (_this.categoryTracker.getFirstCategory() !== prevFirstCategory) {
           _this.onRowsRendered({
             startIndex: 0
           });
         }
       }
-      _this.virtualItems = items;
     });
     _defineProperty(_assertThisInitialized(_this), "addToCategoryMap", function (categoryToGroupMap, emoji, category) {
       if (!categoryToGroupMap[category]) {
@@ -234,6 +259,11 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
     _defineProperty(_assertThisInitialized(_this), "renderRow", function (context) {
       return virtualItemRenderer(_this.virtualItems, context);
     });
+    _defineProperty(_assertThisInitialized(_this), "handleOnCloseDelete", function () {
+      var list = _this.listRef.current;
+      list === null || list === void 0 ? void 0 : list.updateFocusIndex(_this.lastYourUploadsRow);
+      _this.props.onCloseDelete();
+    });
     _this.lastYourUploadsRow = 0;
     _this.buildEmojiGroupedByCategory(_props.emojis, _props.currentUser);
     _this.buildVirtualItems(_props, _this.state);
@@ -278,11 +308,23 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
     }
   }, {
     key: "scrollToRecentlyUploaded",
-    value: function scrollToRecentlyUploaded() {
-      var 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);
+    value: function scrollToRecentlyUploaded(uploadedEmoji) {
+      // when search results is shown
+      if (this.props.query) {
+        var _this$findEmojiRowAnd = this.findEmojiRowAndColumnById(uploadedEmoji.id),
+          rowIndex = _this$findEmojiRowAnd.rowIndex,
+          columnIndex = _this$findEmojiRowAnd.columnIndex;
+        if (rowIndex !== -1) {
+          var _this$listRef$current2;
+          (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.scrollToEmojiAndFocus(rowIndex, columnIndex);
+        }
+      } else {
+        // when seeing all emojis
+        var row = this.lastYourUploadsRow;
+        if (row > 0) {
+          var _this$listRef$current3;
+          (_this$listRef$current3 = this.listRef.current) === null || _this$listRef$current3 === void 0 ? void 0 : _this$listRef$current3.scrollToRowAndFocusLastEmoji(this.lastYourUploadsRow);
+        }
       }
     }
   }, {
@@ -301,7 +343,6 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
         uploadErrorMessage = _this$props3.uploadErrorMessage,
         onUploadCancelled = _this$props3.onUploadCancelled,
         onUploadEmoji = _this$props3.onUploadEmoji,
-        onCloseDelete = _this$props3.onCloseDelete,
         onDeleteEmoji = _this$props3.onDeleteEmoji,
         onFileChooserClicked = _this$props3.onFileChooserClicked,
         onOpenUpload = _this$props3.onOpenUpload,
@@ -323,7 +364,7 @@ var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
         uploadErrorMessage: uploadErrorMessage,
         onUploadCancelled: onUploadCancelled,
         onUploadEmoji: onUploadEmoji,
-        onCloseDelete: onCloseDelete,
+        onCloseDelete: this.handleOnCloseDelete,
         onDeleteEmoji: onDeleteEmoji,
         onFileChooserClicked: onFileChooserClicked,
         onOpenUpload: onOpenUpload,

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

@@ -10,10 +10,13 @@ import { messages } from '../i18n';
 import { input, pickerSearch, searchIcon } from './styles';
 import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { useDebouncedCallback } from 'use-debounce';
+import { hidden } from '../common/styles';
 export var emojiPickerSearchTestId = 'emoji-picker-serach';
 export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   var style = props.style,
     query = props.query,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
     resultsCount = props.resultsCount,
     onChange = props.onChange;
   var textRef = useRef(null);
@@ -45,7 +48,7 @@ export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
     });
   }, []);
   return jsx("div", {
-    css: pickerSearch,
+    css: [pickerSearch, !isVisible && hidden],
     style: style
   }, jsx(VisuallyHidden, {
     id: "emoji-search-results-status",

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

@@ -177,6 +177,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
     e.preventDefault();
+    e.stopPropagation();
     var lastRowIndex = rowCount - 1;
     var lastColumnIndex = EMOJI_LIST_COLUMNS - 1;
 
@@ -245,13 +246,17 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
           focusEmoji(index, EMOJI_LIST_COLUMNS, KeyboardNavigationDirection.Left, true);
         }
       },
-      updateFocusIndex: function updateFocusIndex(index) {
+      scrollToEmojiAndFocus: function scrollToEmojiAndFocus(rowIndex, columnIndex) {
+        focusEmoji(rowIndex, columnIndex, KeyboardNavigationDirection.Left, true);
+      },
+      updateFocusIndex: function updateFocusIndex(rowIndex) {
         var _virtualistItemsRef$c2;
+        var columnIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
         // row could be removed from virtual list after scrolling, we'll update emoji cell tabIndex after losing focus
         if (!((_virtualistItemsRef$c2 = virtualistItemsRef.current) !== null && _virtualistItemsRef$c2 !== void 0 && _virtualistItemsRef$c2.contains(document.activeElement))) {
           setEmojisFocus({
-            rowIndex: index,
-            columnIndex: 0
+            rowIndex: rowIndex,
+            columnIndex: columnIndex
           });
         }
       }

package/dist/esm/{util → hooks}/useInView.js

@@ -1,8 +1,8 @@
 import { useInView as useInViewLib } from 'react-intersection-observer';
-import { isIntersectionObserverSupported } from './browser-support';
+import browserSupport from '../util/browser-support';
 export var useInView = function useInView(options) {
   var hookResult = useInViewLib(options);
-  if (!isIntersectionObserverSupported) {
+  if (!browserSupport.supportsIntersectionObserver) {
     // Unsupported, return no `ref` and default `inView` true value
     return [undefined, true];
   }

package/dist/esm/util/browser-support.js

@@ -1 +1,9 @@
-export var isIntersectionObserverSupported = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+var result = {
+  mac: false,
+  supportsIntersectionObserver: false
+};
+if (typeof navigator !== 'undefined') {
+  result.mac = /Mac/.test(navigator.platform);
+  result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+}
+export default result;

package/dist/esm/util/constants.js

@@ -41,6 +41,7 @@ export var KeyboardKeys;
   KeyboardKeys["Enter"] = "Enter";
   KeyboardKeys["Tab"] = "Tab";
   KeyboardKeys["Space"] = " ";
+  KeyboardKeys["Backspace"] = "Backspace";
 })(KeyboardKeys || (KeyboardKeys = {}));
 export var KeyboardNavigationDirection;
 (function (KeyboardNavigationDirection) {
@@ -50,6 +51,7 @@ export var KeyboardNavigationDirection;
   KeyboardNavigationDirection["Right"] = "Right";
 })(KeyboardNavigationDirection || (KeyboardNavigationDirection = {}));
 export var CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED = [KeyboardKeys.ArrowRight, KeyboardKeys.ArrowLeft, KeyboardKeys.Home, KeyboardKeys.End];
+export var EMOJI_KEYBOARD_KEYS_SUPPORTED = [KeyboardKeys.Enter, KeyboardKeys.Backspace, KeyboardKeys.Space];
 export var TONESELECTOR_KEYBOARD_KEYS_SUPPORTED = [KeyboardKeys.Enter, KeyboardKeys.Tab, KeyboardKeys.Space];
 export var EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED = [KeyboardKeys.ArrowRight, KeyboardKeys.ArrowLeft, KeyboardKeys.Home, KeyboardKeys.End, KeyboardKeys.ArrowUp, KeyboardKeys.ArrowDown, KeyboardKeys.PageUp, KeyboardKeys.PageDown];
 export var DEFAULT_TONE = 0;

package/dist/esm/util/keymaps.js

@@ -0,0 +1,43 @@
+/**
+ * Copied from editor-common: https://bitbucket.org/atlassian/atlassian-frontend/src/d01430a20500d720791d0667fd7cfe25d254f2e3/packages/editor/editor-common/src/keymaps/index.tsx
+ */
+
+import browserSupport from './browser-support';
+export var backspace = makeKeyMapWithCommon('Backspace', 'Backspace');
+export function makeKeymap(description, windows, mac, common) {
+  return {
+    description: description,
+    windows: windows.replace(/Mod/i, 'Ctrl'),
+    mac: mac.replace(/Mod/i, 'Cmd'),
+    common: common
+  };
+}
+export function makeKeyMapWithCommon(description, common) {
+  var windows = common.replace(/Mod/i, 'Ctrl');
+  var mac = common.replace(/Mod/i, 'Cmd');
+  return makeKeymap(description, windows, mac, common);
+}
+export var arrowKeysMap = {
+  // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
+  ARROWLEFT: "\u2190",
+  ARROWRIGHT: "\u2192",
+  ARROWUP: "\u2191",
+  ARROWDOWN: "\u2193"
+};
+export function formatShortcut(keymap) {
+  var shortcut;
+  if (browserSupport.mac) {
+    // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
+    shortcut = keymap.mac.replace(/Cmd/i, "\u2318").replace(/Shift/i, "\u21E7").replace(/Ctrl/i, "\u2303").replace(/Alt/i, "\u2325").replace(/Backspace/i, "\u232B").replace(/Enter/i, "\u23CE");
+  } else {
+    shortcut = keymap.windows.replace(/Backspace/i, "\u232B");
+  }
+  var keys = shortcut.split('-');
+  var lastKey = keys[keys.length - 1];
+  if (lastKey.length === 1) {
+    // capitalise single letters
+    lastKey = lastKey.toUpperCase();
+  }
+  keys[keys.length - 1] = arrowKeysMap[lastKey.toUpperCase()] || lastKey;
+  return keys.join(browserSupport.mac ? '' : '+');
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.2.1",
+	"version": "67.3.1",
 	"sideEffects": false
 }

package/dist/types/components/common/DeletableEmojiTooltipContent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EmojiDescription } from '../../types';
+export declare const DeletableEmojiTooltipContent: () => JSX.Element;
+export declare const DeletableEmojiTooltipContentForScreenReader: ({ emoji, }: {
+    emoji: EmojiDescription;
+}) => JSX.Element;

package/dist/types/components/common/Emoji.d.ts

@@ -77,5 +77,11 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
 }
 export declare const SpriteEmoji: (props: Props) => jsx.JSX.Element;
 export declare const ImageEmoji: (props: Props) => jsx.JSX.Element;
+interface EmojiNodeWrapperProps extends Props {
+    type: 'sprite' | 'image';
+}
+export declare const EmojiNodeWrapper: React.ForwardRefExoticComponent<EmojiNodeWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
 export declare const Emoji: (props: Props) => jsx.JSX.Element;
 export default Emoji;

package/dist/types/components/common/EmojiErrorMessage.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     tooltip?: boolean;
     messageStyles: SerializedStyles;
 }
+export declare const emojiErrorScreenreaderTestId = "emoji-error-screenreader-message";
 export declare const emojiErrorMessageTestId = "emoji-error-message";
 export declare const emojiErrorMessageTooltipTestId = "emoji-error-message-tooltip";
 export declare const emojiErrorIconTestId = "emoji-error-icon";

package/dist/types/components/common/FileChooser.d.ts

@@ -1,6 +1,7 @@
 import { FC, ChangeEventHandler } from 'react';
 export interface Props {
     label: string;
+    ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     onChange?: ChangeEventHandler<any>;
     onClick?: () => void;

package/dist/types/components/common/RetryableButton.d.ts

@@ -6,7 +6,8 @@ export interface Props {
     error: boolean;
     onSubmit: () => void;
     loading: boolean;
-    ariaDescribedby?: string;
+    ariaDescribedBy?: string;
+    ariaLabelledBy?: string;
 }
 export declare const retryUploadButtonTestId = "retry-upload-button";
 export declare const uploadEmojiButtonTestId = "upload-emoji-button";

package/dist/types/components/common/ToolTipContentWithKeymap.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { Keymap } from '../../util/keymaps';
+export declare const ToolTipContentWithKeymap: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
+    description?: string | React.ReactNode;
+    keymap?: Keymap | undefined;
+    shortcutOverride?: string | undefined;
+}) => jsx.JSX.Element | null>;

package/dist/types/components/common/styles.d.ts

@@ -5,10 +5,11 @@ export declare const emojiNodeStyles = "emoji-common-node";
 export declare const emojiImage = "emoji-common-emoji-image";
 export declare const emojiDeleteButton = "emoji-common-deleteButton";
 export declare const emojiMainStyle = "emoji-common-main-styles";
+export declare const deletableEmoji = "emoji-common-deletable";
 export declare const deleteButton: import("@emotion/react").SerializedStyles;
 export declare const emojiToneSelectorContainer: import("@emotion/react").SerializedStyles;
-export declare const emojiStyles: import("@emotion/react").SerializedStyles;
-export declare const emojiContainer: import("@emotion/react").SerializedStyles;
+export declare const emojiImageContainer: import("@emotion/react").SerializedStyles;
+export declare const emojiSpriteContainer: import("@emotion/react").SerializedStyles;
 export declare const placeholder = "emoji-common-placeholder";
 export declare const placeholderContainer: import("@emotion/react").SerializedStyles;
 export declare const placeholderContainerAnimated: import("@emotion/react").SerializedStyles;
@@ -39,6 +40,8 @@ export declare const addCustomEmoji: import("@emotion/react").SerializedStyles;
 export declare const submitDelete = "emoji-submit-delete";
 export declare const deletePreview: import("@emotion/react").SerializedStyles;
 export declare const deleteText: import("@emotion/react").SerializedStyles;
+export declare const headingH5: import("@emotion/react").SerializedStyles;
+export declare const requiredSymbol: import("@emotion/react").SerializedStyles;
 export declare const previewButtonGroup: import("@emotion/react").SerializedStyles;
 export declare const deleteFooter: import("@emotion/react").SerializedStyles;
 export declare const emojiDeleteErrorMessage: import("@emotion/react").SerializedStyles;
@@ -50,3 +53,4 @@ export declare const uploadEmojiButton: import("@emotion/react").SerializedStyle
 export declare const cancelButton: import("@emotion/react").SerializedStyles;
 export declare const buttonSpinner: import("@emotion/react").SerializedStyles;
 export declare const emojiActionsWrapper: import("@emotion/react").SerializedStyles;
+export declare const tooltipShortcutStyle: import("@emotion/react").SerializedStyles;

package/dist/types/components/i18n.d.ts

@@ -1,4 +1,14 @@
 export declare const messages: {
+    deleteEmojiTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    deleteEmojiTooltipForScreenreader: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     deleteEmojiTitle: {
         id: string;
         defaultMessage: string;
@@ -209,4 +219,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    error: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/components/picker/CategoryTracker.d.ts

@@ -12,4 +12,5 @@ export default class CategoryTracker {
     reset(): void;
     add(category: CategoryId, row: number): void;
     getRow(category: CategoryId): number | undefined;
+    getFirstCategory(): CategoryId | undefined;
 }

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -60,6 +60,7 @@ export default class EmojiPickerVirtualListInternal extends PureComponent<Props,
     UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void;
     private onEmojiActive;
     private onSearch;
+    private findEmojiRowAndColumnById;
     /**
      * Scrolls to a category in the list view
      */
@@ -67,7 +68,7 @@ export default class EmojiPickerVirtualListInternal extends PureComponent<Props,
     scrollToBottom(): void;
     scrollToTop(): void;
     scrollToRow(index?: number): void;
-    scrollToRecentlyUploaded(): void;
+    scrollToRecentlyUploaded(uploadedEmoji: EmojiDescription): void;
     private buildVirtualItemFromGroup;
     private buildVirtualItems;
     private addToCategoryMap;
@@ -83,5 +84,11 @@ export default class EmojiPickerVirtualListInternal extends PureComponent<Props,
     private onRowsRendered;
     private rowSize;
     private renderRow;
+    /**
+     * After deleting emoji, we'll update the focus index to the first emoji of last row of your uploads, so when user navigate back focus will still work
+     * if last emoji in your uploads is deleted, the updated focus index will be outdated, as there will be no your uploads section
+     * however, it'll trigger onChange from VirtualList, which will update focus index automatically for us
+     */
+    private handleOnCloseDelete;
     render(): jsx.JSX.Element;
 }

package/dist/types/components/picker/EmojiPickerListSearch.d.ts

@@ -3,6 +3,7 @@ import { Styles } from '../../types';
 export interface Props {
     style?: Styles;
     query?: string;
+    isVisible?: boolean;
     onChange: (value: string) => void;
     resultsCount: number;
 }

package/dist/types/components/picker/VirtualList.d.ts

@@ -13,9 +13,29 @@ declare type Props = {
     height: number;
 };
 export declare type ListRef = {
+    /**
+     * Scroll to the row by row index
+     * @param index row index of virtual list
+     */
     scrollToRow: (index?: number) => void;
+    /**
+     * Scroll to the row by row index, and focus on last emoji in that row
+     * @param index row index of virtual list
+     * @returns
+     */
     scrollToRowAndFocusLastEmoji: (index?: number) => void;
-    updateFocusIndex: (index: number) => void;
+    /**
+     * Scroll to a emoji in virtual list and focus on it
+     * @param rIndex row index of virtual list
+     * @param cIndex column index of virtual list
+     */
+    scrollToEmojiAndFocus: (rIndex: number, cIndex: number) => void;
+    /**
+     * Update the focus index of virtual list, which will manage tabIndex via EmojiPickerListContext
+     * @param rIndex row index of virtual list
+     * @param cIndex column index of virtual list
+     */
+    updateFocusIndex: (rIndex: number, cIndex?: number) => void;
 };
 export declare const virtualListScrollContainerTestId = "virtual-list-scroll-container";
 export declare const VirtualList: React.ForwardRefExoticComponent<Props & React.RefAttributes<ListRef>>;

package/dist/types/types.d.ts

@@ -322,7 +322,7 @@ export interface User {
     id: string;
 }
 export declare type OptionalUser = User | undefined;
-export declare type Message = React.ReactNode;
+export declare type Message = React.ReactNode | string;
 export declare enum ProviderTypes {
     SITE = "SITE",
     STANDARD = "STANDARD",

package/dist/types/util/browser-support.d.ts

@@ -1 +1,6 @@
-export declare const isIntersectionObserverSupported: boolean;
+declare type BrowserSupport = {
+    mac: boolean;
+    supportsIntersectionObserver: boolean;
+};
+declare const result: BrowserSupport;
+export default result;

package/dist/types/util/constants.d.ts

@@ -36,7 +36,8 @@ export declare enum KeyboardKeys {
     End = "End",
     Enter = "Enter",
     Tab = "Tab",
-    Space = " "
+    Space = " ",
+    Backspace = "Backspace"
 }
 export declare enum KeyboardNavigationDirection {
     Down = "Down",
@@ -45,6 +46,7 @@ export declare enum KeyboardNavigationDirection {
     Right = "Right"
 }
 export declare const CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED: string[];
+export declare const EMOJI_KEYBOARD_KEYS_SUPPORTED: string[];
 export declare const TONESELECTOR_KEYBOARD_KEYS_SUPPORTED: string[];
 export declare const EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED: string[];
 export declare const DEFAULT_TONE = 0;

package/dist/types/util/keymaps.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copied from editor-common: https://bitbucket.org/atlassian/atlassian-frontend/src/d01430a20500d720791d0667fd7cfe25d254f2e3/packages/editor/editor-common/src/keymaps/index.tsx
+ */
+export declare const backspace: Keymap;
+export interface Keymap {
+    description: string;
+    windows: string;
+    mac: string;
+    common?: string;
+}
+export declare function makeKeymap(description: string, windows: string, mac: string, common?: string): Keymap;
+export declare function makeKeyMapWithCommon(description: string, common: string): Keymap;
+export declare const arrowKeysMap: Record<string, string>;
+export declare function formatShortcut(keymap: Keymap): string | undefined;

package/dist/types/util/type-helpers.d.ts

@@ -11,7 +11,7 @@ export declare const hasDataURLImage: (rep: EmojiRepresentation) => boolean;
 export declare const isLoadedMediaEmoji: (emoji: EmojiDescription) => boolean;
 export declare const isEmojiDescriptionWithVariations: (emoji: OptionalEmojiDescription) => emoji is EmojiDescriptionWithVariations;
 export declare const isEmojiVariationDescription: (object: any) => object is EmojiVariationDescription;
-export declare const isMessagesKey: (key: string) => key is "deleteEmojiTitle" | "deleteEmojiDescription" | "deleteEmojiLabel" | "addCustomEmojiLabel" | "emojiPlaceholder" | "emojiNameAriaLabel" | "emojiChooseFileTitle" | "emojiChooseFileScreenReaderDescription" | "emojiSelectSkinToneButtonAriaLabelText" | "emojiSelectSkinToneListAriaLabelText" | "emojiImageRequirements" | "emojiPreviewTitle" | "emojiPreview" | "addEmojiLabel" | "retryLabel" | "cancelLabel" | "searchPlaceholder" | "searchLabel" | "searchResultsStatus" | "searchResultsStatusSeeAll" | "categoriesSelectorLabel" | "categoriesSearchResults" | "frequentCategory" | "peopleCategory" | "natureCategory" | "foodsCategory" | "activityCategory" | "placesCategory" | "objectsCategory" | "symbolsCategory" | "flagsCategory" | "productivityCategory" | "userUploadsCustomCategory" | "allUploadsCustomCategory" | "deleteEmojiFailed" | "emojiInvalidImage" | "emojiUploadFailed" | "emojiImageTooBig" | "emojiPickerTitle" | "emojiPickerListPanel" | "emojiPickerGrid" | "emojiButtonRoleDescription";
+export declare const isMessagesKey: (key: string) => key is "deleteEmojiTooltip" | "deleteEmojiTooltipForScreenreader" | "deleteEmojiTitle" | "deleteEmojiDescription" | "deleteEmojiLabel" | "addCustomEmojiLabel" | "emojiPlaceholder" | "emojiNameAriaLabel" | "emojiChooseFileTitle" | "emojiChooseFileScreenReaderDescription" | "emojiSelectSkinToneButtonAriaLabelText" | "emojiSelectSkinToneListAriaLabelText" | "emojiImageRequirements" | "emojiPreviewTitle" | "emojiPreview" | "addEmojiLabel" | "retryLabel" | "cancelLabel" | "searchPlaceholder" | "searchLabel" | "searchResultsStatus" | "searchResultsStatusSeeAll" | "categoriesSelectorLabel" | "categoriesSearchResults" | "frequentCategory" | "peopleCategory" | "natureCategory" | "foodsCategory" | "activityCategory" | "placesCategory" | "objectsCategory" | "symbolsCategory" | "flagsCategory" | "productivityCategory" | "userUploadsCustomCategory" | "allUploadsCustomCategory" | "deleteEmojiFailed" | "emojiInvalidImage" | "emojiUploadFailed" | "emojiImageTooBig" | "emojiPickerTitle" | "emojiPickerListPanel" | "emojiPickerGrid" | "emojiButtonRoleDescription" | "error";
 export declare const toEmojiId: (emoji: EmojiDescription) => EmojiId;
 export declare const toOptionalEmojiId: (emoji: OptionalEmojiDescription) => EmojiId | undefined;
 export declare const isEmojiIdEqual: (l?: EmojiId | undefined, r?: EmojiId | undefined) => boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.2.1",
+  "version": "67.3.1",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-test-helpers": "^18.1.0",
+    "@atlaskit/editor-test-helpers": "^18.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/popup": "^1.5.0",

package/report.api.md

@@ -696,10 +696,20 @@ export interface MediaApiToken {
 }
 
 // @public (undocumented)
-export type Message = React.ReactNode;
+export type Message = React.ReactNode | string;
 
 // @public (undocumented)
 const messages: {
+  deleteEmojiTooltip: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  deleteEmojiTooltipForScreenreader: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
   deleteEmojiTitle: {
     id: string;
     defaultMessage: string;
@@ -910,6 +920,11 @@ const messages: {
     defaultMessage: string;
     description: string;
   };
+  error: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
 };
 
 // @public (undocumented)