@pingux/astro 2.206.2-alpha.0 → 2.207.0-alpha.0

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

@@ -13,6 +13,7 @@ var _Symbol$iterator = require("@babel/runtime-corejs3/core-js-stable/symbol/ite
 var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
 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 _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"));
@@ -21,6 +22,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _jestAxe = require("jest-axe");
 var _index = require("../../index");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _TableBase = _interopRequireDefault(require("./TableBase"));
@@ -89,8 +91,6 @@ var getComponent = function getComponent() {
     });
   })));
 };
-
-// Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
     return (0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_index.THead, {
@@ -172,26 +172,205 @@ test('should change selection on mouse press', /*#__PURE__*/(0, _asyncToGenerato
     }
   }, _callee);
 })));
+test('should NOT change selection on row body click when hasSelectionCheckboxes is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var rows, firstBodyRowCells;
+  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    while (1) switch (_context2.prev = _context2.next) {
+      case 0:
+        getComponent({
+          selectionMode: 'multiple',
+          hasSelectionCheckboxes: true
+        });
+        rows = _react2.screen.getAllByRole('row'); // Click on a cell (the actual user target) — cell-level stopPropagation prevents
+        // the row's press handler from firing, so no selection is triggered.
+        firstBodyRowCells = rows[1].querySelectorAll('td');
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _context2.next = 6;
+        return _userEvent["default"].click(firstBodyRowCells[1]);
+      case 6:
+        expect(rows[1]).not.toHaveClass('is-selected');
+      case 7:
+      case "end":
+        return _context2.stop();
+    }
+  }, _callee2);
+})));
+test('should change selection via checkbox when hasSelectionCheckboxes is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  var rows, firstRowCheckbox;
+  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+    while (1) switch (_context3.prev = _context3.next) {
+      case 0:
+        getComponent({
+          selectionMode: 'multiple',
+          hasSelectionCheckboxes: true
+        });
+        rows = _react2.screen.getAllByRole('row');
+        firstRowCheckbox = (0, _react2.within)(rows[1]).getByRole('checkbox');
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _context3.next = 6;
+        return _userEvent["default"].click(firstRowCheckbox);
+      case 6:
+        expect(rows[1]).toHaveClass('is-selected');
+      case 7:
+      case "end":
+        return _context3.stop();
+    }
+  }, _callee3);
+})));
+test('mousedown on a cell does not bubble to row via React synthetic event', function () {
+  // Verify that the cell-level stopPropagation approach prevents the row's React
+  // onMouseDown handler from firing. We test this with a simple isolated component
+  // that matches the structure used in TableCell (mergeProps with stopPropagation).
+  // The full integration is covered by the hasSelectionCheckboxes test above.
+  var rowSpy = jest.fn();
+  (0, _react2.render)((0, _react3.jsx)("table", null, (0, _react3.jsx)("tbody", null, (0, _react3.jsx)("tr", {
+    "data-testid": "test-row",
+    onMouseDown: rowSpy
+  }, (0, _react3.jsx)("td", {
+    "data-testid": "test-cell",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, "cell content")))));
+  _react2.fireEvent.mouseDown(_react2.screen.getByTestId('test-cell'));
+  // The row's React onMouseDown should not have fired because stopPropagation
+  // was called on the td's synthetic onMouseDown handler.
+  expect(rowSpy).not.toHaveBeenCalled();
+});
+test('should toggle selection on Enter key when row is focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+  var rows;
+  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+    while (1) switch (_context4.prev = _context4.next) {
+      case 0:
+        getComponent({
+          selectionMode: 'multiple'
+        });
+        rows = _react2.screen.getAllByRole('row');
+        _context4.next = 4;
+        return _userEvent["default"].tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _react2.fireEvent.keyDown(rows[1], {
+          key: 'Enter'
+        });
+        expect(rows[1]).toHaveClass('is-selected');
+        _react2.fireEvent.keyDown(rows[1], {
+          key: 'Enter'
+        });
+        expect(rows[1]).not.toHaveClass('is-selected');
+      case 10:
+      case "end":
+        return _context4.stop();
+    }
+  }, _callee4);
+})));
+test('Enter key should toggle selection on focused row with checkboxes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var rows;
+  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+    while (1) switch (_context5.prev = _context5.next) {
+      case 0:
+        getComponent({
+          selectionMode: 'multiple'
+        });
+        rows = _react2.screen.getAllByRole('row');
+        _context5.next = 4;
+        return _userEvent["default"].tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _react2.fireEvent.keyDown(rows[1], {
+          key: 'Enter'
+        });
+        expect(rows[1]).toHaveClass('is-selected');
+      case 8:
+      case "end":
+        return _context5.stop();
+    }
+  }, _callee5);
+})));
+test('Enter key should not change selection when selectionMode is none', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var rows;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        getComponent();
+        rows = _react2.screen.getAllByRole('row');
+        _context6.next = 4;
+        return _userEvent["default"].tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _react2.fireEvent.keyDown(rows[1], {
+          key: 'Enter'
+        });
+        expect(rows[1]).not.toHaveClass('is-selected');
+      case 8:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee6);
+})));
+test('Enter key should toggle a row checkbox when the checkbox input is focused', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = _react2.screen.getAllByRole('row');
+  var checkboxes = _react2.screen.getAllByRole('checkbox');
+  expect(rows[1]).not.toHaveClass('is-selected');
+  // focus() triggers React Aria focus state updates and must be wrapped in act
+  (0, _react2.act)(function () {
+    checkboxes[1].focus();
+  });
+  _react2.fireEvent.keyDown(checkboxes[1], {
+    key: 'Enter'
+  });
+  expect(rows[1]).toHaveClass('is-selected');
+  _react2.fireEvent.keyDown(checkboxes[1], {
+    key: 'Enter'
+  });
+  expect(rows[1]).not.toHaveClass('is-selected');
+});
+test('Enter key should toggle select-all checkbox when it is focused', function () {
+  var _context7, _context8;
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = _react2.screen.getAllByRole('row');
+  var selectAllCheckbox = _react2.screen.getByTestId('select-all-checkbox');
+  (0, _forEach["default"])(_context7 = (0, _slice["default"])(rows).call(rows, 1)).call(_context7, function (row) {
+    return expect(row).not.toHaveClass('is-selected');
+  });
+  (0, _react2.act)(function () {
+    selectAllCheckbox.focus();
+  });
+  _react2.fireEvent.keyDown(selectAllCheckbox, {
+    key: 'Enter'
+  });
+  (0, _forEach["default"])(_context8 = (0, _slice["default"])(rows).call(rows, 1)).call(_context8, function (row) {
+    return expect(row).toHaveClass('is-selected');
+  });
+});
 test('should change select all checkbox on mouse press', function () {
   getComponent({
     selectionMode: 'multiple'
   });
   var rows = _react2.screen.getAllByRole('row');
   (0, _forEach["default"])(rows).call(rows, /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(element) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7(element) {
+      return _regeneratorRuntime().wrap(function _callee7$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
-            _context2.next = 2;
+            _context9.next = 2;
             return _userEvent["default"].click(element);
           case 2:
           case "end":
-            return _context2.stop();
+            return _context9.stop();
         }
-      }, _callee2);
+      }, _callee7);
     }));
     return function (_x) {
-      return _ref2.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }());
   var headerCheckbox = _react2.screen.getByTestId('select-all-checkbox');
