@pingux/astro 2.218.0 → 2.219.0

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

@@ -14,7 +14,6 @@ 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"));
@@ -442,7 +441,7 @@ test('Arrow Down key should focus the next row', /*#__PURE__*/(0, _asyncToGenera
   }, _callee9);
 })));
 test('Arrow Up key should focus the next row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
-  var rows, columnheader;
+  var rows, columnheader, headerButton;
   return _regeneratorRuntime().wrap(function _callee0$(_context10) {
     while (1) switch (_context10.prev = _context10.next) {
       case 0:
@@ -458,9 +457,14 @@ test('Arrow Up key should focus the next row', /*#__PURE__*/(0, _asyncToGenerato
         _react2.fireEvent.keyUp(rows[1], {
           key: 'ArrowUp'
         });
+
+        // Column header content is rendered inside a focusable button, so focus
+        // moves into that child (focusMode: 'child') rather than the <th> itself.
         columnheader = _react2.screen.getAllByRole('columnheader');
-        expect(columnheader[0]).toHaveFocus();
-      case 9:
+        headerButton = (0, _react2.within)(columnheader[0]).getByRole('button');
+        expect(headerButton).toHaveFocus();
+        expect(columnheader[0]).toHaveClass('is-focused');
+      case 11:
       case "end":
         return _context10.stop();
     }
@@ -956,400 +960,206 @@ 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;
+describe('Sorting and resizing together', function () {
+  var combinedHeaders = [{
+    key: 'name',
+    name: 'Name'
+  }, {
+    key: 'value',
+    name: 'Value'
+  }];
+  var combinedObjects = [{
+    key: '1',
+    name: 'Alpha',
+    value: '10'
+  }, {
+    key: '2',
+    name: 'Beta',
+    value: '20'
+  }];
+  var getCombinedTable = function getCombinedTable() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({
+      "aria-label": "sortable and resizable table"
+    }, props), (0, _react3.jsx)(_index.THead, {
+      columns: combinedHeaders
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key,
+        allowsSorting: true,
+        allowsResizing: true
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: combinedObjects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    })));
+  };
+  test('renders both the sort button and resize slider for a column that allows both', function () {
+    getCombinedTable();
+    var columnheaders = _react2.screen.getAllByRole('columnheader');
+    var sortButton = (0, _react2.within)(columnheaders[0]).getByRole('button', {
+      name: /Sort by Name/i
+    });
+    expect(sortButton).toBeInTheDocument();
+    var slider = (0, _react2.within)(columnheaders[0]).getByRole('slider', {
+      name: /Name column width/i
+    });
+    expect(slider).toBeInTheDocument();
+  });
+  test('resizable table with sorting has no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+    var _getCombinedTable, container, results;
     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:
+          jest.useRealTimers();
+          _getCombinedTable = getCombinedTable({
+            sortDescriptor: {
+              column: 'name',
+              direction: 'ascending'
+            }
+          }), container = _getCombinedTable.container;
+          _context14.next = 4;
+          return (0, _jestAxe.axe)(container);
+        case 4:
+          results = _context14.sent;
+          jest.useFakeTimers();
+          expect(results).toHaveNoViolations();
+        case 7:
         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
+  test('clicking the sort button calls onSortChange without triggering a resize', function () {
+    // TableBase forwards unrecognized props (including onSortChange) onto the
+    // underlying <table> DOM node, which logs a React "unknown prop" warning.
+    // Suppressed here since it's orthogonal to the sort/resize behavior under test.
+    jest.spyOn(console, 'error').mockImplementation();
+    var onSortChange = jest.fn();
+    var onResize = jest.fn();
+    getCombinedTable({
+      onSortChange: onSortChange,
+      onResize: onResize
     });
-    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');
+    var columnheaders = _react2.screen.getAllByRole('columnheader');
+    var sortButton = (0, _react2.within)(columnheaders[0]).getByRole('button', {
+      name: /Sort by Name/i
     });
-  });
-  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');
+    _react2.fireEvent.click(sortButton);
+    expect(onSortChange).toHaveBeenCalledWith({
+      column: 'name',
+      direction: 'ascending'
     });
+    expect(onResize).not.toHaveBeenCalled();
   });
-  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();
+  test('sets aria-sort on a column header that also allows resizing', function () {
+    getCombinedTable({
+      sortDescriptor: {
+        column: 'name',
+        direction: 'ascending'
       }
-    }, _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');
+    var columnheaders = _react2.screen.getAllByRole('columnheader');
+    expect(columnheaders[0]).toHaveAttribute('aria-sort', 'ascending');
+    expect(columnheaders[1]).toHaveAttribute('aria-sort', 'none');
+  });
+  test('resizing via the slider does not call onSortChange', function () {
+    jest.spyOn(console, 'error').mockImplementation();
+    var onSortChange = jest.fn();
+    var onResize = jest.fn();
+    getCombinedTable({
+      onSortChange: onSortChange,
+      onResize: onResize
+    });
+    var columnheaders = _react2.screen.getAllByRole('columnheader');
+    var slider = (0, _react2.within)(columnheaders[0]).getByRole('slider', {
+      name: /Name column width/i
     });
+    (0, _react2.act)(function () {
+      slider.focus();
+    });
+    _react2.fireEvent.keyDown(slider, {
+      key: 'Enter'
+    });
+    _react2.fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    expect(onResize).toHaveBeenCalledTimes(1);
+    expect(onSortChange).not.toHaveBeenCalled();
   });
-  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) {
+  test('sort button and resize slider are independently focusable within the same column header', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+    var columnheaders, sortButton, slider, rows;
+    return _regeneratorRuntime().wrap(function _callee13$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
         case 0:
-          onRowAction = jest.fn();
-          getComponent({
-            selectionMode: 'none',
-            onRowAction: onRowAction
+          getCombinedTable();
+          columnheaders = _react2.screen.getAllByRole('columnheader');
+          sortButton = (0, _react2.within)(columnheaders[0]).getByRole('button', {
+            name: /Sort by Name/i
           });
-          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
+          slider = (0, _react2.within)(columnheaders[0]).getByRole('slider', {
+            name: /Name column width/i
           });
-          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;
+          rows = _react2.screen.getAllByRole('row'); // Tab into the first body row, then ArrowUp moves focus into the
+          // column header's focusable child (the sort button, per focusMode: 'child').
+          _context15.next = 7;
           return _userEvent["default"].tab();
-        case 5:
+        case 7:
           expect(rows[1]).toHaveFocus();
-
-          // Press Enter to trigger onRowAction via keyboard
           _react2.fireEvent.keyDown(rows[1], {
-            key: 'Enter'
+            key: 'ArrowUp'
           });
           _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
+            key: 'ArrowUp'
           });
-          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'
+          expect(sortButton).toHaveFocus();
+          _react2.fireEvent.keyDown(columnheaders[0], {
+            key: 'ArrowRight'
           });
-          _react2.fireEvent.keyUp(rows[1], {
-            key: 'ArrowDown'
+          _react2.fireEvent.keyUp(columnheaders[0], {
+            key: 'ArrowRight'
           });
-          _react2.fireEvent.focus(rows[2]);
-          expect(rows[1]).not.toHaveClass('is-focused');
-          expect(rows[2]).toHaveFocus();
+          expect(slider).toHaveFocus();
         case 14:
         case "end":
-          return _context29.stop();
+          return _context15.stop();
       }
-    }, _callee23);
+    }, _callee13);
   })));
