@carbon/ibm-products 2.32.0 → 2.34.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (178) hide show
  1. package/css/index-full-carbon.css +351 -3
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +351 -3
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +351 -3
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionBar/ActionBar.js +8 -1
  14. package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  15. package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
  16. package/es/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  17. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  18. package/es/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  19. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  20. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  21. package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +10 -3
  22. package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  23. package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
  24. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  25. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  26. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  27. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  28. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
  29. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  30. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  31. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  32. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  33. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  34. package/es/components/Datagrid/useRowSize.js +4 -2
  35. package/es/components/DescriptionList/DescriptionList.d.ts +0 -37
  36. package/es/components/DescriptionList/DescriptionList.js +7 -12
  37. package/es/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  38. package/es/components/DescriptionList/DescriptionListBody.js +39 -0
  39. package/es/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  40. package/es/components/DescriptionList/DescriptionListCell.js +39 -0
  41. package/es/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  42. package/es/components/DescriptionList/DescriptionListRow.js +41 -0
  43. package/es/components/DescriptionList/index.d.ts +4 -1
  44. package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  45. package/es/components/EditSidePanel/EditSidePanel.js +8 -10
  46. package/es/components/FilterPanel/FilterPanel.d.ts +5 -0
  47. package/es/components/FilterPanel/FilterPanel.js +55 -0
  48. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  49. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
  50. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  51. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
  52. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  53. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +80 -0
  54. package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  55. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  56. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
  57. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  58. package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
  59. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  60. package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +63 -0
  61. package/es/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  62. package/es/components/FilterPanel/index.d.ts +7 -0
  63. package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
  64. package/es/components/OptionsTile/OptionsTile.js +9 -20
  65. package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
  66. package/es/components/RemoveModal/RemoveModal.js +1 -0
  67. package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  68. package/es/components/ScrollGradient/ScrollGradient.js +156 -0
  69. package/es/components/ScrollGradient/constants.d.ts +15 -0
  70. package/es/components/ScrollGradient/constants.js +121 -0
  71. package/es/components/ScrollGradient/index.d.ts +1 -0
  72. package/es/components/SidePanel/SidePanel.d.ts +144 -2
  73. package/es/components/SidePanel/SidePanel.js +88 -112
  74. package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
  75. package/es/components/StatusIcon/StatusIcon.js +97 -95
  76. package/es/components/Tearsheet/TearsheetShell.js +9 -1
  77. package/es/components/Toolbar/ToolbarGroup.d.ts +17 -2
  78. package/es/components/Toolbar/ToolbarGroup.js +0 -1
  79. package/es/components/TruncatedList/TruncatedList.js +5 -3
  80. package/es/components/UserAvatar/UserAvatar.js +3 -2
  81. package/es/components/index.d.ts +4 -1
  82. package/es/global/js/hooks/useFocus.js +9 -2
  83. package/es/global/js/package-settings.d.ts +12 -0
  84. package/es/global/js/package-settings.js +12 -0
  85. package/es/index.js +12 -0
  86. package/es/settings.d.ts +12 -0
  87. package/lib/components/ActionBar/ActionBar.js +11 -6
  88. package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
  89. package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
  90. package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts +12 -1
  91. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  92. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +39 -145
  93. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +60 -112
  94. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts +3 -1
  95. package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +9 -2
  96. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
  97. package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
  98. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  99. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
  100. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  101. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  102. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
  103. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
  104. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
  105. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  107. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +5 -5
  108. package/lib/components/Datagrid/useRowSize.js +4 -2
  109. package/lib/components/DescriptionList/DescriptionList.d.ts +0 -37
  110. package/lib/components/DescriptionList/DescriptionList.js +6 -11
  111. package/lib/components/DescriptionList/DescriptionListBody.d.ts +2 -0
  112. package/lib/components/DescriptionList/DescriptionListBody.js +46 -0
  113. package/lib/components/DescriptionList/DescriptionListCell.d.ts +2 -0
  114. package/lib/components/DescriptionList/DescriptionListCell.js +46 -0
  115. package/lib/components/DescriptionList/DescriptionListRow.d.ts +2 -0
  116. package/lib/components/DescriptionList/DescriptionListRow.js +48 -0
  117. package/lib/components/DescriptionList/index.d.ts +4 -1
  118. package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
  119. package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
  120. package/lib/components/FilterPanel/FilterPanel.d.ts +5 -0
  121. package/lib/components/FilterPanel/FilterPanel.js +62 -0
  122. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
  123. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
  124. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
  125. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
  126. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  127. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +87 -0
  128. package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
  129. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
  130. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
  131. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
  132. package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
  133. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.d.ts +5 -0
  134. package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +70 -0
  135. package/lib/components/FilterPanel/FilterPanelLabel/index.d.ts +1 -0
  136. package/lib/components/FilterPanel/index.d.ts +7 -0
  137. package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
  138. package/lib/components/OptionsTile/OptionsTile.js +9 -20
  139. package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
  140. package/lib/components/RemoveModal/RemoveModal.js +1 -0
  141. package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
  142. package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
  143. package/lib/components/ScrollGradient/constants.d.ts +15 -0
  144. package/lib/components/ScrollGradient/constants.js +128 -0
  145. package/lib/components/ScrollGradient/index.d.ts +1 -0
  146. package/lib/components/SidePanel/SidePanel.d.ts +144 -2
  147. package/lib/components/SidePanel/SidePanel.js +88 -112
  148. package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
  149. package/lib/components/StatusIcon/StatusIcon.js +97 -95
  150. package/lib/components/Tearsheet/TearsheetShell.js +9 -1
  151. package/lib/components/Toolbar/ToolbarGroup.d.ts +17 -2
  152. package/lib/components/Toolbar/ToolbarGroup.js +0 -1
  153. package/lib/components/TruncatedList/TruncatedList.js +5 -3
  154. package/lib/components/UserAvatar/UserAvatar.js +3 -2
  155. package/lib/components/index.d.ts +4 -1
  156. package/lib/global/js/hooks/useFocus.js +9 -2
  157. package/lib/global/js/package-settings.d.ts +12 -0
  158. package/lib/global/js/package-settings.js +12 -0
  159. package/lib/index.js +60 -0
  160. package/lib/settings.d.ts +12 -0
  161. package/package.json +3 -3
  162. package/scss/components/FilterPanel/_carbon-imports.scss +9 -0
  163. package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +56 -0
  164. package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
  165. package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +62 -0
  166. package/scss/components/FilterPanel/_filter-panel-checkbox.scss +54 -0
  167. package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
  168. package/scss/components/FilterPanel/_filter-panel-label.scss +39 -0
  169. package/scss/components/FilterPanel/_filter-panel.scss +31 -0
  170. package/scss/components/FilterPanel/_index-with-carbon.scss +15 -0
  171. package/scss/components/FilterPanel/_index.scss +14 -0
  172. package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
  173. package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
  174. package/scss/components/ScrollGradient/_index.scss +8 -0
  175. package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
  176. package/scss/components/UserAvatar/_user-avatar.scss +37 -4
  177. package/scss/components/_index-with-carbon.scss +2 -0
  178. package/scss/components/_index.scss +2 -0