@@ -213,31 +392,31 @@ test('should checked checkboxes if selected keys are provided', function () {
   var headerCheckbox = _react2.screen.getByTestId('select-all-checkbox');
   expect(headerCheckbox).toBePartiallyChecked();
 });
-test('tab key should focus on the first cell of the first row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+test('tab key should focus on the first cell of the first row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
   var rows;
-  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-    while (1) switch (_context3.prev = _context3.next) {
+  return _regeneratorRuntime().wrap(function _callee8$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
         getComponent();
         rows = _react2.screen.getAllByRole('row');
-        _context3.next = 4;
+        _context0.next = 4;
         return _userEvent["default"].tab();
       case 4:
         expect(rows[1]).toHaveFocus();
       case 5:
       case "end":
-        return _context3.stop();
+        return _context0.stop();
     }
-  }, _callee3);
+  }, _callee8);
 })));
-test('Arrow Down key should focus the next row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+test('Arrow Down key should focus the next row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
   var rows;
-  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-    while (1) switch (_context4.prev = _context4.next) {
+  return _regeneratorRuntime().wrap(function _callee9$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
         getComponent();
         rows = _react2.screen.getAllByRole('row');
-        _context4.next = 4;
+        _context1.next = 4;
         return _userEvent["default"].tab();
       case 4:
         expect(rows[1]).toHaveFocus();
@@ -257,18 +436,18 @@ test('Arrow Down key should focus the next row', /*#__PURE__*/(0, _asyncToGenera
         expect(rows[3]).toHaveFocus();
       case 11:
       case "end":
-        return _context4.stop();
+        return _context1.stop();
     }
-  }, _callee4);
+  }, _callee9);
 })));