+  test('resizing a column does not change its sort state', function () {
+    jest.spyOn(console, 'error').mockImplementation();
+    var onSortChange = jest.fn();
+    getCombinedTable({
+      onSortChange: onSortChange,
+      sortDescriptor: {
+        column: 'name',
+        direction: 'ascending'
+      }
+    });
+    var columnheaders = _react2.screen.getAllByRole('columnheader');
+    var slider = (0, _react2.within)(columnheaders[0]).getByRole('slider', {
+      name: /Name column width/i
+    });
+    (0, _react2.act)(function () {
+      slider.focus();
+    });
+    _react2.fireEvent.keyDown(slider, {
+      key: 'Enter'
+    });
+    _react2.fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    _react2.fireEvent.keyDown(slider, {
+      key: 'Escape'
+    });
+    expect(columnheaders[0]).toHaveAttribute('aria-sort', 'ascending');
+    expect(onSortChange).not.toHaveBeenCalled();
+  });
 });
 describe('Sortable Table with useAsyncList', function () {
   var dataTestId = 'sortableTable';
@@ -1363,18 +1173,18 @@ describe('Sortable Table with useAsyncList', function () {
     return _load.apply(this, arguments);
   }
   function _load() {
-    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
-      return _regeneratorRuntime().wrap(function _callee32$(_context40) {
-        while (1) switch (_context40.prev = _context40.next) {
+    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+      return _regeneratorRuntime().wrap(function _callee22$(_context26) {
+        while (1) switch (_context26.prev = _context26.next) {
           case 0:
-            return _context40.abrupt("return", {
+            return _context26.abrupt("return", {
               items: objects
             });
           case 1:
           case "end":
-            return _context40.stop();
+            return _context26.stop();
         }
-      }, _callee32);
+      }, _callee22);
     }));
     return _load.apply(this, arguments);
   }
@@ -1382,13 +1192,13 @@ describe('Sortable Table with useAsyncList', function () {
     return _sort.apply(this, arguments);
   }
   function _sort() {
-    _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) {
+    _sort = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee23(list) {
+      var _context27;
+      return _regeneratorRuntime().wrap(function _callee23$(_context28) {
+        while (1) switch (_context28.prev = _context28.next) {
           case 0:
             // eslint-disable-next-line no-param-reassign
-            list.items = (0, _sort2["default"])(_context41 = list.items).call(_context41, function (a, b) {
+            list.items = (0, _sort2["default"])(_context27 = list.items).call(_context27, 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
@@ -1398,17 +1208,17 @@ describe('Sortable Table with useAsyncList', function () {
               }
               return cmp;
             });
-            return _context42.abrupt("return", list);
+            return _context28.abrupt("return", list);
           case 2:
           case "end":
-            return _context42.stop();
+            return _context28.stop();
         }
-      }, _callee33);
+      }, _callee23);
     }));
     return _sort.apply(this, arguments);
   }
-  var sortableDataTable = function sortableDataTable(_ref24) {
-    var result = _ref24.result;
+  var sortableDataTable = function sortableDataTable(_ref14) {
+    var result = _ref14.result;
     return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultTableProps, {
       sortDescriptor: result.current.sortDescriptor
     }), (0, _react3.jsx)(_index.THead, {
@@ -1425,10 +1235,10 @@ describe('Sortable Table with useAsyncList', function () {
       });
     })));
   };
