@atlaskit/emoji 67.1.0 → 67.2.1

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

@@ -1,17 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { jsx } from '@emotion/react';
 import React, { useCallback, useImperativeHandle } from 'react';
 import { virtualList } from './styles';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
+import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
 export var virtualListScrollContainerTestId = 'virtual-list-scroll-container';
 export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var parentRef = React.useRef(null);
-  var currentIndex = React.useRef(0);
+  var virtualistItemsRef = React.useRef(null);
   var rowRenderer = props.rowRenderer,
     onRowsRendered = props.onRowsRendered,
     scrollToAlignment = props.scrollToAlignment,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    rowCount = props.rowCount;
+  var _useEmojiPickerListCo = useEmojiPickerListContext(),
+    currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
+    setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
   var getVirtualizerOptions = function getVirtualizerOptions() {
     var rowCount = props.rowCount,
       rowHeight = props.rowHeight,
@@ -28,7 +37,9 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onRowsRendered({
           startIndex: startIndex
         });
-      }
+      },
+      scrollPaddingStart: 28,
+      scrollPaddingEnd: 28
     };
   };
   var rowVirtualizer = useVirtualizer(getVirtualizerOptions());
@@ -64,38 +75,208 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return 0;
   }, [rowVirtualizer]);
 
+  /**
+   * Recurisive function to find next available emoji and it's focus indexes in the grid
+   *
+   * current focus element is at rowIndex.columnIndex
+   * if found element then return the element and focus indexes
+   * otherwise change row/column till find the element
+   * if can't find the element till reach the edge of grid, we keep current focus states
+   *
+   * @param rowIndex search from row index (0 based)
+   * @param columnIndex search from column index (0 based)
+   * @param direction search direction
+   */
+  var findNextEmoji = useCallback(function (rowIndex, columnIndex, direction) {
+    var _virtualistItemsRef$c;
+    var emojiToFocus = (_virtualistItemsRef$c = virtualistItemsRef.current) === null || _virtualistItemsRef$c === void 0 ? void 0 : _virtualistItemsRef$c.querySelector("[data-focus-index=\"".concat(rowIndex, "-").concat(columnIndex, "\"]"));
+    var lastRowIndex = rowCount - 1;
+    var lastColumnIndex = EMOJI_LIST_COLUMNS - 1;
+    if (emojiToFocus) {
+      return {
+        element: emojiToFocus,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
+      };
+    }
+    switch (direction) {
+      case KeyboardNavigationDirection.Down:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // find emoji in same column but lower row
+        return findNextEmoji(rowIndex + 1, columnIndex, KeyboardNavigationDirection.Down);
+      case KeyboardNavigationDirection.Up:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        // find emoji in same column but upper row
+        return findNextEmoji(rowIndex - 1, columnIndex, KeyboardNavigationDirection.Up);
+      case KeyboardNavigationDirection.Left:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        if (columnIndex < 0) {
+          // find emoji in upper row
+          return findNextEmoji(rowIndex - 1, lastColumnIndex, KeyboardNavigationDirection.Left);
+        }
+        // find emoji on left in the current row
+        return findNextEmoji(rowIndex, columnIndex - 1, KeyboardNavigationDirection.Left);
+      case KeyboardNavigationDirection.Right:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // if no emoji on right, we try first emoji in next row
+        return findNextEmoji(rowIndex + 1, 0, KeyboardNavigationDirection.Right);
+      default:
+        return null;
+    }
+  }, [rowCount]);
+
+  /**
+   * Find the valid emoji to scroll and focus
+   */
+  var scrollToRowAndFocusEmoji = useCallback(function (emojiToFocus) {
+    if (emojiToFocus) {
+      var _emojiToFocus$element;
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex, {
+        align: 'auto',
+        smoothScroll: false
+      });
+      (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 ? void 0 : _emojiToFocus$element.focus({
+        preventScroll: true
+      });
+      setEmojisFocus({
+        rowIndex: emojiToFocus.rowIndex,
+        columnIndex: emojiToFocus.columnIndex
+      });
+    }
+  }, [rowVirtualizer, setEmojisFocus]);
+  var focusEmoji = useCallback(function (rIndex, cIndex, direction) {
+    var waitForScrollFinish = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    if (waitForScrollFinish) {
+      // scroll to target rowIndex first to ensure the row is rendered in list.
+      // used in page up/down, ctrl+Home, ctrl+End
+      rowVirtualizer.scrollToIndex(rIndex, {
+        align: 'auto',
+        smoothScroll: false
+      });
+      setTimeout(function () {
+        var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+        scrollToRowAndFocusEmoji(emojiToFocus);
+      }, 100); // 100ms is virtual list scrolling time
+    } else {
+      var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+      scrollToRowAndFocusEmoji(emojiToFocus);
+    }
+  }, [scrollToRowAndFocusEmoji, findNextEmoji, rowVirtualizer]);
+
+  // following the guide from https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    var lastRowIndex = rowCount - 1;
+    var lastColumnIndex = EMOJI_LIST_COLUMNS - 1;
+
+    // focus first emoji on first row
+    if (e.key === KeyboardKeys.Home && e.ctrlKey) {
+      focusEmoji(1, 0, KeyboardNavigationDirection.Up, true);
+      return;
+    } else if (e.key === KeyboardKeys.End && e.ctrlKey) {
+      // focus last available emoji on last row
+      focusEmoji(lastRowIndex, lastColumnIndex, KeyboardNavigationDirection.Left, true);
+      return;
+    }
+    switch (e.key) {
+      // navigate to the right column
+      case KeyboardKeys.ArrowRight:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex + 1, KeyboardNavigationDirection.Right);
+        break;
+      // navigate to the left column
+      case KeyboardKeys.ArrowLeft:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex - 1, KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the down row
+      case KeyboardKeys.ArrowDown:
+        focusEmoji(currentEmojisFocus.rowIndex === lastRowIndex ? lastRowIndex : currentEmojisFocus.rowIndex + 1, currentEmojisFocus.columnIndex, KeyboardNavigationDirection.Down);
+        break;
+      // navigate to the row after {EMOJI_LIST_PAGE_COUNT} rows
+      case KeyboardKeys.PageDown:
+        focusEmoji(currentEmojisFocus.rowIndex + EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, KeyboardNavigationDirection.Down, true);
+        break;
+      // navigate to the up row
+      case KeyboardKeys.ArrowUp:
+        focusEmoji(currentEmojisFocus.rowIndex <= 1 ? 1 : currentEmojisFocus.rowIndex - 1, currentEmojisFocus.columnIndex, KeyboardNavigationDirection.Up);
+        break;
+      // navigate to the row before {EMOJI_LIST_PAGE_COUNT} rows
+      case KeyboardKeys.PageUp:
+        focusEmoji(currentEmojisFocus.rowIndex - EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, KeyboardNavigationDirection.Up, true);
+        break;
+      // navigate to the first cell of current row
+      case KeyboardKeys.Home:
+        focusEmoji(currentEmojisFocus.rowIndex, 0, KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the last cell of current row
+      case KeyboardKeys.End:
+        focusEmoji(currentEmojisFocus.rowIndex, lastColumnIndex, KeyboardNavigationDirection.Left);
+        break;
+    }
+  };
+
   // Exposing a custom ref handle to the parent component EmojiPickerList to trigger scrollToRow via the listRef
   // https://beta.reactjs.org/reference/react/useImperativeHandle
   useImperativeHandle(ref, function () {
     return {
       scrollToRow: function scrollToRow(index) {
-        // only scroll if row index is defined and has changed
-        if (index !== undefined && currentIndex.current !== index) {
-          currentIndex.current = index;
+        if (index !== undefined) {
+          rowVirtualizer.setOptions(_objectSpread(_objectSpread({}, rowVirtualizer.options), {}, {
+            scrollPaddingStart: 0
+          }));
           rowVirtualizer.scrollToIndex(index, {
             align: scrollToAlignment,
             smoothScroll: false
           });
         }
+      },
+      scrollToRowAndFocusLastEmoji: function scrollToRowAndFocusLastEmoji(index) {
+        if (index !== undefined) {
+          focusEmoji(index, EMOJI_LIST_COLUMNS, KeyboardNavigationDirection.Left, true);
+        }
+      },
+      updateFocusIndex: function updateFocusIndex(index) {
+        var _virtualistItemsRef$c2;
+        // 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
+          });
+        }
       }
     };