-test('Arrow Up key should focus the next row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+test('Arrow Up key should focus the next row', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
   var rows, columnheader;
-  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-    while (1) switch (_context5.prev = _context5.next) {
+  return _regeneratorRuntime().wrap(function _callee0$(_context10) {
+    while (1) switch (_context10.prev = _context10.next) {
       case 0:
         getComponent();
         rows = _react2.screen.getAllByRole('row');
-        _context5.next = 4;
+        _context10.next = 4;
         return _userEvent["default"].tab();
       case 4:
         expect(rows[1]).toHaveFocus();
@@ -282,20 +461,20 @@ test('Arrow Up key should focus the next row', /*#__PURE__*/(0, _asyncToGenerato
         expect(columnheader[0]).toHaveFocus();
       case 9:
       case "end":
-        return _context5.stop();
+        return _context10.stop();
     }
-  }, _callee5);
+  }, _callee0);
 })));
-test('Arrow Right move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+test('Arrow Right move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
   var rows, firstRow, tableCells;
-  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-    while (1) switch (_context6.prev = _context6.next) {
+  return _regeneratorRuntime().wrap(function _callee1$(_context11) {
+    while (1) switch (_context11.prev = _context11.next) {
       case 0:
         getComponent();
         rows = _react2.screen.getAllByRole('row');
         firstRow = _react2.screen.getAllByRole('row')[1];
         tableCells = firstRow.querySelectorAll('td');
-        _context6.next = 6;
+        _context11.next = 6;
         return _userEvent["default"].tab();
       case 6:
         expect(rows[1]).toHaveFocus();
@@ -329,20 +508,20 @@ test('Arrow Right move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerat
         expect(rows[1]).toHaveFocus();
       case 19:
       case "end":
-        return _context6.stop();
+        return _context11.stop();
     }
-  }, _callee6);
+  }, _callee1);
 })));
-test('Arrow Left move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+test('Arrow Left move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
   var rows, firstRow, tableCells;
-  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-    while (1) switch (_context7.prev = _context7.next) {
+  return _regeneratorRuntime().wrap(function _callee10$(_context12) {
+    while (1) switch (_context12.prev = _context12.next) {
       case 0:
         getComponent();
         rows = _react2.screen.getAllByRole('row');
         firstRow = _react2.screen.getAllByRole('row')[1];
         tableCells = firstRow.querySelectorAll('td');
-        _context7.next = 6;
+        _context12.next = 6;
         return _userEvent["default"].tab();
       case 6:
         expect(rows[1]).toHaveFocus();
@@ -376,10 +555,311 @@ test('Arrow Left move the focus to next cell', /*#__PURE__*/(0, _asyncToGenerato
         expect(rows[1]).toHaveFocus();
       case 19:
       case "end":
-        return _context7.stop();
+        return _context12.stop();
     }
-  }, _callee7);
+  }, _callee10);
 })));