-  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
     var _renderHook, result, sortableTable, rowgroups, thead, headerCells, tRows;
-    return _regeneratorRuntime().wrap(function _callee27$(_context34) {
-      while (1) switch (_context34.prev = _context34.next) {
+    return _regeneratorRuntime().wrap(function _callee17$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
         case 0:
           _renderHook = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -1440,47 +1250,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook.result;
-          _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) {
+          _context20.next = 3;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+            return _regeneratorRuntime().wrap(function _callee14$(_context16) {
+              while (1) switch (_context16.prev = _context16.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context30.stop();
+                  return _context16.stop();
               }
-            }, _callee24);
+            }, _callee14);
           })));
         case 3:
-          _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) {
+          _context20.next = 5;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+            var _context17;
+            return _regeneratorRuntime().wrap(function _callee15$(_context18) {
+              while (1) switch (_context18.prev = _context18.next) {
                 case 0:
-                  (0, _sort2["default"])(_context31 = result.current).call(_context31, {
+                  (0, _sort2["default"])(_context17 = result.current).call(_context17, {
                     column: 'country',
                     direction: 'ascending'
                   });
                 case 1:
                 case "end":
-                  return _context32.stop();
+                  return _context18.stop();
               }
-            }, _callee25);
+            }, _callee15);
           })));
         case 5:
-          _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) {
+          _context20.next = 7;
+          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) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context33.stop();
+                  return _context19.stop();
               }
-            }, _callee26);
+            }, _callee16);
           })));
         case 7:
           sortableDataTable({
@@ -1508,14 +1318,14 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('USA');
         case 28:
         case "end":
-          return _context34.stop();
+          return _context20.stop();
       }
-    }, _callee27);
+    }, _callee17);
   })));
-  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
     var _renderHook2, result, sortableTable, rowgroups, tRows;
-    return _regeneratorRuntime().wrap(function _callee31$(_context39) {
-      while (1) switch (_context39.prev = _context39.next) {
+    return _regeneratorRuntime().wrap(function _callee21$(_context25) {
+      while (1) switch (_context25.prev = _context25.next) {
         case 0:
           _renderHook2 = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -1527,47 +1337,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook2.result;
-          _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) {
+          _context25.next = 3;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+            return _regeneratorRuntime().wrap(function _callee18$(_context21) {
+              while (1) switch (_context21.prev = _context21.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context35.stop();
+                  return _context21.stop();
               }
-            }, _callee28);
+            }, _callee18);
           })));
         case 3:
-          _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) {
+          _context25.next = 5;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+            var _context22;
+            return _regeneratorRuntime().wrap(function _callee19$(_context23) {
+              while (1) switch (_context23.prev = _context23.next) {
                 case 0:
-                  (0, _sort2["default"])(_context36 = result.current).call(_context36, {
+                  (0, _sort2["default"])(_context22 = result.current).call(_context22, {
                     column: 'country',
                     direction: 'descending'
                   });
                 case 1:
                 case "end":
-                  return _context37.stop();
+                  return _context23.stop();
               }
-            }, _callee29);
+            }, _callee19);
           })));
         case 5:
-          _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) {
+          _context25.next = 7;
+          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+            return _regeneratorRuntime().wrap(function _callee20$(_context24) {
+              while (1) switch (_context24.prev = _context24.next) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context38.stop();
+                  return _context24.stop();
               }
-            }, _callee30);
+            }, _callee20);
           })));
         case 7:
           sortableDataTable({
@@ -1591,8 +1401,8 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('Canada');
         case 24:
         case "end":
-          return _context39.stop();
+          return _context25.stop();
       }
-    }, _callee31);
+    }, _callee21);
   })));
 });