-  }, [scrollToAlignment, rowVirtualizer]);
+  }, [setEmojisFocus, focusEmoji, rowVirtualizer, scrollToAlignment]);
   return jsx("div", {
     ref: parentRef,
-    role: "grid",
     style: {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")
     },
     css: virtualList,
-    "data-testid": virtualListScrollContainerTestId
+    "data-testid": virtualListScrollContainerTestId,
+    "aria-labelledby": "emoji-picker-table-description",
+    role: "grid"
   }, jsx("div", {
     style: {
       height: "".concat(rowVirtualizer.getTotalSize(), "px"),
       width: '100%',
       position: 'relative'
-    }
-  }, rowVirtualizer.getVirtualItems().map(function (virtualRow) {
+    },
+    ref: virtualistItemsRef,
+    onKeyDown: handleKeyDown,
+    role: "presentation"
+  }, rowVirtualizer.getVirtualItems().map(function (virtualRow, index) {
     return jsx("div", {
       key: virtualRow.key,
       style: {
@@ -105,7 +286,9 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         width: '100%',
         height: "".concat(virtualRow.size, "px"),
         transform: "translateY(".concat(virtualRow.start, "px)")
-      }
+      },
+      role: "row",
+      "aria-rowindex": index + 1
     }, rowRenderer(virtualRow));
   })));
 });

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