+describe('Resizable columns', function () {
+  var resizableHeaders = [{
+    key: 'name',
+    name: 'Name'
+  }, {
+    key: 'value',
+    name: 'Value'
+  }];
+  var resizableObjects = [{
+    key: '1',
+    name: 'Alpha',
+    value: '10'
+  }, {
+    key: '2',
+    name: 'Beta',
+    value: '20'
+  }];
+  test('renders resize slider input for a resizable column', function () {
+    (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+      "aria-label": "resizable table"
+    }, (0, _react3.jsx)(_index.THead, {
+      columns: resizableHeaders
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key,
+        allowsResizing: true
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: resizableObjects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    })));
+
+    // Each resizable column renders a visually-hidden <input type="range">
+    // accessible as role="slider" with an aria-label containing the column name
+    var slider = _react2.screen.getByRole('slider', {
+      name: /Name column width/i
+    });
+    expect(slider).toBeInTheDocument();
+    expect(_react2.screen.getByRole('slider', {
+      name: /Value column width/i
+    })).toBeInTheDocument();
+  });
+  test('resizable table has no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
+    var _render, container, results;
+    return _regeneratorRuntime().wrap(function _callee11$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          jest.useRealTimers();
+          _render = (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+            "aria-label": "resizable table"
+          }, (0, _react3.jsx)(_index.THead, {
+            columns: resizableHeaders
+          }, function (head) {
+            return (0, _react3.jsx)(_index.Column, {
+              key: head.key,
+              allowsResizing: true
+            }, head.name);
+          }), (0, _react3.jsx)(_index.TBody, {
+            items: resizableObjects
+          }, function (row) {
+            return (0, _react3.jsx)(_index.Row, {
+              key: row.key
+            }, function (columnKey) {
+              return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+            });
+          }))), container = _render.container;
+          _context13.next = 4;
+          return (0, _jestAxe.axe)(container);
+        case 4:
+          results = _context13.sent;
+          jest.useFakeTimers();
+          expect(results).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee11);
+  })));
+  test('does not render resize slider input for a non-resizable column', function () {
+    (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], {
+      "aria-label": "non-resizable table"
+    }, (0, _react3.jsx)(_index.THead, {
+      columns: resizableHeaders
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: resizableObjects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    })));
+    expect(_react2.screen.queryByRole('slider')).not.toBeInTheDocument();
+  });
+  describe('keyboard resizing', function () {
+    var getResizableWithCallbacks = function getResizableWithCallbacks() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({
+        "aria-label": "resizable table"
+      }, props), (0, _react3.jsx)(_index.THead, {
+        columns: resizableHeaders
+      }, function (head) {
+        return (0, _react3.jsx)(_index.Column, {
+          key: head.key,
+          allowsResizing: true
+        }, head.name);
+      }), (0, _react3.jsx)(_index.TBody, {
+        items: resizableObjects
+      }, function (row) {
+        return (0, _react3.jsx)(_index.Row, {
+          key: row.key
+        }, function (columnKey) {
+          return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+        });
+      })));
+    };
+    test('Enter on resizer input starts resize and calls onResizeStart', function () {
+      var onResizeStart = jest.fn();
+      getResizableWithCallbacks({
+        onResizeStart: onResizeStart
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+    });
+    test('ArrowRight during active resize calls onResize', function () {
+      var onResize = jest.fn();
+      getResizableWithCallbacks({
+        onResize: onResize
+      });
+      var slider = _react2.screen.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);
+    });
+    test('ArrowLeft during active resize calls onResize', function () {
+      var onResize = jest.fn();
+      getResizableWithCallbacks({
+        onResize: onResize
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'ArrowLeft'
+      });
+      expect(onResize).toHaveBeenCalledTimes(1);
+    });
+    test('multiple ArrowRight presses each call onResize', function () {
+      var onResize = jest.fn();
+      getResizableWithCallbacks({
+        onResize: onResize
+      });
+      var slider = _react2.screen.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: 'ArrowRight'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      expect(onResize).toHaveBeenCalledTimes(3);
+    });
+    test('Escape ends resize and calls onResizeEnd', function () {
+      var onResizeEnd = jest.fn();
+      getResizableWithCallbacks({
+        onResizeEnd: onResizeEnd
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Escape'
+      });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    });
+    test('Space ends resize and calls onResizeEnd', function () {
+      var onResizeEnd = jest.fn();
+      getResizableWithCallbacks({
+        onResizeEnd: onResizeEnd
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: ' '
+      });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    });
+    test('second Enter ends resize and calls onResizeEnd', function () {
+      var onResizeEnd = jest.fn();
+      getResizableWithCallbacks({
+        onResizeEnd: onResizeEnd
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    });
+    test('ArrowRight before resize starts does not call onResize', function () {
+      var onResize = jest.fn();
+      getResizableWithCallbacks({
+        onResize: onResize
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      expect(onResize).not.toHaveBeenCalled();
+    });
+    test('onResize is not called after resize ends', function () {
+      var onResize = jest.fn();
+      getResizableWithCallbacks({
+        onResize: onResize
+      });
+      var slider = _react2.screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      (0, _react2.act)(function () {
+        slider.focus();
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'Escape'
+      });
+      _react2.fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      expect(onResize).not.toHaveBeenCalled();
+    });
+  });
+});
 describe('Sortable Table with useAsyncList', function () {
   var dataTestId = 'sortableTable';
   var defaultTableProps = {
@@ -392,18 +872,18 @@ describe('Sortable Table with useAsyncList', function () {
     return _load.apply(this, arguments);
   }
   function _load() {
-    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
-      return _regeneratorRuntime().wrap(function _callee14$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
+    _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+      return _regeneratorRuntime().wrap(function _callee20$(_context24) {
+        while (1) switch (_context24.prev = _context24.next) {
           case 0:
-            return _context16.abrupt("return", {
+            return _context24.abrupt("return", {
               items: objects
             });
           case 1:
           case "end":
-            return _context16.stop();
+            return _context24.stop();
         }
-      }, _callee14);
+      }, _callee20);
     }));
     return _load.apply(this, arguments);
   }
@@ -411,13 +891,13 @@ describe('Sortable Table with useAsyncList', function () {
     return _sort.apply(this, arguments);
   }
   function _sort() {
-    _sort = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15(list) {
-      var _context17;
-      return _regeneratorRuntime().wrap(function _callee15$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+    _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) {
           case 0:
             // eslint-disable-next-line no-param-reassign
-            list.items = (0, _sort2["default"])(_context17 = list.items).call(_context17, function (a, b) {
+            list.items = (0, _sort2["default"])(_context25 = list.items).call(_context25, 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
@@ -427,17 +907,17 @@ describe('Sortable Table with useAsyncList', function () {
               }
               return cmp;
             });
-            return _context18.abrupt("return", list);
+            return _context26.abrupt("return", list);
           case 2:
           case "end":
-            return _context18.stop();
+            return _context26.stop();
         }
-      }, _callee15);
+      }, _callee21);
     }));
     return _sort.apply(this, arguments);
   }
