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

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

@@ -21,12 +21,14 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 import React from 'react';
 import { useAsyncList } from 'react-stately';
 import { act as actHooks, fireEvent, render, renderHook, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
 import { Cell, Column, Row, TBody, THead } from '../../index';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TableBase from './TableBase';
@@ -86,8 +88,6 @@ var getComponent = function getComponent() {
     });
   })));
 };
-
-// Needs to be added to each components test file
 universalComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(TableBase, _extends({}, defaultProps, props), ___EmotionJSX(THead, {
@@ -169,26 +169,205 @@ test('should change selection on mouse press', /*#__PURE__*/_asyncToGenerator(/*
     }
   }, _callee);
 })));
+test('should NOT change selection on row body click when hasSelectionCheckboxes is true', /*#__PURE__*/_asyncToGenerator(/*#__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 = 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.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__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
+        firstRowCheckbox = within(rows[1]).getByRole('checkbox');
+        expect(rows[1]).not.toHaveClass('is-selected');
+        _context3.next = 6;
+        return userEvent.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();
+  render(___EmotionJSX("table", null, ___EmotionJSX("tbody", null, ___EmotionJSX("tr", {
+    "data-testid": "test-row",
+    onMouseDown: rowSpy
+  }, ___EmotionJSX("td", {
+    "data-testid": "test-cell",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, "cell content")))));
+  fireEvent.mouseDown(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__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
+        _context4.next = 4;
+        return userEvent.tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        fireEvent.keyDown(rows[1], {
+          key: 'Enter'
+        });
+        expect(rows[1]).toHaveClass('is-selected');
+        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__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
+        _context5.next = 4;
+        return userEvent.tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var rows;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        getComponent();
+        rows = screen.getAllByRole('row');
+        _context6.next = 4;
+        return userEvent.tab();
+      case 4:
+        expect(rows[1]).toHaveFocus();
+        expect(rows[1]).not.toHaveClass('is-selected');
+        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 = screen.getAllByRole('row');
+  var checkboxes = screen.getAllByRole('checkbox');
+  expect(rows[1]).not.toHaveClass('is-selected');
+  // focus() triggers React Aria focus state updates and must be wrapped in act
+  actHooks(function () {
+    checkboxes[1].focus();
+  });
+  fireEvent.keyDown(checkboxes[1], {
+    key: 'Enter'
+  });
+  expect(rows[1]).toHaveClass('is-selected');
+  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 = screen.getAllByRole('row');
+  var selectAllCheckbox = screen.getByTestId('select-all-checkbox');
+  _forEachInstanceProperty(_context7 = _sliceInstanceProperty(rows).call(rows, 1)).call(_context7, function (row) {
+    return expect(row).not.toHaveClass('is-selected');
+  });
+  actHooks(function () {
+    selectAllCheckbox.focus();
+  });
+  fireEvent.keyDown(selectAllCheckbox, {
+    key: 'Enter'
+  });
+  _forEachInstanceProperty(_context8 = _sliceInstanceProperty(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 = screen.getAllByRole('row');
   _forEachInstanceProperty(rows).call(rows, /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(element) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref7 = _asyncToGenerator(/*#__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.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 = screen.getByTestId('select-all-checkbox');
@@ -210,31 +389,31 @@ test('should checked checkboxes if selected keys are provided', function () {
   var headerCheckbox = screen.getByTestId('select-all-checkbox');
   expect(headerCheckbox).toBePartiallyChecked();
 });
-test('tab key should focus on the first cell of the first row', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+test('tab key should focus on the first cell of the first row', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
-        _context3.next = 4;
+        _context0.next = 4;
         return userEvent.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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+test('Arrow Down key should focus the next row', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
-        _context4.next = 4;
+        _context1.next = 4;
         return userEvent.tab();
       case 4:
         expect(rows[1]).toHaveFocus();
@@ -254,18 +433,18 @@ test('Arrow Down key should focus the next row', /*#__PURE__*/_asyncToGenerator(
         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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+test('Arrow Up key should focus the next row', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
-        _context5.next = 4;
+        _context10.next = 4;
         return userEvent.tab();
       case 4:
         expect(rows[1]).toHaveFocus();
@@ -279,20 +458,20 @@ test('Arrow Up key should focus the next row', /*#__PURE__*/_asyncToGenerator(/*
         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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+test('Arrow Right move the focus to next cell', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
         firstRow = screen.getAllByRole('row')[1];
         tableCells = firstRow.querySelectorAll('td');
-        _context6.next = 6;
+        _context11.next = 6;
         return userEvent.tab();
       case 6:
         expect(rows[1]).toHaveFocus();
@@ -326,20 +505,20 @@ test('Arrow Right move the focus to next cell', /*#__PURE__*/_asyncToGenerator(/
         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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+test('Arrow Left move the focus to next cell', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getAllByRole('row');
         firstRow = screen.getAllByRole('row')[1];
         tableCells = firstRow.querySelectorAll('td');
-        _context7.next = 6;
+        _context12.next = 6;
         return userEvent.tab();
       case 6:
         expect(rows[1]).toHaveFocus();
@@ -373,10 +552,311 @@ test('Arrow Left move the focus to next cell', /*#__PURE__*/_asyncToGenerator(/*
         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 () {
+    render(___EmotionJSX(TableBase, {
+      "aria-label": "resizable table"
+    }, ___EmotionJSX(THead, {
+      columns: resizableHeaders
+    }, function (head) {
+      return ___EmotionJSX(Column, {
+        key: head.key,
+        allowsResizing: true
+      }, head.name);
+    }), ___EmotionJSX(TBody, {
+      items: resizableObjects
+    }, function (row) {
+      return ___EmotionJSX(Row, {
+        key: row.key
+      }, function (columnKey) {
+        return ___EmotionJSX(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 = screen.getByRole('slider', {
+      name: /Name column width/i
+    });
+    expect(slider).toBeInTheDocument();
+    expect(screen.getByRole('slider', {
+      name: /Value column width/i
+    })).toBeInTheDocument();
+  });
+  test('resizable table has no accessibility violations', /*#__PURE__*/_asyncToGenerator(/*#__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 = render(___EmotionJSX(TableBase, {
+            "aria-label": "resizable table"
+          }, ___EmotionJSX(THead, {
+            columns: resizableHeaders
+          }, function (head) {
+            return ___EmotionJSX(Column, {
+              key: head.key,
+              allowsResizing: true
+            }, head.name);
+          }), ___EmotionJSX(TBody, {
+            items: resizableObjects
+          }, function (row) {
+            return ___EmotionJSX(Row, {
+              key: row.key
+            }, function (columnKey) {
+              return ___EmotionJSX(Cell, null, row[columnKey]);
+            });
+          }))), container = _render.container;
+          _context13.next = 4;
+          return 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 () {
+    render(___EmotionJSX(TableBase, {
+      "aria-label": "non-resizable table"
+    }, ___EmotionJSX(THead, {
+      columns: resizableHeaders
+    }, function (head) {
+      return ___EmotionJSX(Column, {
+        key: head.key
+      }, head.name);
+    }), ___EmotionJSX(TBody, {
+      items: resizableObjects
+    }, function (row) {
+      return ___EmotionJSX(Row, {
+        key: row.key
+      }, function (columnKey) {
+        return ___EmotionJSX(Cell, null, row[columnKey]);
+      });
+    })));
+    expect(screen.queryByRole('slider')).not.toBeInTheDocument();
+  });
+  describe('keyboard resizing', function () {
+    var getResizableWithCallbacks = function getResizableWithCallbacks() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return render(___EmotionJSX(TableBase, _extends({
+        "aria-label": "resizable table"
+      }, props), ___EmotionJSX(THead, {
+        columns: resizableHeaders
+      }, function (head) {
+        return ___EmotionJSX(Column, {
+          key: head.key,
+          allowsResizing: true
+        }, head.name);
+      }), ___EmotionJSX(TBody, {
+        items: resizableObjects
+      }, function (row) {
+        return ___EmotionJSX(Row, {
+          key: row.key
+        }, function (columnKey) {
+          return ___EmotionJSX(Cell, null, row[columnKey]);
+        });
+      })));
+    };
+    test('Enter on resizer input starts resize and calls onResizeStart', function () {
+      var onResizeStart = jest.fn();
+      getResizableWithCallbacks({
+        onResizeStart: onResizeStart
+      });
+      var slider = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      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 = screen.getByRole('slider', {
+        name: /Name column width/i
+      });
+      actHooks(function () {
+        slider.focus();
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Enter'
+      });
+      fireEvent.keyDown(slider, {
+        key: 'Escape'
+      });
+      fireEvent.keyDown(slider, {
+        key: 'ArrowRight'
+      });
+      expect(onResize).not.toHaveBeenCalled();
+    });
+  });
+});
 describe('Sortable Table with useAsyncList', function () {
   var dataTestId = 'sortableTable';
   var defaultTableProps = {
@@ -389,18 +869,18 @@ describe('Sortable Table with useAsyncList', function () {
     return _load.apply(this, arguments);
   }
   function _load() {
-    _load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
-      return _regeneratorRuntime().wrap(function _callee14$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
+    _load = _asyncToGenerator(/*#__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);
   }
@@ -408,13 +888,13 @@ describe('Sortable Table with useAsyncList', function () {
     return _sort.apply(this, arguments);
   }
   function _sort() {
-    _sort = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15(list) {
-      var _context17;
-      return _regeneratorRuntime().wrap(function _callee15$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+    _sort = _asyncToGenerator(/*#__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 = _sortInstanceProperty(_context17 = list.items).call(_context17, function (a, b) {
+            list.items = _sortInstanceProperty(_context25 = list.items).call(_context25, function (a, b) {
               var first = a[list.sortDescriptor.column];
               var second = b[list.sortDescriptor.column];
               var cmp = (_parseInt(first) || first) < (_parseInt(second) || second) // eslint-disable-line
@@ -424,17 +904,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 render(___EmotionJSX(TableBase, _extends({}, defaultTableProps, {
       sortDescriptor: result.current.sortDescriptor
     }), ___EmotionJSX(THead, {
@@ -451,10 +931,10 @@ describe('Sortable Table with useAsyncList', function () {
       });
     })));
   };
-  test('sort by country column A => Z', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
+  test('sort by country column A => Z', /*#__PURE__*/_asyncToGenerator(/*#__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 = renderHook(function () {
             return useAsyncList({
@@ -466,47 +946,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook.result;
-          _context10.next = 3;
-          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-            return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-              while (1) switch (_context8.prev = _context8.next) {
+          _context18.next = 3;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__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 actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
-            var _context9;
-            return _regeneratorRuntime().wrap(function _callee9$(_context0) {
-              while (1) switch (_context0.prev = _context0.next) {
+          _context18.next = 5;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+            var _context15;
+            return _regeneratorRuntime().wrap(function _callee13$(_context16) {
+              while (1) switch (_context16.prev = _context16.next) {
                 case 0:
-                  _sortInstanceProperty(_context9 = result.current).call(_context9, {
+                  _sortInstanceProperty(_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 actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
-            return _regeneratorRuntime().wrap(function _callee0$(_context1) {
-              while (1) switch (_context1.prev = _context1.next) {
+          _context18.next = 7;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__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({
@@ -534,14 +1014,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__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+  test('sort by country column Z => A', /*#__PURE__*/_asyncToGenerator(/*#__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 = renderHook(function () {
             return useAsyncList({
@@ -553,47 +1033,47 @@ describe('Sortable Table with useAsyncList', function () {
               }
             });
           }), result = _renderHook2.result;
-          _context15.next = 3;
-          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-            return _regeneratorRuntime().wrap(function _callee10$(_context11) {
-              while (1) switch (_context11.prev = _context11.next) {
+          _context23.next = 3;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__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 actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-            var _context12;
-            return _regeneratorRuntime().wrap(function _callee11$(_context13) {
-              while (1) switch (_context13.prev = _context13.next) {
+          _context23.next = 5;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+            var _context20;
+            return _regeneratorRuntime().wrap(function _callee17$(_context21) {
+              while (1) switch (_context21.prev = _context21.next) {
                 case 0:
-                  _sortInstanceProperty(_context12 = result.current).call(_context12, {
+                  _sortInstanceProperty(_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 actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
-            return _regeneratorRuntime().wrap(function _callee12$(_context14) {
-              while (1) switch (_context14.prev = _context14.next) {
+          _context23.next = 7;
+          return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__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({
@@ -617,8 +1097,8 @@ describe('Sortable Table with useAsyncList', function () {
           expect(tRows[3]).toHaveTextContent('Canada');
         case 24:
         case "end":
-          return _context15.stop();
+          return _context23.stop();
       }
-    }, _callee13);
+    }, _callee19);
   })));
 });