@@ -13,21 +13,20 @@ import cx from 'classnames';
13
13
  import { px } from '@carbon/layout';
14
14
  import { pkg } from '../../settings.js';
15
15
  import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
16
- import uuidv4 from '../../global/js/utils/uuidv4.js';
17
16
  import { removeCellSelections } from './utils/removeCellSelections.js';
18
17
  import { createCellSelectionArea } from './utils/createCellSelectionArea.js';
19
18
  import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
20
19
  import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
21
- import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
22
20
  import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
23
- import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
21
+ import { handleBodyCellClick, handleBodyCellHover, handleRowHeaderClick } from './utils/commonEventHandlers.js';
24
22
  import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
25
23
  import { useSpreadsheetMouseUp } from './hooks/useSpreadsheetMouseUp.js';
26
24
 
27
25
  var _div;
28
26
  var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
29
27
  var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
- var columns = _ref.columns,
28
+ var activeCellRef = _ref.activeCellRef,
29
+ columns = _ref.columns,
31
30
  activeCellCoordinates = _ref.activeCellCoordinates,
32
31
  defaultColumn = _ref.defaultColumn,
33
32
  defaultEmptyRowCount = _ref.defaultEmptyRowCount,
@@ -196,75 +195,56 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
196
195
  }
197
196
  }