@@ -1,11 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css4, _css5, _css6;
+var _css3, _css4, _css5;
 import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
 import { defaultEmojiPickerSize, emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerMinHeight, emojiPickerWidth } from '../../util/constants';
-import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors';
+import { B100, B200, B300, N100A, N30, N30A, N50, N900 } from '@atlaskit/theme/colors';
 import { emojiPickerHeightOffset } from './utils';
 
 // Level 1 - picker
@@ -18,11 +17,10 @@ export var emojiPicker = function emojiPicker(hasPreview) {
     justifyContent: 'space-between',
     background: "var(--ds-surface-overlay, white)",
     border: "".concat(emojiPickerBorderColor, " 1px solid"),
-    borderRadius: "".concat(borderRadius(), "px"),
+    borderRadius: "var(--ds-radius-100, 3px)",
     boxShadow: emojiPickerBoxShadow,
     height: "".concat(hasPreview ? emojiPickerHeightWithPreview + heightOffset : emojiPickerHeight + heightOffset, "px"),
     width: "".concat(emojiPickerWidth, "px"),
-    marginBottom: '8px',
     minWidth: "".concat(emojiPickerWidth, "px"),
     minHeight: "".concat(emojiPickerMinHeight + heightOffset, "px"),
     maxHeight: 'calc(80vh - 86px)' // ensure showing full picker in small device: mobile header is 40px (Jira) - 56px(Confluence and Atlas), reaction picker height is 24px with margin 6px,
@@ -32,32 +30,21 @@ export var emojiPicker = function emojiPicker(hasPreview) {
 // Level 2
 
 /// Category Selector
-
-export var addButton = 'emoji-picker-add-button';
-export var categorySelector = css(_defineProperty({
+export var categorySelector = css({
   flex: '0 0 auto',
   backgroundColor: "var(--ds-surface-sunken, ".concat(N30, ")"),
-  ul: {
-    listStyle: 'none',
-    margin: '0 4px',
-    padding: '3px 0',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  },
-  li: {
-    display: 'inline-block',
-    margin: 0,
-    padding: 0,
-    button: {
-      verticalAlign: 'middle'
-    }
+  button: {
+    display: 'flex' // this will ensure the button height is concise per design
   }
-}, ".".concat(addButton), {
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  margin: '0 0 0 5px',
-  verticalAlign: 'middle'
-}));
+});
+
+export var categorySelectorTablist = css({
+  padding: '6px 8px',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-around',
+  alignItems: 'center'
+});
 export var active = css(_defineProperty({
   color: "var(--ds-text-selected, ".concat(B300, ")")
 }, '&:hover', {
@@ -69,20 +56,24 @@ export var disable = css(_defineProperty({
 }, '&:hover', {
   color: "var(--ds-text-subtlest, ".concat(N50, ")")
 }));
-export var categoryStyles = css((_css4 = {
+export var categoryStyles = css((_css3 = {
   backgroundColor: 'transparent',
   border: 0,
+  borderRadius: "var(--ds-radius-100, 3px)",
   color: "var(--ds-text-subtlest, ".concat(N100A, ")"),
   cursor: 'pointer',
-  margin: '2px 0',
   padding: 0,
   transition: 'color 0.2s ease'
-}, _defineProperty(_css4, '&::-moz-focus-inner', {
+}, _defineProperty(_css3, '&::-moz-focus-inner', {
   border: '0 none',
   padding: 0
-}), _defineProperty(_css4, '&:hover', {
+}), _defineProperty(_css3, '&:hover', {
   color: "var(--ds-text-selected, ".concat(B200, ")")
-}), _css4));
+}), _defineProperty(_css3, '&:focus', {
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+  transitionDuration: '0s, 0.2s',
+  outline: 'none'
+}), _css3));
 
 /// EmojiPickerList
 
@@ -100,7 +91,8 @@ export var virtualList = css({
   overflowY: 'auto',
   '&:focus': {
     outline: 'none'
-  }
+  },
+  paddingBottom: '8px'
 });
 
 //// Search
@@ -108,7 +100,7 @@ export var virtualList = css({
 export var searchIcon = css({
   opacity: 0.5
 });
-export var input = css((_css5 = {
+export var input = css((_css4 = {
   boxSizing: 'border-box',
   color: 'inherit',
   cursor: 'inherit',
@@ -116,11 +108,11 @@ export var input = css((_css5 = {
   outline: 'none',
   padding: '1px 0 2px 6px',
   width: '100%'
-}, _defineProperty(_css5, '&:invalid', {
+}, _defineProperty(_css4, '&:invalid', {
   boxShadow: 'none'
-}), _defineProperty(_css5, '&::-ms-clear', {
+}), _defineProperty(_css4, '&::-ms-clear', {
   display: 'none'
-}), _css5));
+}), _css4));
 export var pickerSearch = css({
   boxSizing: 'border-box',
   padding: '10px 10px 11px 10px',
@@ -155,24 +147,24 @@ export var emojiCategoryTitle = css({
     textTransform: 'uppercase'
   }
 });
-export var emojiItem = css((_css6 = {
+export var emojiItem = css((_css5 = {
   display: 'inline-block',
   textAlign: 'center',
   width: '40px'
-}, _defineProperty(_css6, "& .".concat(emojiNodeStyles), {
+}, _defineProperty(_css5, "& .".concat(emojiNodeStyles), {
   cursor: 'pointer',
   padding: '8px',
   borderRadius: '5px',
   width: '24px',
   height: '24px'
-}), _defineProperty(_css6, "& .".concat(placeholder), {
+}), _defineProperty(_css5, "& .".concat(placeholder), {
   padding: '0',
   margin: '7px',
   minWidth: '24px',
   maxWidth: '24px'
-}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " .").concat(placeholder), {
+}), _defineProperty(_css5, "& .".concat(emojiNodeStyles, " .").concat(placeholder), {
   margin: '0'
-}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " > img"), {
+}), _defineProperty(_css5, "& .".concat(emojiNodeStyles, " > img"), {
   position: 'relative',
   left: '50%',
   top: '50%',
@@ -180,10 +172,10 @@ export var emojiItem = css((_css6 = {
   maxHeight: '24px',
   maxWidth: '24px',
   display: 'block'
-}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " > .").concat(emojiSprite), {
+}), _defineProperty(_css5, "& .".concat(emojiNodeStyles, " > .").concat(emojiSprite), {
   height: '24px',
   width: '24px'
-}), _css6));
+}), _css5));
 
 /// Footer
 export var emojiPickerFooter = css({

package/dist/esm/context/EmojiPickerListContext.js

@@ -0,0 +1,21 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useState } from 'react';
+export var EmojiPickerListContext = /*#__PURE__*/createContext({
+  currentEmojisFocus: {
+    rowIndex: 0,
+    columnIndex: 0
+  },
+  setEmojisFocus: function setEmojisFocus() {}
+});
+export var EmojiPickerListContextProvider = function EmojiPickerListContextProvider(props) {
+  var _useState = useState(props.initialEmojisFocus),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentEmojisFocus = _useState2[0],
+    setEmojisFocus = _useState2[1];
+  return /*#__PURE__*/React.createElement(EmojiPickerListContext.Provider, {
+    value: {
+      currentEmojisFocus: currentEmojisFocus,
+      setEmojisFocus: setEmojisFocus
+    }
+  }, props.children);
+};

package/dist/esm/hooks/useEmojiPickerListContext.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { EmojiPickerListContext } from '../context/EmojiPickerListContext';
+export var useEmojiPickerListContext = function useEmojiPickerListContext() {
+  return useContext(EmojiPickerListContext);
+};

package/dist/esm/util/constants.js

@@ -1,6 +1,8 @@
 export var customCategory = 'CUSTOM';
 export var frequentCategory = 'FREQUENT';
 export var customType = 'SITE';
+export var searchCategory = 'SEARCH';
+export var yourUploadsCategory = 'USER_CUSTOM';
 export var customTitle = 'allUploadsCustomCategory';
 export var userCustomTitle = 'userUploadsCustomCategory';
 export var dataURLPrefix = 'data:';
@@ -24,9 +26,38 @@ export var emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreview
 export var localStoragePrefix = 'fabric.emoji';
 export var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");
 export var defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
+export var KeyboardKeys;
+
+// Used to search available emoji in the picker list to focus
+(function (KeyboardKeys) {
+  KeyboardKeys["ArrowLeft"] = "ArrowLeft";
+  KeyboardKeys["ArrowRight"] = "ArrowRight";
+  KeyboardKeys["ArrowUp"] = "ArrowUp";
+  KeyboardKeys["ArrowDown"] = "ArrowDown";
+  KeyboardKeys["PageUp"] = "PageUp";
+  KeyboardKeys["PageDown"] = "PageDown";
+  KeyboardKeys["Home"] = "Home";
+  KeyboardKeys["End"] = "End";
+  KeyboardKeys["Enter"] = "Enter";
+  KeyboardKeys["Tab"] = "Tab";
+  KeyboardKeys["Space"] = " ";
+})(KeyboardKeys || (KeyboardKeys = {}));
+export var KeyboardNavigationDirection;
+(function (KeyboardNavigationDirection) {
+  KeyboardNavigationDirection["Down"] = "Down";
+  KeyboardNavigationDirection["Up"] = "Up";
+  KeyboardNavigationDirection["Left"] = "Left";
+  KeyboardNavigationDirection["Right"] = "Right";
+})(KeyboardNavigationDirection || (KeyboardNavigationDirection = {}));
+export var CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED = [KeyboardKeys.ArrowRight, KeyboardKeys.ArrowLeft, KeyboardKeys.Home, KeyboardKeys.End];
+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;
 export var defaultListLimit = 50;
 export var migrationUserId = 'hipchat_migration_emoticons';
 export var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker';
+export var EMOJI_LIST_COLUMNS = 8;
+export var EMOJI_LIST_PAGE_COUNT = 5;
 export var EMOJI_SEARCH_DEBOUNCE = 150;
 
 // This is the base sampling rate in Emoji

package/dist/esm/util/shared-styles.js

@@ -1,4 +1,3 @@
-import { borderRadius } from '@atlaskit/theme/constants';
 import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export var emojiPickerListWidth = emojiPickerWidth;
@@ -6,7 +5,7 @@ export var emojiPickerListHeight = 205;
 export var emojiPickerBorderColor = "var(--ds-border, ".concat(N40, ")");
 export var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
 export var noDialogContainerBorderColor = "var(--ds-border, ".concat(N40, ")");
-export var noDialogContainerBorderRadius = "".concat(borderRadius(), "px");
+export var noDialogContainerBorderRadius = "var(--ds-radius-100, 3px)";
 export var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
 export var akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")");
 export var emojiPreviewSelectedColor = "var(--ds-background-neutral, ".concat(N30, ")");

package/dist/esm/version.json

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

package/dist/types/api/EmojiResource.d.ts

@@ -74,6 +74,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected emojiRepository?: EmojiRepository;
     protected lastQuery?: LastQuery;
     protected activeLoaders: number;
+    protected initialLoaders: number;
     protected retries: Map<Retry<any>, ResolveReject<any>>;
     protected siteEmojiResource?: SiteEmojiResource;
     protected selectedTone: ToneSelection;
@@ -95,6 +96,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected initSiteEmojiResource(emojiResponse: EmojiResponse, provider: ServiceConfig): Promise<void>;
     private performRetries;
     getOptimisticImageURL: (emojiId: EmojiId) => string | undefined;
+    protected isRepositoryAvailable: <T>(repository?: T | undefined) => repository is T;
     private isLoaded;
     private loadStoredTone;
     protected refreshLastFilter(): void;

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

@@ -1,6 +1,8 @@
+/** @jsx jsx */
+import React from 'react';
 import { jsx } from '@emotion/react';
 import { EmojiDescription, OnEmojiEvent } from '../../types';
-export interface Props {
+export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMouseMove' | 'onFocus'> {
     /**
      * The emoji to render
      */
@@ -23,6 +25,10 @@ export interface Props {
      * Called when the mouse moves over the emoji.
      */
     onMouseMove?: OnEmojiEvent;
+    /**
+     * Called when the mouse moves over the emoji.
+     */
+    onFocus?: OnEmojiEvent;
     /**
      * Called when an emoji is deleted
      */

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

@@ -22,13 +22,14 @@ export interface Props {
     onOpenUpload: () => void;
     query?: string;
     onChange: (value: string) => void;
+    resultsCount?: number;
 }
 export declare const emojiActionsTestId = "emoji-actions";
 export declare const uploadEmojiTestId = "upload-emoji";
 declare type PropsWithWrappedComponentPropsType = Props & WrappedComponentProps;
 declare type EmojiActionsProps = PropsWithWrappedComponentPropsType;
 export declare const EmojiActions: FC<EmojiActionsProps>;
-declare const _default: FC<import("react-intl-next").WithIntlProps<PropsWithWrappedComponentPropsType>> & {
-    WrappedComponent: import("react").ComponentType<PropsWithWrappedComponentPropsType>;
+declare const _default: FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/components/common/{EmojiButton.d.ts → EmojiRadioButton.d.ts}

@@ -6,9 +6,8 @@ export interface Props {
     onSelected?: () => void;
     selectOnHover?: boolean;
     ariaLabelText?: string;
-    ariaExpanded?: boolean;
-    shouldHideButton?: boolean;
+    defaultChecked?: boolean;
 }
-export declare const EmojiButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>>;
+export declare const EmojiRadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>>;
 export default _default;

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

@@ -1,11 +1,13 @@
 /** @jsx jsx */
-import React from 'react';
+import { FC } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { EmojiUpload, Message } from '../../types';
 export interface OnUploadEmoji {
     (upload: EmojiUpload, retry: boolean, onSuccessHandler?: () => void): void;
 }
 export declare const uploadEmojiNameInputTestId = "upload-emoji-name-input";
+export declare const uploadEmojiComponentTestId = "upload-emoji-component";
+export declare const cancelEmojiUploadPickerTestId = "cancel-emoji-upload-picker";
 export interface Props {
     onUploadEmoji: OnUploadEmoji;
     onUploadCancelled: () => void;
@@ -13,7 +15,7 @@ export interface Props {
     errorMessage?: Message;
     initialUploadName?: string;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const EmojiUploadPickerComponent: FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
-export default _default;
+export default EmojiUploadPickerComponent;

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { EmojiDescription } from '../../types';
+export declare const tonePreviewTestId = "tone-preview";
+export interface Props {
+    emoji: EmojiDescription;
+    isVisible?: boolean;
+    onSelected?: () => void;
+    selectOnHover?: boolean;
+    ariaLabelText?: string;
+    ariaExpanded?: boolean;
+}
+export declare const TonePreviewButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>>;
+export default _default;