-  var sortableDataTable = function sortableDataTable(_ref8) {
-    var result = _ref8.result;
+  var sortableDataTable = function sortableDataTable(_ref12) {
+    var result = _ref12.result;
     return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultTableProps, {
       sortDescriptor: result.current.sortDescriptor
     }), (0, _react3.jsx)(_index.THead, {
@@ -454,10 +934,10 @@ describe('Sortable Table with useAsyncList', function () {
       });
     })));
   };
-  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
+  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
     var _renderHook, result, sortableTable, rowgroups, thead, headerCells, tRows;
-    return _regeneratorRuntime().wrap(function _callee1$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
+    return _regeneratorRuntime().wrap(function _callee15$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
         case 0:
           _renderHook = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -469,47 +949,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook.result;
-          _context10.next = 3;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-            return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-              while (1) switch (_context8.prev = _context8.next) {
+          _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) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context8.stop();
+                  return _context14.stop();
               }
-            }, _callee8);
+            }, _callee12);
           })));
         case 3:
-          _context10.next = 5;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
-            var _context9;
-            return _regeneratorRuntime().wrap(function _callee9$(_context0) {
-              while (1) switch (_context0.prev = _context0.next) {
+          _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) {
                 case 0:
-                  (0, _sort2["default"])(_context9 = result.current).call(_context9, {
+                  (0, _sort2["default"])(_context15 = result.current).call(_context15, {
                     column: 'country',
                     direction: 'ascending'
                   });
                 case 1:
                 case "end":
-                  return _context0.stop();
+                  return _context16.stop();
               }
-            }, _callee9);
+            }, _callee13);
           })));
         case 5:
-          _context10.next = 7;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
-            return _regeneratorRuntime().wrap(function _callee0$(_context1) {
-              while (1) switch (_context1.prev = _context1.next) {
+          _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) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context1.stop();
+                  return _context17.stop();
               }
-            }, _callee0);
+            }, _callee14);
           })));
         case 7:
           sortableDataTable({
@@ -537,14 +1017,14 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('USA');
         case 28:
         case "end":
-          return _context10.stop();
+          return _context18.stop();
       }
-    }, _callee1);
+    }, _callee15);
   })));
-  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
     var _renderHook2, result, sortableTable, rowgroups, tRows;
-    return _regeneratorRuntime().wrap(function _callee13$(_context15) {
-      while (1) switch (_context15.prev = _context15.next) {
+    return _regeneratorRuntime().wrap(function _callee19$(_context23) {
+      while (1) switch (_context23.prev = _context23.next) {
         case 0:
           _renderHook2 = (0, _react2.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
@@ -556,47 +1036,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook2.result;
-          _context15.next = 3;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-            return _regeneratorRuntime().wrap(function _callee10$(_context11) {
-              while (1) switch (_context11.prev = _context11.next) {
+          _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) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context11.stop();
+                  return _context19.stop();
               }
-            }, _callee10);
+            }, _callee16);
           })));
         case 3:
-          _context15.next = 5;
-          return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-            var _context12;
-            return _regeneratorRuntime().wrap(function _callee11$(_context13) {
-              while (1) switch (_context13.prev = _context13.next) {
+          _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) {
                 case 0:
-                  (0, _sort2["default"])(_context12 = result.current).call(_context12, {
+                  (0, _sort2["default"])(_context20 = result.current).call(_context20, {
                     column: 'country',
                     direction: 'descending'
                   });
                 case 1:
                 case "end":
-                  return _context13.stop();
+                  return _context21.stop();
               }
-            }, _callee11);
+            }, _callee17);
           })));
         case 5:
-          _context15.next = 7;
-          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) {
+          _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) {
                 case 0:
                   jest.runOnlyPendingTimers();
                 case 1:
                 case "end":
-                  return _context14.stop();
+                  return _context22.stop();
               }
-            }, _callee12);
+            }, _callee18);
           })));
         case 7:
           sortableDataTable({
@@ -620,8 +1100,8 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('Canada');
         case 24:
         case "end":
-          return _context15.stop();
+          return _context23.stop();
       }
-    }, _callee13);
+    }, _callee19);
   })));
 });