198
197
  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
198
+ //selectionAreas will be set when ever a selection area is made.
199
+ useEffect(function () {
200
+ removeDuplicateSelections();
201
+ }, [selectionAreas, removeDuplicateSelections]);
199
202
 
200
- // onClick fn for each cell in the data spreadsheet body,
201
- // adds the active cell highlight
202
- var handleBodyCellClick = useCallback(function (cell, columnIndex) {
203
- return function (event) {
204
- event.preventDefault();
205
- var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
206
- var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
207
- setValidStartingPoint(isValidSelectionAreaStart);
208
- var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
209
- var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
210
- setContainerHasFocus(true);
211
- var activeCoordinates = {
212
- row: cell.row.index,
213
- column: columnIndex
214
- };
215
- var tempMatcher = uuidv4();
216
- setClickAndHoldActive(true);
203
+ //this method will check for any duplicate selection area and remove.
204
+ //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
205
+ var removeDuplicateSelections = useCallback(function () {
206
+ var uniqueAttrArray = [],
207
+ removedSelectionAreaMatcherArr = [];
208
+ ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
209
+ var _selectorEl$style = selectorEl.style,
210
+ top = _selectorEl$style.top,
211
+ left = _selectorEl$style.left,
212
+ height = _selectorEl$style.height,
213
+ width = _selectorEl$style.width;
214
+ var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
215
+ if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
216
+ uniqueAttrArray.push(uniqueAttrStr);
217
+ } else {
218
+ selectorEl.remove(); // this is identified as duplicate selection and hence removing.
219
+ removedSelectionAreaMatcherArr.push(selectorEl.getAttribute('data-matcher-id'));
220
+ }
221
+ });
217
222
 
218
- // prevent multiple selections unless cmd key is held
219
- // meaning that selectionAreas should only have one item by default
220
- if (isHoldingCommandKey) {
221
- var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
222
- activeCellElement.setAttribute('data-selection-id', tempMatcher);
223
- setActiveCellInsideSelectionArea(true);
224
- setActiveCellCoordinates(activeCoordinates);
225
- setCurrentMatcher(tempMatcher);
226
- setSelectionAreas(function (prev) {
227
- return [].concat(_toConsumableArray(prev), [{
228
- point1: activeCoordinates,
229
- matcher: tempMatcher
230
- }]);
223
+ //clean the duplicate selectionAreaData and selectionArea
224
+ if (removedSelectionAreaMatcherArr.length) {
225
+ setSelectionAreas(function (prev) {
226
+ var prevValues = deepCloneObject(prev);
227
+ return prevValues.filter(function (item) {
228
+ return !removedSelectionAreaMatcherArr.includes(item.matcher);
231
229
  });
232
- } else if (isHoldingShiftKey) {
233
- setContainerHasFocus(true);
234
- var selectionAreaClone = deepCloneObject(selectionAreas);
235
- var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
236
- return item.matcher === currentMatcher;
237
- });
238
- if (indexOfItemToUpdate === -1) {
239
- // There is always a selectionArea with a point1 object that updates
240
- // whenever the activeCellCoordinates update, we should always be able
241
- // to find an index, but if we do not for some reason we should return
242
- // at this point.
243
- return;
244
- } else {
245
- // Update the selectionArea that was found, do not update currentMatcher
246
- selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
247
- selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
248
- selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
249
- selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
250
- setSelectionAreas(selectionAreaClone);
251
- }
252
- } else {
253
- setActiveCellInsideSelectionArea(false);
254
- setActiveCellCoordinates(activeCoordinates);
255
- // remove all previous cell selections
256
- removeCellSelections({
257
- spreadsheetRef: ref
230
+ });
231
+ setSelectionAreaData(function (prev) {
232
+ var prevValues = deepCloneObject(prev);
233
+ return prevValues.filter(function (item) {
234
+ return !removedSelectionAreaMatcherArr.includes(item.selectionId);
258
235
  });
259
- setSelectionAreas([{
260
- point1: activeCoordinates,
261
- matcher: tempMatcher
262
- }]);
263
- setCurrentMatcher(tempMatcher);
264
- setSelectionAreaData([]);
265
- }
236
+ });
237
+ }
238
+ }, [ref, setSelectionAreas, setSelectionAreaData]);
239
+
240
+ // onClick fn for each cell in the data spreadsheet body,
241
+ // adds the active cell highlight
242
+
243
+ var handleBodyCellClickEvent = useCallback(function (cell, columnIndex) {
244
+ return function (event) {
245
+ handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
266
246
  };
267
- }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
247
+ }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
268
248
  var handleBodyScroll = function handleBodyScroll() {
269
249
  var headerRowElement = ref.current.querySelector("\n .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
270
250
  headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
@@ -278,50 +258,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
278
258
  contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
279
259
  };
280
260
  });
281
- var handleBodyCellHover = useCallback(function (cell, columnIndex) {
261
+ var handleBodyCellHoverEvent = useCallback(function (cell, columnIndex) {
282
262
  return function () {
283
- if (clickAndHoldActive) {
284
- var cellCoordinates = {
285
- row: cell.row.index,
286
- column: columnIndex
287
- };
288
- setSelectionAreas(function (prev) {
289
- var _selectionAreaClone$i, _selectionAreaClone$i2;
290
- var selectionAreaClone = deepCloneObject(prev);
291
- var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
292
- return item.matcher === currentMatcher;
293
- });
294
- // No items in the array match up with the currentMatcher value
295
- if (indexOfItemToUpdate === -1) {
296
- return prev;
297
- }
298
- // Do not update state if you're still hovering on the same cell
299
- if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
300
- return prev;
301
- }
302
- selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
303
- selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
304
- return selectionAreaClone;
305
- });
306
- }
263
+ handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
307
264
  };
308
265
  }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
309
- var handleRowHeaderClick = useCallback(function (index) {
266
+ var handleRowHeaderClickEvent = useCallback(function (index) {
310
267
  return function (event) {
311
- var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
312
- handleHeaderCellSelection({
313
- type: 'row',
314
- activeCellCoordinates: activeCellCoordinates,
315
- rows: rows,
316
- columns: columns,
317
- setActiveCellCoordinates: setActiveCellCoordinates,
318
- setCurrentMatcher: setCurrentMatcher,
319
- setSelectionAreas: setSelectionAreas,
320
- spreadsheetRef: ref,
321
- index: index,
322
- setSelectionAreaData: setSelectionAreaData,
323
- isHoldingCommandKey: isHoldingCommandKey
324
- });
268
+ handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
325
269
  };
326
270
  }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
327
271
 
@@ -371,7 +315,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
371
315
  "data-row-index": index,
372
316
  "data-column-index": "header",
373
317
  type: "button",
374
- onClick: handleRowHeaderClick(index),
318
+ onClick: handleRowHeaderClickEvent(index),
375
319
  className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
376
320
  style: {
377
321
  width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
@@ -393,14 +337,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
393
337
  "data-row-index": cell.row.index,
394
338
  "data-column-index": index,
395
339
  className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
396
- onMouseDown: handleBodyCellClick(cell, index),
397
- onMouseOver: handleBodyCellHover(cell, index),
340
+ onMouseDown: handleBodyCellClickEvent(cell, index),
341
+ onMouseOver: handleBodyCellHoverEvent(cell, index),
398
342
  onFocus: function onFocus() {},
399
343
  type: "button"
400
344
  }, cell.render('Cell')));
401
345
  }));
