@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -1,107 +1,70 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import { injectIntl } from 'react-intl-next';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import { input, pickerSearch, searchIcon } from './styles';
+import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
+import { useDebouncedCallback } from 'use-debounce';
 export const emojiPickerSearchTestId = 'emoji-picker-serach';
-class EmojiPickerListSearch extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "onBlur", () => {
-      const activeElement = document.activeElement;
-      // Input lost focus to emoji picker container (happens in IE11 when updating search results)
-      // See FS-2111
-      if (activeElement instanceof HTMLElement && activeElement.getAttribute('data-emoji-picker-container')) {
-        this.restoreInputFocus();
+export const EmojiPickerListSearch = props => {
+  const {
+    style,
+    query,
+    resultsCount,
+    onChange
+  } = props;
+  const textRef = useRef(null);
+  const [dirty, setDirty] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
+
+  // Debounce callback
+  const [debouncedSearch] = useDebouncedCallback(value => {
+    onChange(value);
+    setDirty(true);
+  },
+  // delay in ms
+  EMOJI_SEARCH_DEBOUNCE);
+  const handleOnChange = e => {
+    debouncedSearch(e.target.value);
+  };
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      if (textRef) {
+        var _textRef$current;
+        (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.focus();
       }
     });
-    _defineProperty(this, "onChange", e => {
-      this.saveInputSelection();
-      this.props.onChange(e);
-    });
-    _defineProperty(this, "focusInput", () => {
-      if (this.inputRef) {
-        this.inputRef.focus();
-      }
-    });
-    _defineProperty(this, "handleInputRef", input => {
-      if (input) {
-        // Defer focus so it give some time to position the popup before
-        // setting the focus to search input.
-        // see FS-2056
-        this.inputRef = input;
-        if (typeof window === 'undefined') {
-          return;
-        }
-        window.requestAnimationFrame(this.focusInput);
-      }
-    });
-  }
-  saveInputSelection() {
-    this.inputSelection = undefined;
-    if (this.inputRef) {
-      const {
-        selectionStart,
-        selectionEnd,
-        selectionDirection
-      } = this.inputRef;
-      if (selectionStart && selectionEnd && selectionDirection) {
-        this.inputSelection = {
-          selectionStart,
-          selectionEnd,
-          selectionDirection: selectionDirection
-        };
-      }
-    }
-  }
-  restoreInputFocus() {
-    this.focusInput();
-    if (this.inputSelection && this.inputRef && this.inputRef.setSelectionRange) {
-      const {
-        selectionStart,
-        selectionEnd,
-        selectionDirection
-      } = this.inputSelection;
-      this.inputRef.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
-    }
-  }
-  render() {
-    const {
-      style,
-      query,
-      intl
-    } = this.props;
-    const {
-      formatMessage
-    } = intl;
-    return jsx("div", {
-      css: pickerSearch,
-      style: style
-    }, jsx(TextField, {
-      "aria-label": formatMessage(messages.searchLabel),
-      css: input,
-      autoComplete: "off",
-      name: "search",
-      placeholder: `${formatMessage(messages.searchPlaceholder)}...`,
-      onChange: this.onChange,
-      value: query || '',
-      ref: this.handleInputRef,
-      isCompact: true,
-      onBlur: this.onBlur,
-      elemBeforeInput: jsx("span", {
-        css: searchIcon
-      }, jsx(SearchIcon, {
-        label: ""
-      })),
-      testId: emojiPickerSearchTestId
-    }));
-  }
-}
-_defineProperty(EmojiPickerListSearch, "defaultProps", {
-  style: {}
-});
-export default injectIntl(EmojiPickerListSearch);
+  }, []);
+  return jsx("div", {
+    css: pickerSearch,
+    style: style
+  }, jsx(VisuallyHidden, {
+    id: "emoji-search-results-status",
+    role: "status"
+  }, dirty && query === '' && formatMessage(messages.searchResultsStatusSeeAll), query !== '' && formatMessage(messages.searchResultsStatus, {
+    count: resultsCount
+  })), jsx(TextField, {
+    role: "searchbox",
+    "aria-label": formatMessage(messages.searchLabel),
+    css: input,
+    autoComplete: "off",
+    name: "search",
+    placeholder: `${formatMessage(messages.searchPlaceholder)}...`,
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: jsx("span", {
+      css: searchIcon
+    }, jsx(SearchIcon, {
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true
+  }));
+};

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
@@ -16,7 +17,9 @@ export class AbstractItem {
 export class EmojisRowItem extends AbstractItem {
   constructor(props) {
     super(props, sizes.emojiRowHeight);
-    _defineProperty(this, "renderItem", () => jsx(EmojiPickerEmojiRow, this.props));
+    _defineProperty(this, "renderItem", context => jsx(EmojiPickerEmojiRow, _extends({}, this.props, {
+      virtualItemContext: context
+    })));
   }
 }
 export class LoadingItem extends AbstractItem {

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

@@ -1,42 +1,50 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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 const virtualListScrollContainerTestId = 'virtual-list-scroll-container';
-export class VirtualList extends PureComponent {
-  /**
-   * Determine if the component is mounted to the DOM or not
-   */
-
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "_isMounted", false);
-    this.parentRef = /*#__PURE__*/createRef();
-    this.rowVirtualizer = new Virtualizer(this.getVirtualizerOptions(props));
-  }
-  getVirtualizerOptions(props) {
+export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const parentRef = React.useRef(null);
+  const virtualistItemsRef = React.useRef(null);
+  const {
+    rowRenderer,
+    onRowsRendered,
+    scrollToAlignment,
+    width,
+    height,
+    rowCount
+  } = props;
+  const {
+    currentEmojisFocus,
+    setEmojisFocus
+  } = useEmojiPickerListContext();
+  const getVirtualizerOptions = () => {
     const {
       rowCount,
       rowHeight,
       overscanRowCount
     } = props;
     return {
-      observeElementRect: observeElementRect,
-      observeElementOffset: observeElementOffset,
-      scrollToFn: elementScroll,
       count: rowCount,
-      getScrollElement: () => this.parentRef.current,
+      getScrollElement: () => parentRef.current,
       estimateSize: rowHeight,
       overscan: overscanRowCount,
       onChange: () => {
-        this.forceUpdateGrid();
-      }
+        const startIndex = getFirstVisibleListElementIndex();
+        onRowsRendered({
+          startIndex
+        });
+      },
+      scrollPaddingStart: 28,
+      scrollPaddingEnd: 28
     };
-  }
-  isElementVisible(element) {
-    const parent = this.parentRef.current;
+  };
+  const rowVirtualizer = useVirtualizer(getVirtualizerOptions());
+  const isElementVisible = element => {
+    const parent = parentRef.current;
     const elementRect = element.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
     const elemTop = elementRect.top;
@@ -47,105 +55,236 @@ export class VirtualList extends PureComponent {
     // Only completely visible elements return true:
     const isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
     return isVisible;
-  }
-  getFirstVisibleListElementIndex() {
-    var _this$parentRef$curre, _this$parentRef$curre2;
-    const virtualList = this.rowVirtualizer.getVirtualItems();
-    const 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;
+  };
+  const getFirstVisibleListElementIndex = useCallback(() => {
+    var _parentRef$current, _parentRef$current$fi;
+    const virtualList = rowVirtualizer.getVirtualItems();
+    const 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[]
     const renderedElementsToArray = Array.from(renderedElements);
-    const firstVisibleIndex = renderedElementsToArray.findIndex(elem => this.isElementVisible(elem));
+    const firstVisibleIndex = renderedElementsToArray.findIndex(elem => 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;
-  }
-  onRendered() {
-    const {
-      onRowsRendered
-    } = this.props;
-    this.rowVirtualizer.setOptions(this.getVirtualizerOptions(this.props));
-    const startIndex = this.getFirstVisibleListElementIndex();
-    onRowsRendered({
-      startIndex
-    });
-  }
-  componentDidUpdate() {
-    this.onRendered();
-  }
-  componentDidMount() {
-    if (this.rowVirtualizer) {
-      this.rowVirtualizer._didMount();
-      this.rowVirtualizer._willUpdate();
-      this._isMounted = true;
+  }, [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
+   */
+  const findNextEmoji = useCallback((rowIndex, columnIndex, direction) => {
+    var _virtualistItemsRef$c;
+    const emojiToFocus = (_virtualistItemsRef$c = virtualistItemsRef.current) === null || _virtualistItemsRef$c === void 0 ? void 0 : _virtualistItemsRef$c.querySelector(`[data-focus-index="${rowIndex}-${columnIndex}"]`);
+    const lastRowIndex = rowCount - 1;
+    const lastColumnIndex = EMOJI_LIST_COLUMNS - 1;
+    if (emojiToFocus) {
+      return {
+        element: emojiToFocus,
+        rowIndex,
+        columnIndex
+      };
     }
-  }
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-  scrollToRow(index) {
-    const {
-      scrollToAlignment
-    } = this.props;
-    if (index !== undefined) {
-      var _this$rowVirtualizer;
-      (_this$rowVirtualizer = this.rowVirtualizer) === null || _this$rowVirtualizer === void 0 ? void 0 : _this$rowVirtualizer.scrollToIndex(index, {
-        align: scrollToAlignment,
+    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
+   */
+  const scrollToRowAndFocusEmoji = useCallback(emojiToFocus => {
+    if (emojiToFocus) {
+      var _emojiToFocus$element;
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex, {
+        align: 'auto',
         smoothScroll: false
       });
-      this.forceUpdateGrid();
+      (_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]);
+  const focusEmoji = useCallback((rIndex, cIndex, direction, waitForScrollFinish = 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(() => {
+        const emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+        scrollToRowAndFocusEmoji(emojiToFocus);
+      }, 100); // 100ms is virtual list scrolling time
+    } else {
+      const emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+      scrollToRowAndFocusEmoji(emojiToFocus);
     }
-  }
-  forceUpdateGrid() {
-    if (this._isMounted) {
-      this.forceUpdate();
+  }, [scrollToRowAndFocusEmoji, findNextEmoji, rowVirtualizer]);
+
+  // following the guide from https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+  const handleKeyDown = e => {
+    if (!EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
+      return;
     }
-  }
-  recomputeRowHeights() {
-    var _this$rowVirtualizer2;
-    (_this$rowVirtualizer2 = this.rowVirtualizer) === null || _this$rowVirtualizer2 === void 0 ? void 0 : _this$rowVirtualizer2.measure();
-  }
-  handleScroll(e) {
     e.preventDefault();
-  }
-  render() {
-    var _this$rowVirtualizer3, _this$rowVirtualizer4;
-    const {
-      rowRenderer,
-      width,
-      height
-    } = this.props;
-    return jsx("div", {
-      ref: this.parentRef,
-      role: "grid",
-      style: {
-        height: `${height}px`,
-        width: `${width}px`
+    const lastRowIndex = rowCount - 1;
+    const 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, () => {
+    return {
+      scrollToRow(index) {
+        if (index !== undefined) {
+          rowVirtualizer.setOptions({
+            ...rowVirtualizer.options,
+            scrollPaddingStart: 0
+          });
+          rowVirtualizer.scrollToIndex(index, {
+            align: scrollToAlignment,
+            smoothScroll: false
+          });
+        }
       },
-      css: virtualList,
-      "data-testid": virtualListScrollContainerTestId,
-      onScroll: this.handleScroll
-    }, jsx("div", {
-      style: {
-        height: `${(_this$rowVirtualizer3 = this.rowVirtualizer) === null || _this$rowVirtualizer3 === void 0 ? void 0 : _this$rowVirtualizer3.getTotalSize()}px`,
-        width: '100%',
-        position: 'relative'
-      }
-    }, (_this$rowVirtualizer4 = this.rowVirtualizer) === null || _this$rowVirtualizer4 === void 0 ? void 0 : _this$rowVirtualizer4.getVirtualItems().map(virtualRow => jsx("div", {
-      key: virtualRow.key,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: `${virtualRow.size}px`,
-        transform: `translateY(${virtualRow.start}px)`
+      scrollToRowAndFocusLastEmoji(index) {
+        if (index !== undefined) {
+          focusEmoji(index, EMOJI_LIST_COLUMNS, KeyboardNavigationDirection.Left, true);
+        }
+      },
+      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
+          });
+        }
       }
-    }, rowRenderer(virtualRow)))));
-  }
-}
+    };
+  }, [setEmojisFocus, focusEmoji, rowVirtualizer, scrollToAlignment]);
+  return jsx("div", {
+    ref: parentRef,
+    style: {
+      height: `${height}px`,
+      width: `${width}px`
+    },
+    css: virtualList,
+    "data-testid": virtualListScrollContainerTestId,
+    "aria-labelledby": "emoji-picker-table-description",
+    role: "grid"
+  }, jsx("div", {
+    style: {
+      height: `${rowVirtualizer.getTotalSize()}px`,
+      width: '100%',
+      position: 'relative'
+    },
+    ref: virtualistItemsRef,
+    onKeyDown: handleKeyDown,
+    role: "presentation"
+  }, rowVirtualizer.getVirtualItems().map((virtualRow, index) => jsx("div", {
+    key: virtualRow.key,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: `${virtualRow.size}px`,
+      transform: `translateY(${virtualRow.start}px)`
+    },
+    role: "row",
+    "aria-rowindex": index + 1
+  }, rowRenderer(virtualRow)))));
+});