@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -1,192 +1,294 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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 { Virtualizer, observeElementRect, observeElementOffset, elementScroll } from '@tanstack/react-virtual';
-import React, { PureComponent, createRef } from '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__*/function (_PureComponent) {
-  _inherits(VirtualList, _PureComponent);
-  var _super = _createSuper(VirtualList);
+export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var parentRef = React.useRef(null);
+  var virtualistItemsRef = React.useRef(null);
+  var rowRenderer = props.rowRenderer,
+    onRowsRendered = props.onRowsRendered,
+    scrollToAlignment = props.scrollToAlignment,
+    width = props.width,
+    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,
+      overscanRowCount = props.overscanRowCount;
+    return {
+      count: rowCount,
+      getScrollElement: function getScrollElement() {
+        return parentRef.current;
+      },
+      estimateSize: rowHeight,
+      overscan: overscanRowCount,
+      onChange: function onChange() {
+        var startIndex = getFirstVisibleListElementIndex();
+        onRowsRendered({
+          startIndex: startIndex
+        });
+      },
+      scrollPaddingStart: 28,
+      scrollPaddingEnd: 28
+    };
+  };
+  var rowVirtualizer = useVirtualizer(getVirtualizerOptions());
+  var isElementVisible = function isElementVisible(element) {
+    var parent = parentRef.current;
+    var elementRect = element.getBoundingClientRect();
+    var parentRect = parent.getBoundingClientRect();
+    var elemTop = elementRect.top;
+    var elemBottom = elementRect.bottom;
+    var parentTop = parentRect.top;
+    var parentBottom = parentRect.bottom;
+
+    // Only completely visible elements return true:
+    var isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
+    return isVisible;
+  };
+  var getFirstVisibleListElementIndex = useCallback(function () {
+    var _parentRef$current, _parentRef$current$fi;
+    var virtualList = rowVirtualizer.getVirtualItems();
+    var renderedElements = (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$fi = _parentRef$current.firstChild) === null || _parentRef$current$fi === void 0 ? void 0 : _parentRef$current$fi.childNodes;
+    if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
+      return 0;
+    }
+    // Convert NodeListOf<ChildNodes> to ChildNodes[]
+    var renderedElementsToArray = Array.from(renderedElements);
+    var firstVisibleIndex = renderedElementsToArray.findIndex(function (elem) {
+      return isElementVisible(elem);
+    });
+    if (firstVisibleIndex !== -1) {
+      var _virtualList$firstVis;
+      return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+    }
+    return 0;
+  }, [rowVirtualizer]);
+
   /**
-   * Determine if the component is mounted to the DOM or not
+   * 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
    */