402
346
  }
403
- }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
347
+ }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
404
348
  var spreadsheetBodyRef = useRef();
405
349
  return /*#__PURE__*/React__default.createElement("div", _extends({
406
350
  ref: spreadsheetBodyRef,
@@ -428,6 +372,10 @@ DataSpreadsheetBody.propTypes = {
428
372
  row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
429
373
  column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
430
374
  }),
375
+ /**
376
+ *This is the ref of the button input, which is the active cell element
377
+ */
378
+ activeCellRef: PropTypes.object,
431
379
  /**
432
380
  * Is the user clicking and holding in the data spreadsheet body
433
381
  */
@@ -1,6 +1,8 @@
1
- export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, }: {
1
+ export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, activeCellContent, isActiveHeaderCellChanged, }: {
2
2
  spreadsheetRef: any;
3
3
  activeCellCoordinates: any;
4
4
  containerHasFocus: any;
5
5
  createActiveCell: any;
6
+ activeCellContent: any;
7
+ isActiveHeaderCellChanged: any;
6
8
  }): void;
@@ -5,15 +5,22 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { useEffect } from 'react';
8
+ import { useEffect, useCallback } from 'react';
9
9
 
10
10
  // Moves the placement of the active cell
11
11
  var useMoveActiveCell = function useMoveActiveCell(_ref) {
12
12
  var spreadsheetRef = _ref.spreadsheetRef,
13
13
  activeCellCoordinates = _ref.activeCellCoordinates,
14
14
  containerHasFocus = _ref.containerHasFocus,
15
- createActiveCell = _ref.createActiveCell;
15
+ createActiveCell = _ref.createActiveCell,
16
+ activeCellContent = _ref.activeCellContent,
17
+ isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
18
+ //new active cell is created when the activeCellContent changes or navigate through headers
19
+ // Otherwise new active cell will display the old value in a glance
16
20
  useEffect(function () {
21
+ performCreateActiveCell();
22
+ }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
23
+ var performCreateActiveCell = useCallback(function () {
17
24
  var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
18
25
  var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
19
26
  var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
@@ -24,7 +31,7 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
24
31
  addToHeader: shouldPlaceActiveCellInHeader
25
32
  });
26
33
  }
27
- }, [activeCellCoordinates, spreadsheetRef, createActiveCell, containerHasFocus]);
34
+ }, [spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell]);
28
35
  };
