@pingux/astro 2.214.0 → 2.216.0-alpha.0

package/lib/cjs/components/TableBase/TableBase.test.js

@@ -14,6 +14,7 @@ var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _sort2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
 var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
@@ -559,6 +560,101 @@ test('Arrow Left move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerato
     }
   }, _callee10);
 })));
+var renderWithLoadingState = function renderWithLoadingState(loadingState) {
+  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+    "aria-label": "table",
+    loadingState: loadingState
+  }, (0, _react3.jsx)(_index.THead, {
+    columns: headers
+  }, function (head) {
+    return (0, _react3.jsx)(_index.Column, {
+      key: head.key
+    }, head.name);
+  }), (0, _react3.jsx)(_index.TBody, {
+    items: []
+  }, function () {
+    return (0, _react3.jsx)(_index.Row, null, (0, _react3.jsx)(_index.Cell, null, "A"), (0, _react3.jsx)(_index.Cell, null, "B"), (0, _react3.jsx)(_index.Cell, null, "C"));
+  })));
+};
+describe('Loading state', function () {
+  test('renders Loader when loadingState is "loading"', function () {
+    renderWithLoadingState('loading');
+    expect(_react2.screen.getByRole('alert')).toBeInTheDocument();
+  });
+  test('renders Loader when loadingState is "sorting"', function () {
+    renderWithLoadingState('sorting');
+    expect(_react2.screen.getByRole('alert')).toBeInTheDocument();
+  });
+  test('does not render Loader when loadingState is absent', function () {
+    renderWithLoadingState();
+    expect(_react2.screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+  test('does not render Loader when loadingState is "loadingMore", renders empty state instead (Constraint #6)', function () {
+    renderWithLoadingState('loadingMore');
+    expect(_react2.screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(_react2.screen.getByText('No items exist')).toBeInTheDocument();
+  });
+});
+describe('Empty state', function () {
+  test('renders default empty state when items is empty and no loadingState', function () {
+    (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+      "aria-label": "table"
+    }, (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: []
+    }, function () {
+      return (0, _react3.jsx)(_index.Row, null, (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null));
+    })));
+    expect(_react2.screen.getByText('No items exist')).toBeInTheDocument();
+  });
+  test('renders custom renderEmptyState and not default empty state', function () {
+    (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+      "aria-label": "table",
+      renderEmptyState: function renderEmptyState() {
+        return (0, _react3.jsx)("div", null, "Custom");
+      }
+    }, (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: []
+    }, function () {
+      return (0, _react3.jsx)(_index.Row, null, (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null));
+    })));
+    expect(_react2.screen.getByText('Custom')).toBeInTheDocument();
+    expect(_react2.screen.queryByText('No items exist')).not.toBeInTheDocument();
+  });
+  test('renders Loader and not empty state when loadingState is "loading" and items is empty', function () {
+    (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+      "aria-label": "table",
+      loadingState: "loading",
+      renderEmptyState: function renderEmptyState() {
+        return (0, _react3.jsx)("div", null, "Custom");
+      }
+    }, (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: []
+    }, function () {
+      return (0, _react3.jsx)(_index.Row, null, (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null), (0, _react3.jsx)(_index.Cell, null));
+    })));
+    expect(_react2.screen.getByRole('alert')).toBeInTheDocument();
+    expect(_react2.screen.queryByText('Custom')).not.toBeInTheDocument();
+    expect(_react2.screen.queryByText('No items exist')).not.toBeInTheDocument();
+  });
+});
 describe('Resizable columns', function () {
   var resizableHeaders = [{
     key: 'name',
@@ -860,6 +956,401 @@ describe('Resizable columns', function () {
     });
   });
 });