-
-  function VirtualList(props) {
-    var _this;
-    _classCallCheck(this, VirtualList);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "_isMounted", false);
-    _this.parentRef = /*#__PURE__*/createRef();
-    _this.rowVirtualizer = new Virtualizer(_this.getVirtualizerOptions(props));
-    return _this;
-  }
-  _createClass(VirtualList, [{
-    key: "getVirtualizerOptions",
-    value: function getVirtualizerOptions(props) {
-      var _this2 = this;
-      var rowCount = props.rowCount,
-        rowHeight = props.rowHeight,
-        overscanRowCount = props.overscanRowCount;
+  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 {
-        observeElementRect: observeElementRect,
-        observeElementOffset: observeElementOffset,
-        scrollToFn: elementScroll,
-        count: rowCount,
-        getScrollElement: function getScrollElement() {
-          return _this2.parentRef.current;
-        },
-        estimateSize: rowHeight,
-        overscan: overscanRowCount,
-        onChange: function onChange() {
-          _this2.forceUpdateGrid();
-        }
+        element: emojiToFocus,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
       };
     }
-  }, {
-    key: "isElementVisible",
-    value: function isElementVisible(element) {
-      var parent = this.parentRef.current;
-      var elementRect = element.getBoundingClientRect();
-      var parentRect = parent.getBoundingClientRect();
-      var elemTop = elementRect.top;
-      var elemBottom = elementRect.bottom;
-      var parentTop = parentRect.top;
-      var parentBottom = parentRect.bottom;
-
-      // Only completely visible elements return true:
-      var isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
-      return isVisible;
+    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;
     }
-  }, {
-    key: "getFirstVisibleListElementIndex",
-    value: function getFirstVisibleListElementIndex() {
-      var _this$parentRef$curre,
-        _this$parentRef$curre2,
-        _this3 = this;
-      var virtualList = this.rowVirtualizer.getVirtualItems();
-      var renderedElements = (_this$parentRef$curre = this.parentRef.current) === null || _this$parentRef$curre === void 0 ? void 0 : (_this$parentRef$curre2 = _this$parentRef$curre.firstChild) === null || _this$parentRef$curre2 === void 0 ? void 0 : _this$parentRef$curre2.childNodes;
-      if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
-        return 0;
-      }
+  }, [rowCount]);
 
-      // Convert NodeListOf<ChildNodes> to ChildNodes[]
-      var renderedElementsToArray = Array.from(renderedElements);
-      var firstVisibleIndex = renderedElementsToArray.findIndex(function (elem) {
-        return _this3.isElementVisible(elem);
+  /**
+   * 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
       });
-      if (firstVisibleIndex !== -1) {
-        var _virtualList$firstVis;
-        return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
-      }
-      return 0;
-    }
-  }, {
-    key: "onRendered",
-    value: function onRendered() {
-      var onRowsRendered = this.props.onRowsRendered;
-      this.rowVirtualizer.setOptions(this.getVirtualizerOptions(this.props));
-      var startIndex = this.getFirstVisibleListElementIndex();
-      onRowsRendered({
-        startIndex: startIndex
+      (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 ? void 0 : _emojiToFocus$element.focus({
+        preventScroll: true
+      });
+      setEmojisFocus({
+        rowIndex: emojiToFocus.rowIndex,
+        columnIndex: emojiToFocus.columnIndex
       });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.onRendered();
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.rowVirtualizer) {
-        this.rowVirtualizer._didMount();
-        this.rowVirtualizer._willUpdate();
-        this._isMounted = true;
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false;
-    }
-  }, {
-    key: "scrollToRow",
-    value: function scrollToRow(index) {
-      var scrollToAlignment = this.props.scrollToAlignment;
-      if (index !== undefined) {
-        var _this$rowVirtualizer;
-        (_this$rowVirtualizer = this.rowVirtualizer) === null || _this$rowVirtualizer === void 0 ? void 0 : _this$rowVirtualizer.scrollToIndex(index, {
-          align: scrollToAlignment,
-          smoothScroll: false
-        });
-        this.forceUpdateGrid();
-      }
+  }, [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);
     }
-  }, {
-    key: "forceUpdateGrid",
-    value: function forceUpdateGrid() {
-      if (this._isMounted) {
-        this.forceUpdate();
-      }
+  }, [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;
     }
-  }, {
-    key: "recomputeRowHeights",
-    value: function recomputeRowHeights() {
-      var _this$rowVirtualizer2;
-      (_this$rowVirtualizer2 = this.rowVirtualizer) === null || _this$rowVirtualizer2 === void 0 ? void 0 : _this$rowVirtualizer2.measure();
+    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;
     }
-  }, {
-    key: "handleScroll",
-    value: function handleScroll(e) {
-      e.preventDefault();
+    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;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$rowVirtualizer3, _this$rowVirtualizer4;
-      var _this$props = this.props,
-        rowRenderer = _this$props.rowRenderer,
-        width = _this$props.width,
-        height = _this$props.height;
-      return jsx("div", {
-        ref: this.parentRef,
-        role: "grid",
-        style: {
-          height: "".concat(height, "px"),
-          width: "".concat(width, "px")
-        },
-        css: virtualList,
-        "data-testid": virtualListScrollContainerTestId,
-        onScroll: this.handleScroll
-      }, jsx("div", {
-        style: {
-          height: "".concat((_this$rowVirtualizer3 = this.rowVirtualizer) === null || _this$rowVirtualizer3 === void 0 ? void 0 : _this$rowVirtualizer3.getTotalSize(), "px"),
-          width: '100%',
-          position: 'relative'
+  };
+
+  // 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) {
+        if (index !== undefined) {
+          rowVirtualizer.setOptions(_objectSpread(_objectSpread({}, rowVirtualizer.options), {}, {
+            scrollPaddingStart: 0
+          }));
+          rowVirtualizer.scrollToIndex(index, {
+            align: scrollToAlignment,
+            smoothScroll: false
+          });
         }
-      }, (_this$rowVirtualizer4 = this.rowVirtualizer) === null || _this$rowVirtualizer4 === void 0 ? void 0 : _this$rowVirtualizer4.getVirtualItems().map(function (virtualRow) {
-        return jsx("div", {
-          key: virtualRow.key,
-          style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: "".concat(virtualRow.size, "px"),
-            transform: "translateY(".concat(virtualRow.start, "px)")
-          }
-        }, rowRenderer(virtualRow));
-      })));
-    }
-  }]);
-  return VirtualList;
-}(PureComponent);
+      },
+      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
+          });
+        }
+      }
+    };
+  }, [setEmojisFocus, focusEmoji, rowVirtualizer, scrollToAlignment]);
+  return jsx("div", {
+    ref: parentRef,
+    style: {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    },
+    css: virtualList,
+    "data-testid": virtualListScrollContainerTestId,
+    "aria-labelledby": "emoji-picker-table-description",
+    role: "grid"
+  }, jsx("div", {
+    style: {
+      height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+      width: '100%',
+      position: 'relative'
+    },
+    ref: virtualistItemsRef,
+    onKeyDown: handleKeyDown,
+    role: "presentation"
+  }, rowVirtualizer.getVirtualItems().map(function (virtualRow, index) {
+    return jsx("div", {
+      key: virtualRow.key,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        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({