29
36
 
30
37
  export { useMoveActiveCell };
@@ -0,0 +1,4 @@
1
+ export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
2
+ export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
3
+ export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
4
+ export function handleKeyPress(event: any, ...rest: any[]): any;
@@ -0,0 +1,304 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import { pkg } from '../../../settings.js';
10
+ import { checkForHoldingKey } from './checkForHoldingKey.js';
11
+ import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
12
+ import uuidv4 from '../../../global/js/utils/uuidv4.js';
13
+ import { removeCellSelections } from './removeCellSelections.js';
14
+ import { handleHeaderCellSelection } from './handleHeaderCellSelection.js';
15
+ import { includesShift, handleMultipleKeys, includesResourceKey } from './handleMultipleKeys.js';
16
+ import { handleActiveCellInSelectionEnter } from './handleActiveCellInSelectionEnter.js';
17
+ import { handleActiveCellInSelectionTab } from './handleActiveCellInSelectionTab.js';
18
+ import { handleCellDeletion } from './handleCellDeletion.js';
19
+
20
+ var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
21
+
22
+ // onClick fn for each cell in the data spreadsheet body,
23
+ // adds the active cell highlight
24
+
25
+ var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event) {
26
+ for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
27
+ rest[_key - 3] = arguments[_key];
28
+ }
29
+ var currentMatcher = rest[0],
30
+ activeCellCoordinates = rest[1],
31
+ selectionAreas = rest[2],
32
+ setActiveCellCoordinates = rest[3],
33
+ setSelectionAreas = rest[4],
34
+ setContainerHasFocus = rest[5],
35
+ setClickAndHoldActive = rest[6],
36
+ setCurrentMatcher = rest[7],
37
+ ref = rest[8],
38
+ setSelectionAreaData = rest[9],
39
+ setActiveCellInsideSelectionArea = rest[10],
40
+ activeCellRef = rest[11],
41
+ setValidStartingPoint = rest[12];
42
+ event.preventDefault();
43
+ var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
44
+ var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
45
+ setValidStartingPoint(isValidSelectionAreaStart);
46
+ var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
47
+ var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
48
+ setContainerHasFocus(true);
49
+ var activeCoordinates = {
50
+ row: cell.row.index,
51
+ column: columnIndex
52
+ };
53
+ var tempMatcher = uuidv4();
54
+ setClickAndHoldActive(true);
55
+
56
+ // prevent multiple selections unless cmd key is held
57
+ // meaning that selectionAreas should only have one item by default
58
+ if (isHoldingCommandKey) {
59
+ var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
60
+ activeCellElement.setAttribute('data-selection-id', tempMatcher);
61
+ setActiveCellInsideSelectionArea(true);
62
+ setActiveCellCoordinates(activeCoordinates);
63
+ setCurrentMatcher(tempMatcher);
64
+ setSelectionAreas(function (prev) {
65
+ return [].concat(_toConsumableArray(prev), [{
66
+ point1: activeCoordinates,
67
+ matcher: tempMatcher
68
+ }]);
69
+ });
70
+ } else if (isHoldingShiftKey) {
71
+ setContainerHasFocus(true);
72
+ var selectionAreaClone = deepCloneObject(selectionAreas);
73
+ var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
74
+ return item.matcher === currentMatcher;
75
+ });
76
+ if (indexOfItemToUpdate === -1) {
77
+ // There is always a selectionArea with a point1 object that updates
78
+ // whenever the activeCellCoordinates update, we should always be able
79
+ // to find an index, but if we do not for some reason we should return
80
+ // at this point.
81
+ return;
82
+ } else {
83
+ // Update the selectionArea that was found, do not update currentMatcher
84
+ selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
85
+ selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
86
+ selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
87
+ selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
88
+ setSelectionAreas(selectionAreaClone);
89
+ }
90
+ } else {
91
+ activeCellRef.current.style.display = 'none';
92
+ setActiveCellInsideSelectionArea(false);
93
+ setActiveCellCoordinates(activeCoordinates);
94
+ // remove all previous cell selections
95
+ removeCellSelections({
96
+ spreadsheetRef: ref
97
+ });
98
+ setSelectionAreas([{
99
+ point1: activeCoordinates,
100
+ matcher: tempMatcher
101
+ }]);
102
+ setCurrentMatcher(tempMatcher);
103
+ setSelectionAreaData([]);
104
+ }
105
+ };
106
+ var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
107
+ for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
108
+ rest[_key2 - 2] = arguments[_key2];
109
+ }
110
+ var clickAndHoldActive = rest[0],
111
+ currentMatcher = rest[1],
112
+ setSelectionAreas = rest[2];
113
+ if (clickAndHoldActive) {
114
+ var cellCoordinates = {
115
+ row: cell.row.index,
116
+ column: columnIndex
117
+ };
118
+ setSelectionAreas(function (prev) {
119
+ var _selectionAreaClone$i, _selectionAreaClone$i2;
120
+ var selectionAreaClone = deepCloneObject(prev);
121
+ var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
122
+ return item.matcher === currentMatcher;
123
+ });
124
+ // No items in the array match up with the currentMatcher value
125
+ if (indexOfItemToUpdate === -1) {
126
+ return prev;
127
+ }
128
+ // Do not update state if you're still hovering on the same cell
129
+ if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
130
+ return prev;
131
+ }
132
+ selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
133
+ selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
134
+ return selectionAreaClone;
135
+ });
136
+ }
137
+ };
138
+ var handleRowHeaderClick = function handleRowHeaderClick(index, event) {
139
+ for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
140
+ rest[_key3 - 2] = arguments[_key3];
141
+ }
142
+ var columns = rest[0],
143
+ ref = rest[1],
144
+ setSelectionAreas = rest[2],
145
+ setCurrentMatcher = rest[3],
146
+ setActiveCellCoordinates = rest[4],
147
+ activeCellCoordinates = rest[5],
148
+ rows = rest[6],
149
+ setSelectionAreaData = rest[7];
150
+ var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
151
+ handleHeaderCellSelection({
152
+ type: 'row',
153
+ activeCellCoordinates: activeCellCoordinates,
154
+ rows: rows,
155
+ columns: columns,
156
+ setActiveCellCoordinates: setActiveCellCoordinates,
157
+ setCurrentMatcher: setCurrentMatcher,
158
+ setSelectionAreas: setSelectionAreas,
159
+ spreadsheetRef: ref,
160
+ index: index,
161
+ setSelectionAreaData: setSelectionAreaData,
162
+ isHoldingCommandKey: isHoldingCommandKey
163
+ });
164
+ };
165
+ var handleKeyPress = function handleKeyPress(event) {
166
+ for (var _len4 = arguments.length, rest = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
167
+ rest[_key4 - 1] = arguments[_key4];
168
+ }
169
+ var activeCellInsideSelectionArea = rest[0],
170
+ updateActiveCellCoordinates = rest[1],
171
+ activeCellCoordinates = rest[2],
172
+ removeActiveCell = rest[3],
173
+ columns = rest[4],
174
+ rows = rest[5],
175
+ spreadsheetRef = rest[6],
176
+ currentMatcher = rest[7],
177
+ removeCellEditor = rest[8],
178
+ selectionAreas = rest[9],
179
+ handleHomeEndKey = rest[10],
180
+ keysPressedList = rest[11],
181
+ usingMac = rest[12],
182
+ updateData = rest[13],
183
+ checkForReturnCondition = rest[14],
184
+ handleArrowKeyPress = rest[15],
185
+ setSelectionAreas = rest[16],
186
+ setSelectionAreaData = rest[17],
187
+ setCurrentMatcher = rest[18],
188
+ activeCellRef = rest[19],
189
+ setActiveCellCoordinates = rest[20],
190
+ setContainerHasFocus = rest[21],
191
+ setActiveCellContent = rest[22];
192
+ var key = event.key;
193
+ // Command keys need to be returned as there is default browser behavior with these keys
194
+ // Needs to be returned in editing mode
195
+ if (checkForReturnCondition(key)) {
196
+ return;
197
+ }
198
+
199
+ // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
200
+ if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
201
+ if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !includesShift(keysPressedList)) {
202
+ setSelectionAreas([]);
203
+ setSelectionAreaData([]);
204
+ removeCellSelections({
205
+ spreadsheetRef: spreadsheetRef
206
+ });
207
+ }
208
+ }
209
+ if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
210
+ handleMultipleKeys({
211
+ activeCellCoordinates: activeCellCoordinates,
212
+ event: event,
213
+ keysPressedList: keysPressedList,
214
+ selectionAreas: selectionAreas,
215
+ currentMatcher: currentMatcher,
216
+ rows: rows,
217
+ setSelectionAreas: setSelectionAreas,
218
+ columns: columns,
219
+ updateActiveCellCoordinates: updateActiveCellCoordinates,
220
+ spreadsheetRef: spreadsheetRef,
221
+ removeCellSelections: removeCellSelections,
222
+ blockClass: blockClass,
223
+ setCurrentMatcher: setCurrentMatcher,
224
+ usingMac: usingMac
225
+ });
226
+ }
227
+
228
+ // Allow arrow key navigation if there are less than two activeKeys OR
229
+ // if one of the activeCellCoordinates is in a header position
230
+ // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
231
+
232
+ if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
233
+ switch (key) {
234
+ case 'Backspace':
235
+ case 'Delete':
236
+ {
237
+ var deleteParams = {
238
+ selectionAreas: selectionAreas,
239
+ currentMatcher: currentMatcher,
240
+ rows: rows,
241
+ setActiveCellContent: setActiveCellContent,
242
+ updateData: updateData,
243
+ activeCellCoordinates: activeCellCoordinates
244
+ };
245
+ handleCellDeletion(deleteParams);
246
+ break;
247
+ }
248
+ // Enter
249
+ case 'Enter':
250
+ {
251
+ handleActiveCellInSelectionEnter({
252
+ activeCellInsideSelectionArea: activeCellInsideSelectionArea,
253
+ activeCellCoordinates: activeCellCoordinates,
254
+ activeCellRef: activeCellRef,
255
+ selectionAreas: selectionAreas,
256
+ updateActiveCellCoordinates: updateActiveCellCoordinates
257
+ });
258
+ break;
259
+ }
260
+ // HOME
261
+ case 'Home':
262
+ case 'End':
263
+ {
264
+ event.preventDefault();
265
+ if (includesResourceKey(keysPressedList, usingMac)) {
266
+ return;
267
+ }
268
+ handleHomeEndKey({
269
+ type: key
270
+ });
271
+ break;
272
+ }
273
+ // Tab
274
+ case 'Tab':
275
+ {
276
+ if (activeCellInsideSelectionArea) {
277
+ event.preventDefault();
278
+ return handleActiveCellInSelectionTab({
279
+ activeCellInsideSelectionArea: activeCellInsideSelectionArea,
280
+ activeCellCoordinates: activeCellCoordinates,
281
+ activeCellRef: activeCellRef,
282
+ selectionAreas: selectionAreas,
283
+ updateActiveCellCoordinates: updateActiveCellCoordinates
284
+ });
285
+ }
286
+ setSelectionAreas([]);
287
+ removeActiveCell();
288
+ removeCellEditor();
289
+ setContainerHasFocus(false);
290
+ setActiveCellCoordinates(null);
291
+ break;
292
+ }
293
+ case 'ArrowLeft':
294
+ case 'ArrowUp':
295
+ case 'ArrowRight':
296
+ case 'ArrowDown':
297
+ {
298
+ handleArrowKeyPress(key);
299
+ }
300
+ }
301
+ }
302
+ };
303
+
304
+ export { handleBodyCellClick, handleBodyCellHover, handleKeyPress, handleRowHeaderClick };
@@ -98,7 +98,8 @@ var DatagridContent = function DatagridContent(_ref) {
98
98
  instance: datagridState,
99
99
  keysPressedList: keysPressedList,
100
100
  state: inlineEditState,
101
- usingMac: usingMac
101
+ usingMac: usingMac,
102
+ ref: multiKeyTrackingRef
102
103
  });