+describe('onRowAction behavior', function () {
+  test('clicking a cell fires onRowAction with the correct row key', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+    var onRowAction, rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee12$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row');
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context14.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          expect(onRowAction).toHaveBeenCalledTimes(1);
+          expect(onRowAction).toHaveBeenCalledWith('1');
+        case 8:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee12);
+  })));
+  test('rows receive has-actions class when onRowAction is provided', function () {
+    var _context15;
+    var onRowAction = jest.fn();
+    getComponent({
+      onRowAction: onRowAction
+    });
+    var rows = _react2.screen.getAllByRole('row');
+
+    // All body rows (skip the header row at index 0) should have the has-actions class
+    (0, _forEach["default"])(_context15 = (0, _slice["default"])(rows).call(rows, 1)).call(_context15, function (row) {
+      expect(row).toHaveClass('has-actions');
+    });
+  });
+  test('rows do not receive has-actions class when onRowAction is absent', function () {
+    var _context16;
+    getComponent();
+    var rows = _react2.screen.getAllByRole('row');
+    (0, _forEach["default"])(_context16 = (0, _slice["default"])(rows).call(rows, 1)).call(_context16, function (row) {
+      expect(row).not.toHaveClass('has-actions');
+    });
+  });
+  test('pressing Enter on a focused row fires onRowAction when selectionMode is none', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+    var onRowAction, rows;
+    return _regeneratorRuntime().wrap(function _callee13$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            selectionMode: 'none',
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row');
+          _context17.next = 5;
+          return _userEvent["default"].tab();
+        case 5:
+          expect(rows[1]).toHaveFocus();
+
+          // React Aria's usePress fires the action on keyUp (press completion),
+          // so both keyDown and keyUp must be fired.
+          _react2.fireEvent.keyDown(rows[1], {
+            key: 'Enter'
+          });
+          _react2.fireEvent.keyUp(rows[1], {
+            key: 'Enter'
+          });
+          expect(onRowAction).toHaveBeenCalledTimes(1);
+          expect(onRowAction).toHaveBeenCalledWith('1');
+        case 10:
+        case "end":
+          return _context17.stop();
+      }
+    }, _callee13);
+  })));
+  test('clicking an action row applies is-focused class to that row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+    var onRowAction, rows, firstBodyRowCells, secondBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee14$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click a cell in the first body row (rows[0] is the header row)
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context18.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          // First body row should have is-focused; all other body rows should not
+          expect(rows[1]).toHaveClass('is-focused');
+          expect(rows[2]).not.toHaveClass('is-focused');
+          expect(rows[3]).not.toHaveClass('is-focused');
+          expect(rows[4]).not.toHaveClass('is-focused');
+
+          // Click a cell in the second body row — highlight should move
+          secondBodyRowCells = rows[2].querySelectorAll('td');
+          _context18.next = 13;
+          return _userEvent["default"].click(secondBodyRowCells[0]);
+        case 13:
+          expect(rows[2]).toHaveClass('is-focused');
+          expect(rows[1]).not.toHaveClass('is-focused');
+        case 15:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee14);
+  })));
+  test('no row has is-focused before any click with onRowAction', function () {
+    var _context19;
+    var onRowAction = jest.fn();
+    getComponent({
+      onRowAction: onRowAction
+    });
+    var rows = _react2.screen.getAllByRole('row');
+
+    // At mount time, no body row should have is-focused from active-row state
+    (0, _forEach["default"])(_context19 = (0, _slice["default"])(rows).call(rows, 1)).call(_context19, function (row) {
+      expect(row).not.toHaveClass('is-focused');
+    });
+  });
+  test('clicking a row without onRowAction does not apply is-focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+    var rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee15$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          getComponent();
+          rows = _react2.screen.getAllByRole('row');
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context20.next = 5;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 5:
+          // Without onRowAction the active-row path is not triggered
+          expect(rows[1]).not.toHaveClass('is-focused');
+        case 6:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee15);
+  })));
+  test('keyboard-focused row receives is-focused when onRowAction is present (AC4)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+    var onRowAction, rows;
+    return _regeneratorRuntime().wrap(function _callee16$(_context21) {
+      while (1) switch (_context21.prev = _context21.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            selectionMode: 'none',
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Tab into the table so the first body row has keyboard focus
+          _context21.next = 5;
+          return _userEvent["default"].tab();
+        case 5:
+          expect(rows[1]).toHaveFocus();
+
+          // The row must have is-focused from keyboard focus (isFocusVisible path unchanged)
+          expect(rows[1]).toHaveClass('is-focused');
+        case 7:
+        case "end":
+          return _context21.stop();
+      }
+    }, _callee16);
+  })));
+  test('is-focused class appears only once when keyboard-focused row is also the active row (AC5)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+    var _context22;
+    var onRowAction, rows, firstBodyRowCells, isFocusedCount;
+    return _regeneratorRuntime().wrap(function _callee17$(_context23) {
+      while (1) switch (_context23.prev = _context23.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            selectionMode: 'none',
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click the first body row to set activeRowKey
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context23.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          expect(rows[1]).toHaveClass('is-focused');
+
+          // Count occurrences of the class — must be exactly 1
+          isFocusedCount = (0, _filter["default"])(_context22 = rows[1].className.split(/\s+/)).call(_context22, function (cls) {
+            return cls === 'is-focused';
+          }).length;
+          expect(isFocusedCount).toBe(1);
+        case 9:
+        case "end":
+          return _context23.stop();
+      }
+    }, _callee17);
+  })));
+  test('clicking a row focuses the row <tr> so arrow keys work via React Aria', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+    var onRowAction, rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee18$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click a cell in the first body row
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context24.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          // The <tr> for the clicked row should now have DOM focus
+          expect(rows[1]).toHaveFocus();
+
+          // Arrow keys should then navigate via React Aria
+          _react2.fireEvent.keyDown(rows[1], {
+            key: 'ArrowDown'
+          });
+          _react2.fireEvent.keyUp(rows[1], {
+            key: 'ArrowDown'
+          });
+          expect(rows[2]).toHaveFocus();
+        case 10:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee18);
+  })));
+  test('is-focused (active border) clears when focus leaves the table', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+    var onRowAction, rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee19$(_context25) {
+      while (1) switch (_context25.prev = _context25.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click a cell in the first body row to set activeRowKey
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context25.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          expect(rows[1]).toHaveClass('is-focused');
+
+          // Flush the setTimeout(0) that resets actionJustFired so the blur handler
+          // can proceed normally for genuine focus-out events.
+          (0, _react2.act)(function () {
+            jest.runAllTimers();
+          });
+
+          // Use focusOut (which bubbles) to reach the onBlur handler on the scroll
+          // container, simulating focus leaving the table entirely.
+          _react2.fireEvent.focusOut(rows[1], {
+            relatedTarget: null
+          });
+
+          // is-focused should be cleared
+          expect(rows[1]).not.toHaveClass('is-focused');
+        case 10:
+        case "end":
+          return _context25.stop();
+      }
+    }, _callee19);
+  })));
+  test('clicking an already-active row toggles activeRowKey off (clears is-focused)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+    var onRowAction, rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee20$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row');
+          firstBodyRowCells = rows[1].querySelectorAll('td'); // First click sets the row as active
+          _context26.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          expect(rows[1]).toHaveClass('is-focused');
+
+          // Second click on the same row should toggle it off
+          _context26.next = 9;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 9:
+          expect(rows[1]).not.toHaveClass('is-focused');
+        case 10:
+        case "end":
+          return _context26.stop();
+      }
+    }, _callee20);
+  })));
+  test('active-row highlight does not clear when focus moves to an overlay panel', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+    var onRowAction, rows, firstBodyRowCells, panelButton;
+    return _regeneratorRuntime().wrap(function _callee21$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click the first body row — sets activeRowKey and fires onRowAction
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context27.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          expect(rows[1]).toHaveClass('is-focused');
+
+          // Simulate OverlayPanel FocusScope stealing focus to an element outside the table.
+          // The actionJustFired guard (set synchronously in wrappedOnRowAction) should
+          // absorb this blur and keep the active-row highlight intact.
+          panelButton = document.createElement('button');
+          document.body.appendChild(panelButton);
+          _react2.fireEvent.focusOut(rows[1], {
+            relatedTarget: panelButton
+          });
+
+          // Highlight must survive the focus-steal
+          expect(rows[1]).toHaveClass('is-focused');
+          document.body.removeChild(panelButton);
+        case 12:
+        case "end":
+          return _context27.stop();
+      }
+    }, _callee21);
+  })));
+  test('Enter key on a focused action row applies is-focused to that row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+    var onRowAction, rows;
+    return _regeneratorRuntime().wrap(function _callee22$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            selectionMode: 'none',
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Tab to put keyboard focus on the first body row
+          _context28.next = 5;
+          return _userEvent["default"].tab();
+        case 5:
+          expect(rows[1]).toHaveFocus();
+
+          // Press Enter to trigger onRowAction via keyboard
+          _react2.fireEvent.keyDown(rows[1], {
+            key: 'Enter'
+          });
+          _react2.fireEvent.keyUp(rows[1], {
+            key: 'Enter'
+          });
+          expect(onRowAction).toHaveBeenCalledWith('1');
+
+          // The row should carry is-focused (active-row state set from keyboard action)
+          expect(rows[1]).toHaveClass('is-focused');
+        case 10:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee22);
+  })));
+  test('active-row highlight clears when arrow keys move focus to another row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+    var onRowAction, rows, firstBodyRowCells;
+    return _regeneratorRuntime().wrap(function _callee23$(_context29) {
+      while (1) switch (_context29.prev = _context29.next) {
+        case 0:
+          onRowAction = jest.fn();
+          getComponent({
+            onRowAction: onRowAction
+          });
+          rows = _react2.screen.getAllByRole('row'); // Click row 1 to set it as active (simulates opening a panel)
+          firstBodyRowCells = rows[1].querySelectorAll('td');
+          _context29.next = 6;
+          return _userEvent["default"].click(firstBodyRowCells[0]);
+        case 6:
+          // Flush the setTimeout(0) guard so subsequent focus events are not swallowed
+          (0, _react2.act)(function () {
+            jest.runAllTimers();
+          });
+          expect(rows[1]).toHaveClass('is-focused');
+
+          // Simulate the panel closing by returning focus to the row
+          _react2.fireEvent.focus(rows[1]);
+
+          // Arrow Down moves focus to row 2 — row 1 should lose is-focused
+          _react2.fireEvent.keyDown(rows[1], {
+            key: 'ArrowDown'
+          });
+          _react2.fireEvent.keyUp(rows[1], {
+            key: 'ArrowDown'
+          });
+          _react2.fireEvent.focus(rows[2]);
+          expect(rows[1]).not.toHaveClass('is-focused');
+          expect(rows[2]).toHaveFocus();
+        case 14:
+        case "end":
+          return _context29.stop();
+      }
+    }, _callee23);
+  })));
+});
 describe('Sortable Table with useAsyncList', function () {
   var dataTestId = 'sortableTable';
   var defaultTableProps = {
@@ -872,18 +1363,18 @@ describe('Sortable Table with useAsyncList', function () {
     return _load.apply(this, arguments);
   }
   function _load() {
-    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
-      return _regeneratorRuntime().wrap(function _callee20$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
+    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+      return _regeneratorRuntime().wrap(function _callee32$(_context40) {
+        while (1) switch (_context40.prev = _context40.next) {
           case 0:
-            return _context24.abrupt("return", {
+            return _context40.abrupt("return", {
               items: objects
             });
           case 1:
           case "end":
-            return _context24.stop();
+            return _context40.stop();
         }
-      }, _callee20);
+      }, _callee32);
     }));
     return _load.apply(this, arguments);
   }
@@ -891,13 +1382,13 @@ describe('Sortable Table with useAsyncList', function () {
     return _sort.apply(this, arguments);
   }
   function _sort() {
-    _sort = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee21(list) {
-      var _context25;
-      return _regeneratorRuntime().wrap(function _callee21$(_context26) {
-        while (1) switch (_context26.prev = _context26.next) {
+    _sort = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee33(list) {
+      var _context41;
+      return _regeneratorRuntime().wrap(function _callee33$(_context42) {
+        while (1) switch (_context42.prev = _context42.next) {
           case 0:
             // eslint-disable-next-line no-param-reassign
-            list.items = (0, _sort2["default"])(_context25 = list.items).call(_context25, function (a, b) {
+            list.items = (0, _sort2["default"])(_context41 = list.items).call(_context41, function (a, b) {
               var first = a[list.sortDescriptor.column];
               var second = b[list.sortDescriptor.column];
               var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) // eslint-disable-line
@@ -907,17 +1398,17 @@ describe('Sortable Table with useAsyncList', function () {
               }
               return cmp;
             });
-            return _context26.abrupt("return", list);
+            return _context42.abrupt("return", list);
           case 2:
           case "end":
-            return _context26.stop();
+            return _context42.stop();
         }
-      }, _callee21);
+      }, _callee33);
     }));
     return _sort.apply(this, arguments);
   }
-  var sortableDataTable = function sortableDataTable(_ref12) {
-    var result = _ref12.result;
+  var sortableDataTable = function sortableDataTable(_ref24) {
+    var result = _ref24.result;
     return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultTableProps, {
       sortDescriptor: result.current.sortDescriptor
     }), (0, _react3.jsx)(_index.THead, {
@@ -934,10 +1425,10 @@ describe('Sortable Table with useAsyncList', function () {
       });
     })));
   };
-  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
     var _renderHook, result, sortableTable, rowgroups, thead, headerCells, tRows;
-    return _regeneratorRuntime().wrap(function _callee15$(_context18) {
-      while (1) switch (_context18.prev = _context18.next) {
+    return _regeneratorRuntime().wrap(function _callee27$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
         case 0:
           _renderHook = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -949,47 +1440,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook.result;
-          _context18.next = 3;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
-            return _regeneratorRuntime().wrap(function _callee12$(_context14) {
-              while (1) switch (_context14.prev = _context14.next) {
+          _context34.next = 3;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+            return _regeneratorRuntime().wrap(function _callee24$(_context30) {
+              while (1) switch (_context30.prev = _context30.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context14.stop();
+                  return _context30.stop();
               }
-            }, _callee12);
+            }, _callee24);
           })));
         case 3:
-          _context18.next = 5;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
-            var _context15;
-            return _regeneratorRuntime().wrap(function _callee13$(_context16) {
-              while (1) switch (_context16.prev = _context16.next) {
+          _context34.next = 5;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+            var _context31;
+            return _regeneratorRuntime().wrap(function _callee25$(_context32) {
+              while (1) switch (_context32.prev = _context32.next) {
                 case 0:
-                  (0, _sort2["default"])(_context15 = result.current).call(_context15, {
+                  (0, _sort2["default"])(_context31 = result.current).call(_context31, {
                     column: 'country',
                     direction: 'ascending'
                   });
                 case 1:
                 case "end":
-                  return _context16.stop();
+                  return _context32.stop();
               }
-            }, _callee13);
+            }, _callee25);
           })));
         case 5:
-          _context18.next = 7;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
-            return _regeneratorRuntime().wrap(function _callee14$(_context17) {
-              while (1) switch (_context17.prev = _context17.next) {
+          _context34.next = 7;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+            return _regeneratorRuntime().wrap(function _callee26$(_context33) {
+              while (1) switch (_context33.prev = _context33.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context17.stop();
+                  return _context33.stop();
               }
-            }, _callee14);
+            }, _callee26);
           })));
         case 7:
           sortableDataTable({
@@ -1017,14 +1508,14 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('USA');
         case 28:
         case "end":
-          return _context18.stop();
+          return _context34.stop();
       }
-    }, _callee15);
+    }, _callee27);
   })));
