@pingux/astro 2.214.0 → 2.215.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/OverlayPanel/OverlayPanel.js +6 -0
- package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js +64 -0
- package/lib/cjs/components/TableBase/TableBase.js +119 -20
- package/lib/cjs/components/TableBase/TableBase.stories.js +74 -1
- package/lib/cjs/components/TableBase/TableBase.styles.d.ts +3 -0
- package/lib/cjs/components/TableBase/TableBase.styles.js +3 -0
- package/lib/cjs/components/TableBase/TableBase.test.js +462 -66
- package/lib/cjs/components/TableBase/tableBaseAttributes.d.ts +1 -0
- package/lib/cjs/components/TableBase/tableBaseAttributes.js +3 -0
- package/lib/cjs/types/tableBase.d.ts +6 -0
- package/lib/components/OverlayPanel/OverlayPanel.js +7 -1
- package/lib/components/OverlayPanel/OverlayPanel.test.js +64 -0
- package/lib/components/TableBase/TableBase.js +116 -17
- package/lib/components/TableBase/TableBase.stories.js +76 -3
- package/lib/components/TableBase/TableBase.styles.js +3 -0
- package/lib/components/TableBase/TableBase.test.js +462 -66
- package/lib/components/TableBase/tableBaseAttributes.js +3 -0
- package/package.json +1 -1
|
@@ -22,6 +22,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try {
|
|
|
22
22
|
function _OverloadYield(e, d) { this.v = e, this.k = d; }
|
|
23
23
|
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
24
24
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
25
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
25
26
|
import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
|
|
26
27
|
import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
|
|
27
28
|
import React from 'react';
|
|
@@ -857,6 +858,401 @@ describe('Resizable columns', function () {
|
|
|
857
858
|
});
|
|
858
859
|
});
|
|
859
860
|
});
|
|
861
|
+
describe('onRowAction behavior', function () {
|
|
862
|
+
test('clicking a cell fires onRowAction with the correct row key', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
|
|
863
|
+
var onRowAction, rows, firstBodyRowCells;
|
|
864
|
+
return _regeneratorRuntime().wrap(function _callee12$(_context14) {
|
|
865
|
+
while (1) switch (_context14.prev = _context14.next) {
|
|
866
|
+
case 0:
|
|
867
|
+
onRowAction = jest.fn();
|
|
868
|
+
getComponent({
|
|
869
|
+
onRowAction: onRowAction
|
|
870
|
+
});
|
|
871
|
+
rows = screen.getAllByRole('row');
|
|
872
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
873
|
+
_context14.next = 6;
|
|
874
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
875
|
+
case 6:
|
|
876
|
+
expect(onRowAction).toHaveBeenCalledTimes(1);
|
|
877
|
+
expect(onRowAction).toHaveBeenCalledWith('1');
|
|
878
|
+
case 8:
|
|
879
|
+
case "end":
|
|
880
|
+
return _context14.stop();
|
|
881
|
+
}
|
|
882
|
+
}, _callee12);
|
|
883
|
+
})));
|
|
884
|
+
test('rows receive has-actions class when onRowAction is provided', function () {
|
|
885
|
+
var _context15;
|
|
886
|
+
var onRowAction = jest.fn();
|
|
887
|
+
getComponent({
|
|
888
|
+
onRowAction: onRowAction
|
|
889
|
+
});
|
|
890
|
+
var rows = screen.getAllByRole('row');
|
|
891
|
+
|
|
892
|
+
// All body rows (skip the header row at index 0) should have the has-actions class
|
|
893
|
+
_forEachInstanceProperty(_context15 = _sliceInstanceProperty(rows).call(rows, 1)).call(_context15, function (row) {
|
|
894
|
+
expect(row).toHaveClass('has-actions');
|
|
895
|
+
});
|
|
896
|
+
});
|
|
897
|
+
test('rows do not receive has-actions class when onRowAction is absent', function () {
|
|
898
|
+
var _context16;
|
|
899
|
+
getComponent();
|
|
900
|
+
var rows = screen.getAllByRole('row');
|
|
901
|
+
_forEachInstanceProperty(_context16 = _sliceInstanceProperty(rows).call(rows, 1)).call(_context16, function (row) {
|
|
902
|
+
expect(row).not.toHaveClass('has-actions');
|
|
903
|
+
});
|
|
904
|
+
});
|
|
905
|
+
test('pressing Enter on a focused row fires onRowAction when selectionMode is none', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
|
|
906
|
+
var onRowAction, rows;
|
|
907
|
+
return _regeneratorRuntime().wrap(function _callee13$(_context17) {
|
|
908
|
+
while (1) switch (_context17.prev = _context17.next) {
|
|
909
|
+
case 0:
|
|
910
|
+
onRowAction = jest.fn();
|
|
911
|
+
getComponent({
|
|
912
|
+
selectionMode: 'none',
|
|
913
|
+
onRowAction: onRowAction
|
|
914
|
+
});
|
|
915
|
+
rows = screen.getAllByRole('row');
|
|
916
|
+
_context17.next = 5;
|
|
917
|
+
return userEvent.tab();
|
|
918
|
+
case 5:
|
|
919
|
+
expect(rows[1]).toHaveFocus();
|
|
920
|
+
|
|
921
|
+
// React Aria's usePress fires the action on keyUp (press completion),
|
|
922
|
+
// so both keyDown and keyUp must be fired.
|
|
923
|
+
fireEvent.keyDown(rows[1], {
|
|
924
|
+
key: 'Enter'
|
|
925
|
+
});
|
|
926
|
+
fireEvent.keyUp(rows[1], {
|
|
927
|
+
key: 'Enter'
|
|
928
|
+
});
|
|
929
|
+
expect(onRowAction).toHaveBeenCalledTimes(1);
|
|
930
|
+
expect(onRowAction).toHaveBeenCalledWith('1');
|
|
931
|
+
case 10:
|
|
932
|
+
case "end":
|
|
933
|
+
return _context17.stop();
|
|
934
|
+
}
|
|
935
|
+
}, _callee13);
|
|
936
|
+
})));
|
|
937
|
+
test('clicking an action row applies is-focused class to that row', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
|
|
938
|
+
var onRowAction, rows, firstBodyRowCells, secondBodyRowCells;
|
|
939
|
+
return _regeneratorRuntime().wrap(function _callee14$(_context18) {
|
|
940
|
+
while (1) switch (_context18.prev = _context18.next) {
|
|
941
|
+
case 0:
|
|
942
|
+
onRowAction = jest.fn();
|
|
943
|
+
getComponent({
|
|
944
|
+
onRowAction: onRowAction
|
|
945
|
+
});
|
|
946
|
+
rows = screen.getAllByRole('row'); // Click a cell in the first body row (rows[0] is the header row)
|
|
947
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
948
|
+
_context18.next = 6;
|
|
949
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
950
|
+
case 6:
|
|
951
|
+
// First body row should have is-focused; all other body rows should not
|
|
952
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
953
|
+
expect(rows[2]).not.toHaveClass('is-focused');
|
|
954
|
+
expect(rows[3]).not.toHaveClass('is-focused');
|
|
955
|
+
expect(rows[4]).not.toHaveClass('is-focused');
|
|
956
|
+
|
|
957
|
+
// Click a cell in the second body row — highlight should move
|
|
958
|
+
secondBodyRowCells = rows[2].querySelectorAll('td');
|
|
959
|
+
_context18.next = 13;
|
|
960
|
+
return userEvent.click(secondBodyRowCells[0]);
|
|
961
|
+
case 13:
|
|
962
|
+
expect(rows[2]).toHaveClass('is-focused');
|
|
963
|
+
expect(rows[1]).not.toHaveClass('is-focused');
|
|
964
|
+
case 15:
|
|
965
|
+
case "end":
|
|
966
|
+
return _context18.stop();
|
|
967
|
+
}
|
|
968
|
+
}, _callee14);
|
|
969
|
+
})));
|
|
970
|
+
test('no row has is-focused before any click with onRowAction', function () {
|
|
971
|
+
var _context19;
|
|
972
|
+
var onRowAction = jest.fn();
|
|
973
|
+
getComponent({
|
|
974
|
+
onRowAction: onRowAction
|
|
975
|
+
});
|
|
976
|
+
var rows = screen.getAllByRole('row');
|
|
977
|
+
|
|
978
|
+
// At mount time, no body row should have is-focused from active-row state
|
|
979
|
+
_forEachInstanceProperty(_context19 = _sliceInstanceProperty(rows).call(rows, 1)).call(_context19, function (row) {
|
|
980
|
+
expect(row).not.toHaveClass('is-focused');
|
|
981
|
+
});
|
|
982
|
+
});
|
|
983
|
+
test('clicking a row without onRowAction does not apply is-focused', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
|
|
984
|
+
var rows, firstBodyRowCells;
|
|
985
|
+
return _regeneratorRuntime().wrap(function _callee15$(_context20) {
|
|
986
|
+
while (1) switch (_context20.prev = _context20.next) {
|
|
987
|
+
case 0:
|
|
988
|
+
getComponent();
|
|
989
|
+
rows = screen.getAllByRole('row');
|
|
990
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
991
|
+
_context20.next = 5;
|
|
992
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
993
|
+
case 5:
|
|
994
|
+
// Without onRowAction the active-row path is not triggered
|
|
995
|
+
expect(rows[1]).not.toHaveClass('is-focused');
|
|
996
|
+
case 6:
|
|
997
|
+
case "end":
|
|
998
|
+
return _context20.stop();
|
|
999
|
+
}
|
|
1000
|
+
}, _callee15);
|
|
1001
|
+
})));
|
|
1002
|
+
test('keyboard-focused row receives is-focused when onRowAction is present (AC4)', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
|
|
1003
|
+
var onRowAction, rows;
|
|
1004
|
+
return _regeneratorRuntime().wrap(function _callee16$(_context21) {
|
|
1005
|
+
while (1) switch (_context21.prev = _context21.next) {
|
|
1006
|
+
case 0:
|
|
1007
|
+
onRowAction = jest.fn();
|
|
1008
|
+
getComponent({
|
|
1009
|
+
selectionMode: 'none',
|
|
1010
|
+
onRowAction: onRowAction
|
|
1011
|
+
});
|
|
1012
|
+
rows = screen.getAllByRole('row'); // Tab into the table so the first body row has keyboard focus
|
|
1013
|
+
_context21.next = 5;
|
|
1014
|
+
return userEvent.tab();
|
|
1015
|
+
case 5:
|
|
1016
|
+
expect(rows[1]).toHaveFocus();
|
|
1017
|
+
|
|
1018
|
+
// The row must have is-focused from keyboard focus (isFocusVisible path unchanged)
|
|
1019
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1020
|
+
case 7:
|
|
1021
|
+
case "end":
|
|
1022
|
+
return _context21.stop();
|
|
1023
|
+
}
|
|
1024
|
+
}, _callee16);
|
|
1025
|
+
})));
|
|
1026
|
+
test('is-focused class appears only once when keyboard-focused row is also the active row (AC5)', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
|
|
1027
|
+
var _context22;
|
|
1028
|
+
var onRowAction, rows, firstBodyRowCells, isFocusedCount;
|
|
1029
|
+
return _regeneratorRuntime().wrap(function _callee17$(_context23) {
|
|
1030
|
+
while (1) switch (_context23.prev = _context23.next) {
|
|
1031
|
+
case 0:
|
|
1032
|
+
onRowAction = jest.fn();
|
|
1033
|
+
getComponent({
|
|
1034
|
+
selectionMode: 'none',
|
|
1035
|
+
onRowAction: onRowAction
|
|
1036
|
+
});
|
|
1037
|
+
rows = screen.getAllByRole('row'); // Click the first body row to set activeRowKey
|
|
1038
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
1039
|
+
_context23.next = 6;
|
|
1040
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1041
|
+
case 6:
|
|
1042
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1043
|
+
|
|
1044
|
+
// Count occurrences of the class — must be exactly 1
|
|
1045
|
+
isFocusedCount = _filterInstanceProperty(_context22 = rows[1].className.split(/\s+/)).call(_context22, function (cls) {
|
|
1046
|
+
return cls === 'is-focused';
|
|
1047
|
+
}).length;
|
|
1048
|
+
expect(isFocusedCount).toBe(1);
|
|
1049
|
+
case 9:
|
|
1050
|
+
case "end":
|
|
1051
|
+
return _context23.stop();
|
|
1052
|
+
}
|
|
1053
|
+
}, _callee17);
|
|
1054
|
+
})));
|
|
1055
|
+
test('clicking a row focuses the row <tr> so arrow keys work via React Aria', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
|
|
1056
|
+
var onRowAction, rows, firstBodyRowCells;
|
|
1057
|
+
return _regeneratorRuntime().wrap(function _callee18$(_context24) {
|
|
1058
|
+
while (1) switch (_context24.prev = _context24.next) {
|
|
1059
|
+
case 0:
|
|
1060
|
+
onRowAction = jest.fn();
|
|
1061
|
+
getComponent({
|
|
1062
|
+
onRowAction: onRowAction
|
|
1063
|
+
});
|
|
1064
|
+
rows = screen.getAllByRole('row'); // Click a cell in the first body row
|
|
1065
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
1066
|
+
_context24.next = 6;
|
|
1067
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1068
|
+
case 6:
|
|
1069
|
+
// The <tr> for the clicked row should now have DOM focus
|
|
1070
|
+
expect(rows[1]).toHaveFocus();
|
|
1071
|
+
|
|
1072
|
+
// Arrow keys should then navigate via React Aria
|
|
1073
|
+
fireEvent.keyDown(rows[1], {
|
|
1074
|
+
key: 'ArrowDown'
|
|
1075
|
+
});
|
|
1076
|
+
fireEvent.keyUp(rows[1], {
|
|
1077
|
+
key: 'ArrowDown'
|
|
1078
|
+
});
|
|
1079
|
+
expect(rows[2]).toHaveFocus();
|
|
1080
|
+
case 10:
|
|
1081
|
+
case "end":
|
|
1082
|
+
return _context24.stop();
|
|
1083
|
+
}
|
|
1084
|
+
}, _callee18);
|
|
1085
|
+
})));
|
|
1086
|
+
test('is-focused (active border) clears when focus leaves the table', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
|
|
1087
|
+
var onRowAction, rows, firstBodyRowCells;
|
|
1088
|
+
return _regeneratorRuntime().wrap(function _callee19$(_context25) {
|
|
1089
|
+
while (1) switch (_context25.prev = _context25.next) {
|
|
1090
|
+
case 0:
|
|
1091
|
+
onRowAction = jest.fn();
|
|
1092
|
+
getComponent({
|
|
1093
|
+
onRowAction: onRowAction
|
|
1094
|
+
});
|
|
1095
|
+
rows = screen.getAllByRole('row'); // Click a cell in the first body row to set activeRowKey
|
|
1096
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
1097
|
+
_context25.next = 6;
|
|
1098
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1099
|
+
case 6:
|
|
1100
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1101
|
+
|
|
1102
|
+
// Flush the setTimeout(0) that resets actionJustFired so the blur handler
|
|
1103
|
+
// can proceed normally for genuine focus-out events.
|
|
1104
|
+
actHooks(function () {
|
|
1105
|
+
jest.runAllTimers();
|
|
1106
|
+
});
|
|
1107
|
+
|
|
1108
|
+
// Use focusOut (which bubbles) to reach the onBlur handler on the scroll
|
|
1109
|
+
// container, simulating focus leaving the table entirely.
|
|
1110
|
+
fireEvent.focusOut(rows[1], {
|
|
1111
|
+
relatedTarget: null
|
|
1112
|
+
});
|
|
1113
|
+
|
|
1114
|
+
// is-focused should be cleared
|
|
1115
|
+
expect(rows[1]).not.toHaveClass('is-focused');
|
|
1116
|
+
case 10:
|
|
1117
|
+
case "end":
|
|
1118
|
+
return _context25.stop();
|
|
1119
|
+
}
|
|
1120
|
+
}, _callee19);
|
|
1121
|
+
})));
|
|
1122
|
+
test('clicking an already-active row toggles activeRowKey off (clears is-focused)', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
|
|
1123
|
+
var onRowAction, rows, firstBodyRowCells;
|
|
1124
|
+
return _regeneratorRuntime().wrap(function _callee20$(_context26) {
|
|
1125
|
+
while (1) switch (_context26.prev = _context26.next) {
|
|
1126
|
+
case 0:
|
|
1127
|
+
onRowAction = jest.fn();
|
|
1128
|
+
getComponent({
|
|
1129
|
+
onRowAction: onRowAction
|
|
1130
|
+
});
|
|
1131
|
+
rows = screen.getAllByRole('row');
|
|
1132
|
+
firstBodyRowCells = rows[1].querySelectorAll('td'); // First click sets the row as active
|
|
1133
|
+
_context26.next = 6;
|
|
1134
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1135
|
+
case 6:
|
|
1136
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1137
|
+
|
|
1138
|
+
// Second click on the same row should toggle it off
|
|
1139
|
+
_context26.next = 9;
|
|
1140
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1141
|
+
case 9:
|
|
1142
|
+
expect(rows[1]).not.toHaveClass('is-focused');
|
|
1143
|
+
case 10:
|
|
1144
|
+
case "end":
|
|
1145
|
+
return _context26.stop();
|
|
1146
|
+
}
|
|
1147
|
+
}, _callee20);
|
|
1148
|
+
})));
|
|
1149
|
+
test('active-row highlight does not clear when focus moves to an overlay panel', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
|
|
1150
|
+
var onRowAction, rows, firstBodyRowCells, panelButton;
|
|
1151
|
+
return _regeneratorRuntime().wrap(function _callee21$(_context27) {
|
|
1152
|
+
while (1) switch (_context27.prev = _context27.next) {
|
|
1153
|
+
case 0:
|
|
1154
|
+
onRowAction = jest.fn();
|
|
1155
|
+
getComponent({
|
|
1156
|
+
onRowAction: onRowAction
|
|
1157
|
+
});
|
|
1158
|
+
rows = screen.getAllByRole('row'); // Click the first body row — sets activeRowKey and fires onRowAction
|
|
1159
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
1160
|
+
_context27.next = 6;
|
|
1161
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1162
|
+
case 6:
|
|
1163
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1164
|
+
|
|
1165
|
+
// Simulate OverlayPanel FocusScope stealing focus to an element outside the table.
|
|
1166
|
+
// The actionJustFired guard (set synchronously in wrappedOnRowAction) should
|
|
1167
|
+
// absorb this blur and keep the active-row highlight intact.
|
|
1168
|
+
panelButton = document.createElement('button');
|
|
1169
|
+
document.body.appendChild(panelButton);
|
|
1170
|
+
fireEvent.focusOut(rows[1], {
|
|
1171
|
+
relatedTarget: panelButton
|
|
1172
|
+
});
|
|
1173
|
+
|
|
1174
|
+
// Highlight must survive the focus-steal
|
|
1175
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1176
|
+
document.body.removeChild(panelButton);
|
|
1177
|
+
case 12:
|
|
1178
|
+
case "end":
|
|
1179
|
+
return _context27.stop();
|
|
1180
|
+
}
|
|
1181
|
+
}, _callee21);
|
|
1182
|
+
})));
|
|
1183
|
+
test('Enter key on a focused action row applies is-focused to that row', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
|
|
1184
|
+
var onRowAction, rows;
|
|
1185
|
+
return _regeneratorRuntime().wrap(function _callee22$(_context28) {
|
|
1186
|
+
while (1) switch (_context28.prev = _context28.next) {
|
|
1187
|
+
case 0:
|
|
1188
|
+
onRowAction = jest.fn();
|
|
1189
|
+
getComponent({
|
|
1190
|
+
selectionMode: 'none',
|
|
1191
|
+
onRowAction: onRowAction
|
|
1192
|
+
});
|
|
1193
|
+
rows = screen.getAllByRole('row'); // Tab to put keyboard focus on the first body row
|
|
1194
|
+
_context28.next = 5;
|
|
1195
|
+
return userEvent.tab();
|
|
1196
|
+
case 5:
|
|
1197
|
+
expect(rows[1]).toHaveFocus();
|
|
1198
|
+
|
|
1199
|
+
// Press Enter to trigger onRowAction via keyboard
|
|
1200
|
+
fireEvent.keyDown(rows[1], {
|
|
1201
|
+
key: 'Enter'
|
|
1202
|
+
});
|
|
1203
|
+
fireEvent.keyUp(rows[1], {
|
|
1204
|
+
key: 'Enter'
|
|
1205
|
+
});
|
|
1206
|
+
expect(onRowAction).toHaveBeenCalledWith('1');
|
|
1207
|
+
|
|
1208
|
+
// The row should carry is-focused (active-row state set from keyboard action)
|
|
1209
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1210
|
+
case 10:
|
|
1211
|
+
case "end":
|
|
1212
|
+
return _context28.stop();
|
|
1213
|
+
}
|
|
1214
|
+
}, _callee22);
|
|
1215
|
+
})));
|
|
1216
|
+
test('active-row highlight clears when arrow keys move focus to another row', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
|
|
1217
|
+
var onRowAction, rows, firstBodyRowCells;
|
|
1218
|
+
return _regeneratorRuntime().wrap(function _callee23$(_context29) {
|
|
1219
|
+
while (1) switch (_context29.prev = _context29.next) {
|
|
1220
|
+
case 0:
|
|
1221
|
+
onRowAction = jest.fn();
|
|
1222
|
+
getComponent({
|
|
1223
|
+
onRowAction: onRowAction
|
|
1224
|
+
});
|
|
1225
|
+
rows = screen.getAllByRole('row'); // Click row 1 to set it as active (simulates opening a panel)
|
|
1226
|
+
firstBodyRowCells = rows[1].querySelectorAll('td');
|
|
1227
|
+
_context29.next = 6;
|
|
1228
|
+
return userEvent.click(firstBodyRowCells[0]);
|
|
1229
|
+
case 6:
|
|
1230
|
+
// Flush the setTimeout(0) guard so subsequent focus events are not swallowed
|
|
1231
|
+
actHooks(function () {
|
|
1232
|
+
jest.runAllTimers();
|
|
1233
|
+
});
|
|
1234
|
+
expect(rows[1]).toHaveClass('is-focused');
|
|
1235
|
+
|
|
1236
|
+
// Simulate the panel closing by returning focus to the row
|
|
1237
|
+
fireEvent.focus(rows[1]);
|
|
1238
|
+
|
|
1239
|
+
// Arrow Down moves focus to row 2 — row 1 should lose is-focused
|
|
1240
|
+
fireEvent.keyDown(rows[1], {
|
|
1241
|
+
key: 'ArrowDown'
|
|
1242
|
+
});
|
|
1243
|
+
fireEvent.keyUp(rows[1], {
|
|
1244
|
+
key: 'ArrowDown'
|
|
1245
|
+
});
|
|
1246
|
+
fireEvent.focus(rows[2]);
|
|
1247
|
+
expect(rows[1]).not.toHaveClass('is-focused');
|
|
1248
|
+
expect(rows[2]).toHaveFocus();
|
|
1249
|
+
case 14:
|
|
1250
|
+
case "end":
|
|
1251
|
+
return _context29.stop();
|
|
1252
|
+
}
|
|
1253
|
+
}, _callee23);
|
|
1254
|
+
})));
|
|
1255
|
+
});
|
|
860
1256
|
describe('Sortable Table with useAsyncList', function () {
|
|
861
1257
|
var dataTestId = 'sortableTable';
|
|
862
1258
|
var defaultTableProps = {
|
|
@@ -869,18 +1265,18 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
869
1265
|
return _load.apply(this, arguments);
|
|
870
1266
|
}
|
|
871
1267
|
function _load() {
|
|
872
|
-
_load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
873
|
-
return _regeneratorRuntime().wrap(function
|
|
874
|
-
while (1) switch (
|
|
1268
|
+
_load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
|
|
1269
|
+
return _regeneratorRuntime().wrap(function _callee32$(_context40) {
|
|
1270
|
+
while (1) switch (_context40.prev = _context40.next) {
|
|
875
1271
|
case 0:
|
|
876
|
-
return
|
|
1272
|
+
return _context40.abrupt("return", {
|
|
877
1273
|
items: objects
|
|
878
1274
|
});
|
|
879
1275
|
case 1:
|
|
880
1276
|
case "end":
|
|
881
|
-
return
|
|
1277
|
+
return _context40.stop();
|
|
882
1278
|
}
|
|
883
|
-
},
|
|
1279
|
+
}, _callee32);
|
|
884
1280
|
}));
|
|
885
1281
|
return _load.apply(this, arguments);
|
|
886
1282
|
}
|
|
@@ -888,13 +1284,13 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
888
1284
|
return _sort.apply(this, arguments);
|
|
889
1285
|
}
|
|
890
1286
|
function _sort() {
|
|
891
|
-
_sort = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
892
|
-
var
|
|
893
|
-
return _regeneratorRuntime().wrap(function
|
|
894
|
-
while (1) switch (
|
|
1287
|
+
_sort = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee33(list) {
|
|
1288
|
+
var _context41;
|
|
1289
|
+
return _regeneratorRuntime().wrap(function _callee33$(_context42) {
|
|
1290
|
+
while (1) switch (_context42.prev = _context42.next) {
|
|
895
1291
|
case 0:
|
|
896
1292
|
// eslint-disable-next-line no-param-reassign
|
|
897
|
-
list.items = _sortInstanceProperty(
|
|
1293
|
+
list.items = _sortInstanceProperty(_context41 = list.items).call(_context41, function (a, b) {
|
|
898
1294
|
var first = a[list.sortDescriptor.column];
|
|
899
1295
|
var second = b[list.sortDescriptor.column];
|
|
900
1296
|
var cmp = (_parseInt(first) || first) < (_parseInt(second) || second) // eslint-disable-line
|
|
@@ -904,17 +1300,17 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
904
1300
|
}
|
|
905
1301
|
return cmp;
|
|
906
1302
|
});
|
|
907
|
-
return
|
|
1303
|
+
return _context42.abrupt("return", list);
|
|
908
1304
|
case 2:
|
|
909
1305
|
case "end":
|
|
910
|
-
return
|
|
1306
|
+
return _context42.stop();
|
|
911
1307
|
}
|
|
912
|
-
},
|
|
1308
|
+
}, _callee33);
|
|
913
1309
|
}));
|
|
914
1310
|
return _sort.apply(this, arguments);
|
|
915
1311
|
}
|
|
916
|
-
var sortableDataTable = function sortableDataTable(
|
|
917
|
-
var result =
|
|
1312
|
+
var sortableDataTable = function sortableDataTable(_ref24) {
|
|
1313
|
+
var result = _ref24.result;
|
|
918
1314
|
return render(___EmotionJSX(TableBase, _extends({}, defaultTableProps, {
|
|
919
1315
|
sortDescriptor: result.current.sortDescriptor
|
|
920
1316
|
}), ___EmotionJSX(THead, {
|
|
@@ -931,10 +1327,10 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
931
1327
|
});
|
|
932
1328
|
})));
|
|
933
1329
|
};
|
|
934
|
-
test('sort by country column A => Z', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
1330
|
+
test('sort by country column A => Z', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
|
|
935
1331
|
var _renderHook, result, sortableTable, rowgroups, thead, headerCells, tRows;
|
|
936
|
-
return _regeneratorRuntime().wrap(function
|
|
937
|
-
while (1) switch (
|
|
1332
|
+
return _regeneratorRuntime().wrap(function _callee27$(_context34) {
|
|
1333
|
+
while (1) switch (_context34.prev = _context34.next) {
|
|
938
1334
|
case 0:
|
|
939
1335
|
_renderHook = renderHook(function () {
|
|
940
1336
|
return useAsyncList({
|
|
@@ -946,47 +1342,47 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
946
1342
|
}
|
|
947
1343
|
});
|
|
948
1344
|
}), result = _renderHook.result;
|
|
949
|
-
|
|
950
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
951
|
-
return _regeneratorRuntime().wrap(function
|
|
952
|
-
while (1) switch (
|
|
1345
|
+
_context34.next = 3;
|
|
1346
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
|
|
1347
|
+
return _regeneratorRuntime().wrap(function _callee24$(_context30) {
|
|
1348
|
+
while (1) switch (_context30.prev = _context30.next) {
|
|
953
1349
|
case 0:
|
|
954
1350
|
jest.runOnlyPendingTimers();
|
|
955
1351
|
case 1:
|
|
956
1352
|
case "end":
|
|
957
|
-
return
|
|
1353
|
+
return _context30.stop();
|
|
958
1354
|
}
|
|
959
|
-
},
|
|
1355
|
+
}, _callee24);
|
|
960
1356
|
})));
|
|
961
1357
|
case 3:
|
|
962
|
-
|
|
963
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
964
|
-
var
|
|
965
|
-
return _regeneratorRuntime().wrap(function
|
|
966
|
-
while (1) switch (
|
|
1358
|
+
_context34.next = 5;
|
|
1359
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
|
|
1360
|
+
var _context31;
|
|
1361
|
+
return _regeneratorRuntime().wrap(function _callee25$(_context32) {
|
|
1362
|
+
while (1) switch (_context32.prev = _context32.next) {
|
|
967
1363
|
case 0:
|
|
968
|
-
_sortInstanceProperty(
|
|
1364
|
+
_sortInstanceProperty(_context31 = result.current).call(_context31, {
|
|
969
1365
|
column: 'country',
|
|
970
1366
|
direction: 'ascending'
|
|
971
1367
|
});
|
|
972
1368
|
case 1:
|
|
973
1369
|
case "end":
|
|
974
|
-
return
|
|
1370
|
+
return _context32.stop();
|
|
975
1371
|
}
|
|
976
|
-
},
|
|
1372
|
+
}, _callee25);
|
|
977
1373
|
})));
|
|
978
1374
|
case 5:
|
|
979
|
-
|
|
980
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
981
|
-
return _regeneratorRuntime().wrap(function
|
|
982
|
-
while (1) switch (
|
|
1375
|
+
_context34.next = 7;
|
|
1376
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
|
|
1377
|
+
return _regeneratorRuntime().wrap(function _callee26$(_context33) {
|
|
1378
|
+
while (1) switch (_context33.prev = _context33.next) {
|
|
983
1379
|
case 0:
|
|
984
1380
|
jest.runOnlyPendingTimers();
|
|
985
1381
|
case 1:
|
|
986
1382
|
case "end":
|
|
987
|
-
return
|
|
1383
|
+
return _context33.stop();
|
|
988
1384
|
}
|
|
989
|
-
},
|
|
1385
|
+
}, _callee26);
|
|
990
1386
|
})));
|
|
991
1387
|
case 7:
|
|
992
1388
|
sortableDataTable({
|
|
@@ -1014,14 +1410,14 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
1014
1410
|
expect(tRows[3]).toHaveTextContent('USA');
|
|
1015
1411
|
case 28:
|
|
1016
1412
|
case "end":
|
|
1017
|
-
return
|
|
1413
|
+
return _context34.stop();
|
|
1018
1414
|
}
|
|
1019
|
-
},
|
|
1415
|
+
}, _callee27);
|
|
1020
1416
|
})));
|
|
1021
|
-
test('sort by country column Z => A', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
1417
|
+
test('sort by country column Z => A', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
|
|
1022
1418
|
var _renderHook2, result, sortableTable, rowgroups, tRows;
|
|
1023
|
-
return _regeneratorRuntime().wrap(function
|
|
1024
|
-
while (1) switch (
|
|
1419
|
+
return _regeneratorRuntime().wrap(function _callee31$(_context39) {
|
|
1420
|
+
while (1) switch (_context39.prev = _context39.next) {
|
|
1025
1421
|
case 0:
|
|
1026
1422
|
_renderHook2 = renderHook(function () {
|
|
1027
1423
|
return useAsyncList({
|
|
@@ -1033,47 +1429,47 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
1033
1429
|
}
|
|
1034
1430
|
});
|
|
1035
1431
|
}), result = _renderHook2.result;
|
|
1036
|
-
|
|
1037
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
1038
|
-
return _regeneratorRuntime().wrap(function
|
|
1039
|
-
while (1) switch (
|
|
1432
|
+
_context39.next = 3;
|
|
1433
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
|
|
1434
|
+
return _regeneratorRuntime().wrap(function _callee28$(_context35) {
|
|
1435
|
+
while (1) switch (_context35.prev = _context35.next) {
|
|
1040
1436
|
case 0:
|
|
1041
1437
|
jest.runOnlyPendingTimers();
|
|
1042
1438
|
case 1:
|
|
1043
1439
|
case "end":
|
|
1044
|
-
return
|
|
1440
|
+
return _context35.stop();
|
|
1045
1441
|
}
|
|
1046
|
-
},
|
|
1442
|
+
}, _callee28);
|
|
1047
1443
|
})));
|
|
1048
1444
|
case 3:
|
|
1049
|
-
|
|
1050
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
1051
|
-
var
|
|
1052
|
-
return _regeneratorRuntime().wrap(function
|
|
1053
|
-
while (1) switch (
|
|
1445
|
+
_context39.next = 5;
|
|
1446
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
|
|
1447
|
+
var _context36;
|
|
1448
|
+
return _regeneratorRuntime().wrap(function _callee29$(_context37) {
|
|
1449
|
+
while (1) switch (_context37.prev = _context37.next) {
|
|
1054
1450
|
case 0:
|
|
1055
|
-
_sortInstanceProperty(
|
|
1451
|
+
_sortInstanceProperty(_context36 = result.current).call(_context36, {
|
|
1056
1452
|
column: 'country',
|
|
1057
1453
|
direction: 'descending'
|
|
1058
1454
|
});
|
|
1059
1455
|
case 1:
|
|
1060
1456
|
case "end":
|
|
1061
|
-
return
|
|
1457
|
+
return _context37.stop();
|
|
1062
1458
|
}
|
|
1063
|
-
},
|
|
1459
|
+
}, _callee29);
|
|
1064
1460
|
})));
|
|
1065
1461
|
case 5:
|
|
1066
|
-
|
|
1067
|
-
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function
|
|
1068
|
-
return _regeneratorRuntime().wrap(function
|
|
1069
|
-
while (1) switch (
|
|
1462
|
+
_context39.next = 7;
|
|
1463
|
+
return actHooks(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
|
|
1464
|
+
return _regeneratorRuntime().wrap(function _callee30$(_context38) {
|
|
1465
|
+
while (1) switch (_context38.prev = _context38.next) {
|
|
1070
1466
|
case 0:
|
|
1071
1467
|
jest.runOnlyPendingTimers();
|
|
1072
1468
|
case 1:
|
|
1073
1469
|
case "end":
|
|
1074
|
-
return
|
|
1470
|
+
return _context38.stop();
|
|
1075
1471
|
}
|
|
1076
|
-
},
|
|
1472
|
+
}, _callee30);
|
|
1077
1473
|
})));
|
|
1078
1474
|
case 7:
|
|
1079
1475
|
sortableDataTable({
|
|
@@ -1097,8 +1493,8 @@ describe('Sortable Table with useAsyncList', function () {
|
|
|
1097
1493
|
expect(tRows[3]).toHaveTextContent('Canada');
|
|
1098
1494
|
case 24:
|
|
1099
1495
|
case "end":
|
|
1100
|
-
return
|
|
1496
|
+
return _context39.stop();
|
|
1101
1497
|
}
|
|
1102
|
-
},
|
|
1498
|
+
}, _callee31);
|
|
1103
1499
|
})));
|
|
1104
1500
|
});
|
|
@@ -51,5 +51,8 @@ export var tableBaseArgTypes = {
|
|
|
51
51
|
}),
|
|
52
52
|
onSelectionChange: _objectSpread(_objectSpread({}, funcArg), {}, {
|
|
53
53
|
description: 'Callback invoked when the selection state changes.'
|
|
54
|
+
}),
|
|
55
|
+
onRowAction: _objectSpread(_objectSpread({}, funcArg), {}, {
|
|
56
|
+
description: 'Callback fired when a row is pressed (pointer or Enter key), receiving the key of the pressed row.'
|
|
54
57
|
})
|
|
55
58
|
};
|