103
104
  },
104
105
  onFocus: withInlineEdit && function () {
@@ -35,7 +35,10 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
35
35
  link: emptyStateLink
36
36
  };
37
37
  var validEmptyStates = ['error', 'noData', 'notFound'];
38
- return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
38
+ return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
39
+ role: undefined
40
+ }), {
41
+ "aria-live": null,
39
42
  className: "".concat(blockClass, "__empty-state-body")
40
43
  }), /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
41
44
  colSpan: headers.length,
@@ -20,7 +20,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
20
20
  var getTableBodyProps = datagridState.getTableBodyProps,
21
21
  rows = datagridState.rows,
22
22
  prepareRow = datagridState.prepareRow;
23
- return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps(), {
23
+ return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps({
24
+ role: undefined
25
+ }), {
24
26
  className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
25
27
  }), rows.map(function (row) {
26
28
  prepareRow(row);
@@ -16,7 +16,10 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
16
16
  var getTableBodyProps = datagridState.getTableBodyProps,
17
17
  rows = datagridState.rows,
18
18
  prepareRow = datagridState.prepareRow;
19
- return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
19
+ return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
20
+ role: undefined
21
+ }), {
22
+ "aria-live": null,
20
23
  className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
21
24
  }), rows.map(function (row) {
22
25
  prepareRow(row);