@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -6,198 +6,300 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.virtualListScrollContainerTestId = exports.VirtualList = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _reactVirtual = require("@tanstack/react-virtual");
 var _react2 = _interopRequireWildcard(require("react"));
 var _styles = require("./styles");
+var _reactVirtual = require("@tanstack/react-virtual");
+var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
+var _constants = require("../../util/constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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) { (0, _defineProperty2.default)(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; }
 var virtualListScrollContainerTestId = 'virtual-list-scroll-container';
 exports.virtualListScrollContainerTestId = virtualListScrollContainerTestId;
-var VirtualList = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(VirtualList, _PureComponent);
-  var _super = _createSuper(VirtualList);
+var VirtualList = /*#__PURE__*/_react2.default.forwardRef(function (props, ref) {
+  var parentRef = _react2.default.useRef(null);
+  var virtualistItemsRef = _react2.default.useRef(null);
+  var rowRenderer = props.rowRenderer,
+    onRowsRendered = props.onRowsRendered,
+    scrollToAlignment = props.scrollToAlignment,
+    width = props.width,
+    height = props.height,
+    rowCount = props.rowCount;
+  var _useEmojiPickerListCo = (0, _useEmojiPickerListContext.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 = (0, _reactVirtual.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 = (0, _react2.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;
-    (0, _classCallCheck2.default)(this, VirtualList);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isMounted", false);
-    _this.parentRef = /*#__PURE__*/(0, _react2.createRef)();
-    _this.rowVirtualizer = new _reactVirtual.Virtualizer(_this.getVirtualizerOptions(props));
-    return _this;
-  }
-  (0, _createClass2.default)(VirtualList, [{
-    key: "getVirtualizerOptions",
-    value: function getVirtualizerOptions(props) {
-      var _this2 = this;
-      var rowCount = props.rowCount,
-        rowHeight = props.rowHeight,
-        overscanRowCount = props.overscanRowCount;
+  var findNextEmoji = (0, _react2.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 = _constants.EMOJI_LIST_COLUMNS - 1;
+    if (emojiToFocus) {
       return {
-        observeElementRect: _reactVirtual.observeElementRect,
-        observeElementOffset: _reactVirtual.observeElementOffset,
-        scrollToFn: _reactVirtual.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 _constants.KeyboardNavigationDirection.Down:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // find emoji in same column but lower row
+        return findNextEmoji(rowIndex + 1, columnIndex, _constants.KeyboardNavigationDirection.Down);
+      case _constants.KeyboardNavigationDirection.Up:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        // find emoji in same column but upper row
+        return findNextEmoji(rowIndex - 1, columnIndex, _constants.KeyboardNavigationDirection.Up);
+      case _constants.KeyboardNavigationDirection.Left:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        if (columnIndex < 0) {
+          // find emoji in upper row
+          return findNextEmoji(rowIndex - 1, lastColumnIndex, _constants.KeyboardNavigationDirection.Left);
+        }
+        // find emoji on left in the current row
+        return findNextEmoji(rowIndex, columnIndex - 1, _constants.KeyboardNavigationDirection.Left);
+      case _constants.KeyboardNavigationDirection.Right:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // if no emoji on right, we try first emoji in next row
+        return findNextEmoji(rowIndex + 1, 0, _constants.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 = (0, _react2.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 = (0, _react2.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 (!_constants.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 = _constants.EMOJI_LIST_COLUMNS - 1;
+
+    // focus first emoji on first row
+    if (e.key === _constants.KeyboardKeys.Home && e.ctrlKey) {
+      focusEmoji(1, 0, _constants.KeyboardNavigationDirection.Up, true);
+      return;
+    } else if (e.key === _constants.KeyboardKeys.End && e.ctrlKey) {
+      // focus last available emoji on last row
+      focusEmoji(lastRowIndex, lastColumnIndex, _constants.KeyboardNavigationDirection.Left, true);
+      return;
     }
-  }, {
-    key: "handleScroll",
-    value: function handleScroll(e) {
-      e.preventDefault();
+    switch (e.key) {
+      // navigate to the right column
+      case _constants.KeyboardKeys.ArrowRight:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex + 1, _constants.KeyboardNavigationDirection.Right);
+        break;
+      // navigate to the left column
+      case _constants.KeyboardKeys.ArrowLeft:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex - 1, _constants.KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the down row
+      case _constants.KeyboardKeys.ArrowDown:
+        focusEmoji(currentEmojisFocus.rowIndex === lastRowIndex ? lastRowIndex : currentEmojisFocus.rowIndex + 1, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Down);
+        break;
+      // navigate to the row after {EMOJI_LIST_PAGE_COUNT} rows
+      case _constants.KeyboardKeys.PageDown:
+        focusEmoji(currentEmojisFocus.rowIndex + _constants.EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Down, true);
+        break;
+      // navigate to the up row
+      case _constants.KeyboardKeys.ArrowUp:
+        focusEmoji(currentEmojisFocus.rowIndex <= 1 ? 1 : currentEmojisFocus.rowIndex - 1, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Up);
+        break;
+      // navigate to the row before {EMOJI_LIST_PAGE_COUNT} rows
+      case _constants.KeyboardKeys.PageUp:
+        focusEmoji(currentEmojisFocus.rowIndex - _constants.EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Up, true);
+        break;
+      // navigate to the first cell of current row
+      case _constants.KeyboardKeys.Home:
+        focusEmoji(currentEmojisFocus.rowIndex, 0, _constants.KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the last cell of current row
+      case _constants.KeyboardKeys.End:
+        focusEmoji(currentEmojisFocus.rowIndex, lastColumnIndex, _constants.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 (0, _react.jsx)("div", {
-        ref: this.parentRef,
-        role: "grid",
-        style: {
-          height: "".concat(height, "px"),
-          width: "".concat(width, "px")
-        },
-        css: _styles.virtualList,
-        "data-testid": virtualListScrollContainerTestId,
-        onScroll: this.handleScroll
-      }, (0, _react.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
+  (0, _react2.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 (0, _react.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;
-}(_react2.PureComponent);
+      },
+      scrollToRowAndFocusLastEmoji: function scrollToRowAndFocusLastEmoji(index) {
+        if (index !== undefined) {
+          focusEmoji(index, _constants.EMOJI_LIST_COLUMNS, _constants.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 (0, _react.jsx)("div", {
+    ref: parentRef,
+    style: {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    },
+    css: _styles.virtualList,
+    "data-testid": virtualListScrollContainerTestId,
+    "aria-labelledby": "emoji-picker-table-description",
+    role: "grid"
+  }, (0, _react.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 (0, _react.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));
+  })));
+});
 exports.VirtualList = VirtualList;