-  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
     var _renderHook2, result, sortableTable, rowgroups, tRows;
-    return _regeneratorRuntime().wrap(function _callee19$(_context23) {
-      while (1) switch (_context23.prev = _context23.next) {
+    return _regeneratorRuntime().wrap(function _callee31$(_context39) {
+      while (1) switch (_context39.prev = _context39.next) {
         case 0:
           _renderHook2 = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -1036,47 +1527,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook2.result;
-          _context23.next = 3;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
-            return _regeneratorRuntime().wrap(function _callee16$(_context19) {
-              while (1) switch (_context19.prev = _context19.next) {
+          _context39.next = 3;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+            return _regeneratorRuntime().wrap(function _callee28$(_context35) {
+              while (1) switch (_context35.prev = _context35.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context19.stop();
+                  return _context35.stop();
               }
-            }, _callee16);
+            }, _callee28);
           })));
         case 3:
-          _context23.next = 5;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-            var _context20;
-            return _regeneratorRuntime().wrap(function _callee17$(_context21) {
-              while (1) switch (_context21.prev = _context21.next) {
+          _context39.next = 5;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+            var _context36;
+            return _regeneratorRuntime().wrap(function _callee29$(_context37) {
+              while (1) switch (_context37.prev = _context37.next) {
                 case 0:
-                  (0, _sort2["default"])(_context20 = result.current).call(_context20, {
+                  (0, _sort2["default"])(_context36 = result.current).call(_context36, {
                     column: 'country',
                     direction: 'descending'
                   });
                 case 1:
                 case "end":
-                  return _context21.stop();
+                  return _context37.stop();
               }
-            }, _callee17);
+            }, _callee29);
           })));
         case 5:
-          _context23.next = 7;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
-            return _regeneratorRuntime().wrap(function _callee18$(_context22) {
-              while (1) switch (_context22.prev = _context22.next) {
+          _context39.next = 7;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+            return _regeneratorRuntime().wrap(function _callee30$(_context38) {
+              while (1) switch (_context38.prev = _context38.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context22.stop();
+                  return _context38.stop();
               }
-            }, _callee18);
+            }, _callee30);
           })));
         case 7:
           sortableDataTable({
@@ -1100,8 +1591,8 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('Canada');
         case 24:
         case "end":
-          return _context23.stop();
+          return _context39.stop();
       }
-    }, _callee19);
+    }, _callee31);
   })));
 });