@carbon/ibm-products 1.18.1 → 1.19.1

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.
Files changed (59) hide show
  1. package/css/components/Datagrid/styles/draggableElement.css +57 -0
  2. package/css/components/Datagrid/styles/draggableElement.css.map +1 -0
  3. package/css/components/Datagrid/styles/index.css +80 -0
  4. package/css/components/Datagrid/styles/index.css.map +1 -1
  5. package/css/index-full-carbon.css +98 -3
  6. package/css/index-full-carbon.css.map +1 -1
  7. package/css/index-full-carbon.min.css +3 -3
  8. package/css/index-full-carbon.min.css.map +1 -1
  9. package/css/index-without-carbon.css +98 -3
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +98 -3
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ActionSet/ActionSet.js +1 -0
  18. package/es/components/AddSelect/AddSelectFilter.js +9 -3
  19. package/es/components/AddSelect/AddSelectSidebar.js +3 -2
  20. package/es/components/ComboButton/ComboButton.js +1 -2
  21. package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
  22. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
  23. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -6
  25. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +65 -34
  26. package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
  27. package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
  28. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
  29. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
  30. package/es/components/Datagrid/Datagrid/DraggableElement.js +9 -19
  31. package/es/components/ExportModal/ExportModal.js +1 -1
  32. package/es/global/js/hooks/useWindowResize.js +2 -1
  33. package/es/global/js/hooks/useWindowScroll.js +2 -1
  34. package/es/global/js/utils/scrollableAncestor.js +2 -1
  35. package/lib/components/ActionSet/ActionSet.js +1 -0
  36. package/lib/components/AddSelect/AddSelectFilter.js +10 -3
  37. package/lib/components/AddSelect/AddSelectSidebar.js +3 -2
  38. package/lib/components/ComboButton/ComboButton.js +2 -4
  39. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
  40. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
  41. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
  42. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -7
  43. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +66 -34
  44. package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
  45. package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
  46. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
  47. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
  48. package/lib/components/Datagrid/Datagrid/DraggableElement.js +11 -19
  49. package/lib/components/ExportModal/ExportModal.js +1 -1
  50. package/lib/global/js/hooks/useWindowResize.js +3 -1
  51. package/lib/global/js/hooks/useWindowScroll.js +5 -1
  52. package/lib/global/js/utils/scrollableAncestor.js +6 -1
  53. package/package.json +4 -4
  54. package/scss/components/AddSelect/_add-select.scss +6 -0
  55. package/scss/components/ComboButton/_combo-button.scss +2 -1
  56. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +7 -0
  57. package/scss/components/Datagrid/_datagrid.scss +1 -10
  58. package/scss/components/Datagrid/styles/draggableElement.scss +58 -0
  59. package/scss/components/Datagrid/styles/index.scss +2 -1
@@ -68,7 +68,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
68
68
  var contentScrollRef = useRef();
69
69
  var previousState = usePreviousValue({
70
70
  selectionAreaData: selectionAreaData,
71
- clickAndHoldActive: clickAndHoldActive
71
+ clickAndHoldActive: clickAndHoldActive,
72
+ rowHeight: defaultColumn.rowHeight
72
73
  }); // Set custom css property containing the spreadsheet total width
73
74
 
74
75
  useEffect(function () {
@@ -148,7 +149,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
148
149
 
149
150
  for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
150
151
  for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
151
- cellContainer.push([rowIndex, columnIndex]);
152
+ cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
152
153
  }
153
154
  }
154
155
 
@@ -168,18 +169,47 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
168
169
  setActiveCellCoordinates: setActiveCellCoordinates,
169
170
  rows: rows,
170
171
  activeCellCoordinates: activeCellCoordinates,
171
- defaultColumn: defaultColumn
172
+ defaultColumn: defaultColumn,
173
+ selectionAreas: selectionAreas
172
174
  }); // Make sure that if the cellSize prop changes, the active
173
- // cell also gets updated with the new size
175
+ // cell also gets updated with the new size and new top placement
176
+ // value. All of the cell selections will be updated as well
174
177
 
175
178
  useEffect(function () {
176
179
  var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
177
180
  var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
178
181
 
179
- if (activeCellButton) {
182
+ if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
180
183
  activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
184
+
185
+ if (activeCellCoordinates) {
186
+ var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
187
+
188
+ var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
189
+
190
+ var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
191
+
192
+ activeCellButton.style.top = px(newActiveCellTopPosition);
193
+ removeCellSelections({
194
+ spreadsheetRef: ref
195
+ });
196
+ selectionAreas.map(function (area) {
197
+ if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
198
+ return createCellSelectionArea({
199
+ ref: ref,
200
+ area: area,
201
+ blockClass: blockClass,
202
+ defaultColumn: defaultColumn,
203
+ selectionAreas: selectionAreas,
204
+ setSelectionAreas: setSelectionAreas,
205
+ setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
206
+ visibleColumns: visibleColumns
207
+ });
208
+ }
209
+ });
210
+ }
181
211
  }
182
- }, [defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight]); // onClick fn for each cell in the data spreadsheet body,
212
+ }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]); // onClick fn for each cell in the data spreadsheet body,
183
213
  // adds the active cell highlight
184
214
 
185
215
  var handleBodyCellClick = useCallback(function (cell, columnIndex) {
@@ -366,7 +396,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
366
396
  "data-column-index": "header",
367
397
  type: "button",
368
398
  onClick: handleRowHeaderClick(index),
369
- className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row')), _cx)),
399
+ className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns)), _cx)),
370
400
  style: {
371
401
  width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
372
402
  }
@@ -395,7 +425,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
395
425
  }, cell.render('Cell')));
396
426
  }));
397
427
  }
398
- }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
428
+ }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
399
429
  var spreadsheetBodyRef = useRef();
400
430
  return /*#__PURE__*/React.createElement("div", _extends({
401
431
  ref: spreadsheetBodyRef,
@@ -29,6 +29,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
29
29
  var activeCellCoordinates = _ref.activeCellCoordinates,
30
30
  cellSize = _ref.cellSize,
31
31
  columns = _ref.columns,
32
+ currentMatcher = _ref.currentMatcher,
32
33
  defaultColumn = _ref.defaultColumn,
33
34
  headerGroups = _ref.headerGroups,
34
35
  scrollBarSize = _ref.scrollBarSize,
@@ -71,6 +72,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
71
72
  var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
72
73
  return function (event) {
73
74
  var isHoldingCommandKey = event.metaKey || event.ctrlKey;
75
+ var isHoldingShiftKey = event.shiftKey;
74
76
  handleHeaderCellSelection({
75
77
  type: 'column',
76
78
  activeCellCoordinates: activeCellCoordinates,
@@ -82,7 +84,9 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
82
84
  spreadsheetRef: ref,
83
85
  index: index,
84
86
  setSelectionAreaData: setSelectionAreaData,
85
- isHoldingCommandKey: isHoldingCommandKey
87
+ isHoldingCommandKey: isHoldingCommandKey,
88
+ isHoldingShiftKey: isHoldingShiftKey,
89
+ currentMatcher: currentMatcher
86
90
  });
87
91
  };
88
92
  };
@@ -103,23 +107,30 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
103
107
  return function (event) {
104
108
  var _selectionAreaToClone;
105
109
 
110
+ if (event.shiftKey) {
111
+ // Remove columns, need to call handleHeaderCellSelection
112
+ return;
113
+ }
114
+
106
115
  setSelectedHeaderReorderActive(true);
116
+ var selectionAreaToClone = selectionAreas.filter(function (item) {
117
+ return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
118
+ });
119
+ var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
107
120
  var clickXPosition = event.clientX;
108
121
  var headerButtonCoords = event.target.getBoundingClientRect();
122
+ var headerIndex = event.target.getAttribute('data-column-index');
109
123
  var offsetXValue = clickXPosition - headerButtonCoords.left;
124
+ var lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone[0].point1.column, selectionAreaToClone[0].point2.column);
125
+ var selectionAreaCoords = selectionAreaElement.getBoundingClientRect();
126
+ var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords.left) : offsetXValue;
110
127
  var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
111
- var selectionAreaToClone = selectionAreas.filter(function (item) {
112
- var _item$header;
113
-
114
- return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
115
- });
116
- var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
117
128
  var selectionAreaClonedElement = selectionAreaElement.cloneNode();
118
129
  var reorderIndicatorLine = selectionAreaElement.cloneNode();
119
130
  reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
120
131
  reorderIndicatorLine.style.width = px(2);
121
132
  selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
122
- selectionAreaClonedElement.setAttribute('data-clone-offset-x', offsetXValue);
133
+ selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
123
134
  selectionAreaClonedElement.setAttribute('data-column-index-original', index);
124
135
  bodyContainer.appendChild(selectionAreaClonedElement);
125
136
  bodyContainer.appendChild(reorderIndicatorLine);
@@ -169,7 +180,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
169
180
  }, "\xA0")), headerGroup.headers.map(function (column, index) {
170
181
  var _cx2;
171
182
 
172
- var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column');
183
+ var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
173
184
  return /*#__PURE__*/React.createElement("div", _extends({
174
185
  key: "column_".concat(index),
175
186
  role: "columnheader",
@@ -206,13 +217,18 @@ DataSpreadsheetHeader.propTypes = {
206
217
  /**
207
218
  * Specifies the cell height
208
219
  */
209
- cellSize: PropTypes.oneOf(['compact', 'standard', 'medium', 'large']),
220
+ cellSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
210
221
 
211
222
  /**
212
223
  * All of the spreadsheet columns
213
224
  */
214
225
  columns: PropTypes.array,
215
226
 
227
+ /**
228
+ * uuid that corresponds to the current selection area
229
+ */
230
+ currentMatcher: PropTypes.string,
231
+
216
232
  /**
217
233
  * Default spreadsheet sizing values
218
234
  */
@@ -7,7 +7,6 @@
7
7
  import { useEffect } from 'react';
8
8
  import { px } from '@carbon/layout';
9
9
  import { pkg } from '../../../settings';
10
- import { getScrollbarWidth } from '../../../global/js/utils/getScrollbarWidth';
11
10
  import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
12
11
  // cloned selection area to follow the position of the cursor
13
12
 
@@ -26,21 +25,24 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
26
25
  }
27
26
 
28
27
  var spreadsheetCoords = ref.current.getBoundingClientRect();
28
+ var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
29
+ var scrollAmount = listContainer.scrollLeft;
29
30
  moveColumnIndicatorLine({
30
31
  clonedSelectionElement: clonedSelectionElement,
31
32
  ref: ref,
32
- spreadsheetCoords: spreadsheetCoords
33
+ spreadsheetCoords: spreadsheetCoords,
34
+ leftScrollAmount: scrollAmount
33
35
  });
34
- var scrollbarWidth = getScrollbarWidth();
35
36
  var spreadsheetWrapperElement = ref.current;
36
37
  spreadsheetWrapperElement.getBoundingClientRect();
37
38
  var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
38
39
  var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
39
- var totalSpreadsheetWidth = ref.current.offsetWidth;
40
+ var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
40
41
  var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
41
- var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse
42
+ var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse, and
43
+ // add the amount horizontally scrolled
42
44
 
43
- clonedSelectionElement.style.left = px(totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement : totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth);
45
+ clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
44
46
  };
45
47
 
46
48
  if (headerCellHoldActive) {
@@ -30,7 +30,8 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
30
30
  setActiveCellCoordinates = _ref.setActiveCellCoordinates,
31
31
  activeCellCoordinates = _ref.activeCellCoordinates,
32
32
  rows = _ref.rows,
33
- defaultColumn = _ref.defaultColumn;
33
+ defaultColumn = _ref.defaultColumn,
34
+ selectionAreas = _ref.selectionAreas;
34
35
  useEffect(function () {
35
36
  var handleMouseUp = function handleMouseUp(event) {
36
37
  // Remove the cloned selection area on mouse up
@@ -45,8 +46,12 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
45
46
 
46
47
  if (selectionAreaCloneElement) {
47
48
  var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
48
- var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
49
- var originalColumnIndex = selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original');
49
+ var newColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index'));
50
+ var originalColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original'));
51
+ var selectionAreaToClone = selectionAreas.filter(function (item) {
52
+ return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
53
+ });
54
+ var selectionAreaIndexArray = selectionAreaToClone[0].header.selectedIndexList;
50
55
  var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
51
56
 
52
57
  if (!columnToMoveToElement) {
@@ -55,22 +60,11 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
55
60
 
56
61
  var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
57
62
  var spreadsheetPosition = ref.current.getBoundingClientRect();
58
- var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
59
- var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left;
60
- var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
61
- var columnsWidthUpToNewIndex = 0;
63
+ var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
64
+ var leftScrollAmount = listContainer.scrollLeft;
62
65
  var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
63
- visibleColumns.forEach(function (item, index) {
64
- if (newIndexLessThanStarting && index === visibleColumns.length - 1) {
65
- return;
66
- }
67
-
68
- if (index <= newColumnIndex) {
69
- columnsWidthUpToNewIndex += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
70
- }
71
- });
72
- var updatedSelectionAreaPlacement = newIndexLessThanStarting ? relativeNewPosition : columnsWidthUpToNewIndex - cloneColumnWidth + (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
73
- selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
66
+ var newIndexGreater = newColumnIndex > originalColumnIndex;
67
+ var differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
74
68
  setSelectionAreas(function (prev) {
75
69
  var selectionAreaClone = deepCloneObject(prev);
76
70
 
@@ -86,28 +80,65 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
86
80
  return prev;
87
81
  }
88
82
 
89
- selectionAreaClone[indexOfItemToUpdate].header.index = Number(newColumnIndex);
90
- selectionAreaClone[indexOfItemToUpdate].point1.column = Number(newColumnIndex);
91
- selectionAreaClone[indexOfItemToUpdate].point2.column = Number(newColumnIndex);
83
+ if (!selectionAreaIndexArray.includes(newColumnIndex)) {
84
+ // We need to not add just the newColumnIndex, but an array of indexes
85
+ // if there are multiple columns
86
+ var newIndexArray = newIndexGreater ? selectionAreaIndexArray.map(function (num) {
87
+ return num + differenceBetweenOldNewIndex;
88
+ }) : selectionAreaIndexArray.map(function (num) {
89
+ return num - differenceBetweenOldNewIndex;
90
+ });
91
+ selectionAreaClone[indexOfItemToUpdate].header.selectedIndexList = newIndexArray;
92
+ selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min.apply(Math, _toConsumableArray(newIndexArray));
93
+ selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max.apply(Math, _toConsumableArray(newIndexArray));
94
+ }
95
+
92
96
  return selectionAreaClone;
93
- });
94
- var columnIdArray = visibleColumns.map(function (column) {
95
- return column.id;
96
- });
97
+ }); // Only reorder columns if the new index is _not_ part of the
98
+ // selectionAreaIndexArray, meaning the new placement is outside
99
+ // of the current selection area. Similarly, the active cell position
100
+ // should only be changed under the same condition.
101
+
102
+ if (!selectionAreaIndexArray.includes(newColumnIndex)) {
103
+ var deleteCount = selectionAreaIndexArray.length;
104
+ var startIndex = Math.min.apply(Math, _toConsumableArray(selectionAreaIndexArray));
105
+ var columnIdArray = visibleColumns.map(function (column) {
106
+ return column.id;
107
+ });
97
108
 
98
- var columnIdArrayClone = _toConsumableArray(columnIdArray); // Remove one element at the original index
109
+ var columnIdArrayClone = _toConsumableArray(columnIdArray);
99
110
 
111
+ var getNewColumnOrder = function getNewColumnOrder() {
112
+ var newColumnList = [];
113
+ selectionAreaIndexArray.map(function (index) {
114
+ return newColumnList.push(columnIdArray[index]);
115
+ });
116
+ return newColumnList;
117
+ }; // Remove one element at the original index
100
118
 
101
- columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
102
119
 
103
- columnIdArrayClone.splice(newColumnIndex, 0, columnIdArray[originalColumnIndex]);
104
- setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
120
+ columnIdArrayClone.splice(startIndex, deleteCount);
121
+ var originalPointIndex = selectionAreaIndexArray.findIndex(function (item) {
122
+ return item === originalColumnIndex;
123
+ });
124
+ var updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex; // Add one element at the new index
105
125
 
106
- var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
107
- column: Number(newColumnIndex)
108
- });
126
+ columnIdArrayClone.splice.apply(columnIdArrayClone, [updatedNewIndexWithNewOrder, 0].concat(_toConsumableArray(getNewColumnOrder())));
127
+ setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
128
+
129
+ var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
130
+ column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
131
+ });
132
+
133
+ setActiveCellCoordinates(newCellCoords);
134
+ var firstSelectedHeader = Array.from(ref.current.querySelectorAll(".".concat(blockClass, "__th--selected-header")))[0];
135
+ var firstSelectedHeaderCoords = firstSelectedHeader.getBoundingClientRect();
136
+ var newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount; // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
137
+
138
+ var updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
139
+ selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
140
+ } // Remove the cloned column and indicator elements
109
141
 
110
- setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
111
142
 
112
143
  var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
113
144
  indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
@@ -149,5 +180,5 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
149
180
  return function () {
150
181
  document.removeEventListener('mouseup', handleMouseUp);
151
182
  };
152
- }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
183
+ }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
153
184
  };
@@ -5,12 +5,26 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
8
- export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType) {
8
+ export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
9
9
  var areasCloned = deepCloneObject(selectionAreas);
10
10
  var isSelectedHeader = areasCloned.some(function (area) {
11
- var _area$header, _area$header2;
11
+ var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
12
12
 
13
- return (area === null || area === void 0 ? void 0 : (_area$header = area.header) === null || _area$header === void 0 ? void 0 : _area$header.type) === headerType && headerIndex === (area === null || area === void 0 ? void 0 : (_area$header2 = area.header) === null || _area$header2 === void 0 ? void 0 : _area$header2.index);
13
+ var oppositeType = headerType === 'column' ? 'row' : 'column';
14
+ var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
15
+ var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
16
+ var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
17
+ var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
18
+ var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
19
+ // Iterate over all columns included in the selection area
20
+
21
+ for (var i = minSelection; i <= maxSelection; i++) {
22
+ if (headerIndex === i && isTrueSelectedState) {
23
+ return true;
24
+ }
25
+ }
26
+
27
+ return false;
14
28
  });
15
29
  return isSelectedHeader;
16
30
  };
@@ -4,7 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import { baseFontSize, sizeXSmall as compact, sizeSmall as standard, sizeMedium as medium, sizeLarge as large } from '@carbon/layout';
7
+ import { baseFontSize, sizeXSmall as xs, sizeSmall as sm, sizeMedium as md, sizeLarge as lg } from '@carbon/layout';
8
8
 
9
9
  var getSizeInPixels = function getSizeInPixels(carbonSize) {
10
10
  return Number(carbonSize.replace('rem', '') * baseFontSize);
@@ -12,19 +12,19 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
12
12
 
13
13
  export var getCellSize = function getCellSize(cellSize) {
14
14
  switch (cellSize) {
15
- case 'compact':
16
- return getSizeInPixels(compact);
15
+ case 'xs':
16
+ return getSizeInPixels(xs);
17
17
 
18
- case 'standard':
19
- return getSizeInPixels(standard);
18
+ case 'sm':
19
+ return getSizeInPixels(sm);
20
20
 
21
- case 'medium':
22
- return getSizeInPixels(medium);
21
+ case 'md':
22
+ return getSizeInPixels(md);
23
23
 
24
- case 'large':
25
- return getSizeInPixels(large);
24
+ case 'lg':
25
+ return getSizeInPixels(lg);
26
26
 
27
27
  default:
28
- return getSizeInPixels(standard);
28
+ return getSizeInPixels(sm);
29
29
  }
30
30
  };
@@ -10,19 +10,37 @@ import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
10
10
  import uuidv4 from '../../../global/js/utils/uuidv4';
11
11
  import { removeCellSelections } from './removeCellSelections';
12
12
  import { checkActiveHeaderCell } from './checkActiveHeaderCell';
13
- export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
14
- var type = _ref.type,
15
- activeCellCoordinates = _ref.activeCellCoordinates,
16
- rows = _ref.rows,
17
- columns = _ref.columns,
18
- setActiveCellCoordinates = _ref.setActiveCellCoordinates,
19
- setCurrentMatcher = _ref.setCurrentMatcher,
20
- setSelectionAreas = _ref.setSelectionAreas,
21
- spreadsheetRef = _ref.spreadsheetRef,
22
- index = _ref.index,
23
- isKeyboard = _ref.isKeyboard,
24
- setSelectionAreaData = _ref.setSelectionAreaData,
25
- isHoldingCommandKey = _ref.isHoldingCommandKey;
13
+
14
+ var getSelectedItemIndexList = function getSelectedItemIndexList(_ref) {
15
+ var indexList = _ref.indexList,
16
+ newIndex = _ref.newIndex,
17
+ activeCellIndex = _ref.activeCellIndex;
18
+ var lowestIndex = newIndex > activeCellIndex ? activeCellIndex : Math.min.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
19
+ var highestIndex = newIndex < activeCellIndex ? activeCellIndex : Math.max.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
20
+ var newIndexList = [];
21
+
22
+ for (var i = lowestIndex; i <= highestIndex; i++) {
23
+ newIndexList.push(i);
24
+ }
25
+
26
+ return [].concat(newIndexList);
27
+ };
28
+
29
+ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
30
+ var type = _ref2.type,
31
+ activeCellCoordinates = _ref2.activeCellCoordinates,
32
+ rows = _ref2.rows,
33
+ columns = _ref2.columns,
34
+ currentMatcher = _ref2.currentMatcher,
35
+ setActiveCellCoordinates = _ref2.setActiveCellCoordinates,
36
+ setCurrentMatcher = _ref2.setCurrentMatcher,
37
+ setSelectionAreas = _ref2.setSelectionAreas,
38
+ spreadsheetRef = _ref2.spreadsheetRef,
39
+ index = _ref2.index,
40
+ isKeyboard = _ref2.isKeyboard,
41
+ setSelectionAreaData = _ref2.setSelectionAreaData,
42
+ isHoldingCommandKey = _ref2.isHoldingCommandKey,
43
+ isHoldingShiftKey = _ref2.isHoldingShiftKey;
26
44
 
27
45
  if (!isHoldingCommandKey) {
28
46
  setSelectionAreaData([]);
@@ -43,11 +61,15 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
43
61
  column: type === 'column' ? columnValue : columns.length - 1
44
62
  };
45
63
  var tempMatcher = uuidv4();
46
- setActiveCellCoordinates({
47
- row: type === 'column' ? 0 : rowValue,
48
- column: type === 'column' ? columnValue : 0
49
- });
50
- setCurrentMatcher(tempMatcher);
64
+
65
+ if (!isHoldingShiftKey) {
66
+ setActiveCellCoordinates({
67
+ row: type === 'column' ? 0 : rowValue,
68
+ column: type === 'column' ? columnValue : 0
69
+ });
70
+ setCurrentMatcher(tempMatcher);
71
+ }
72
+
51
73
  var newSelectionArea = {
52
74
  point1: point1,
53
75
  point2: point2,
@@ -55,7 +77,7 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
55
77
  matcher: tempMatcher,
56
78
  header: {
57
79
  type: type,
58
- index: type === 'column' ? columnValue : rowValue
80
+ selectedIndexList: [type === 'column' ? columnValue : rowValue]
59
81
  }
60
82
  };
61
83
  setSelectionAreas(function (prev) {
@@ -81,6 +103,78 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
81
103
  return [].concat(_toConsumableArray(prev), [newSelectionArea]);
82
104
  }
83
105
 
106
+ if (isHoldingShiftKey) {
107
+ var _selectionAreasClone$, _selectionAreasClone$2;
108
+
109
+ var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
110
+ var _item$header3;
111
+
112
+ return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
113
+ }); // Shift/click behavior should not occur unless there are activeCellCoordinates set
114
+
115
+
116
+ var currentSelectionArea = _selectionsFromHeaderCell.filter(function (item) {
117
+ return item.matcher === currentMatcher;
118
+ })[0];
119
+
120
+ var originalAreaIndex = Math.max(currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point1[type], currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point2[type], activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
121
+ var newIndexValue = type === 'column' ? columnValue : rowValue;
122
+ var newPoint = {
123
+ row: originalAreaIndex < newIndexValue ? rows.length - 1 : 0,
124
+ column: columnValue
125
+ };
126
+ var selectionAreasClone = deepCloneObject(prev);
127
+ var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
128
+ return item.matcher === currentMatcher;
129
+ });
130
+ var newIndexList = getSelectedItemIndexList({
131
+ indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
132
+ newIndex: newIndexValue,
133
+ activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
134
+ });
135
+
136
+ var setPoint1 = function setPoint1(value) {
137
+ return value < newIndexValue ? {
138
+ row: type === 'column' ? 0 : Math.min.apply(Math, _toConsumableArray(newIndexList)),
139
+ column: type === 'column' ? Math.min.apply(Math, _toConsumableArray(newIndexList)) : 0
140
+ } : newPoint;
141
+ };
142
+
143
+ var setPoint2 = function setPoint2(value) {
144
+ return value < newIndexValue ? newPoint : {
145
+ row: type === 'column' ? rows.length - 1 : Math.max.apply(Math, _toConsumableArray(newIndexList)),
146
+ column: type === 'column' ? Math.max.apply(Math, _toConsumableArray(newIndexList)) : columns.length - 1
147
+ };
148
+ }; // If there is no active cell set and shift is clicked on a header cell
149
+
150
+
151
+ if (!activeCellCoordinates || typeof activeCellCoordinates === 'undefined') {
152
+ // Need to set positioning of active cell because it doesn't exist yet
153
+ setCurrentMatcher(tempMatcher);
154
+ var firstSelectionArea = {
155
+ point1: setPoint1(type === 'column' ? columnValue : rowValue),
156
+ point2: setPoint2(type === 'column' ? columnValue : rowValue),
157
+ areaCreated: false,
158
+ matcher: tempMatcher,
159
+ header: {
160
+ type: type,
161
+ selectedIndexList: [type === 'column' ? columnValue : rowValue]
162
+ }
163
+ };
164
+ setActiveCellCoordinates({
165
+ row: type === 'column' ? 0 : rowValue,
166
+ column: type === 'column' ? columnValue : 0
167
+ });
168
+ return [firstSelectionArea];
169
+ }
170
+
171
+ selectionAreasClone[indexOfCurrentArea].point1 = setPoint1(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
172
+ selectionAreasClone[indexOfCurrentArea].point2 = setPoint2(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
173
+ selectionAreasClone[indexOfCurrentArea].areaCreated = false;
174
+ selectionAreasClone[indexOfCurrentArea].header.selectedIndexList = newIndexList;
175
+ return selectionAreasClone;
176
+ }
177
+
84
178
  return [newSelectionArea];
85
179
  });
86
180
  };
@@ -11,7 +11,8 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
11
11
  blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
12
12
  clonedSelectionElement = _ref.clonedSelectionElement,
13
13
  ref = _ref.ref,
14
- spreadsheetCoords = _ref.spreadsheetCoords;
14
+ spreadsheetCoords = _ref.spreadsheetCoords,
15
+ leftScrollAmount = _ref.leftScrollAmount;
15
16
  var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
16
17
  var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
17
18
  var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
@@ -21,11 +22,11 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
21
22
  var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
22
23
 
23
24
  if (Number(newColumnIndex) > Number(originalColumnIndex)) {
24
- indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
25
+ indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
25
26
  }
26
27
 
27
28
  if (Number(newColumnIndex) < Number(originalColumnIndex)) {
28
- indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left);
29
+ indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
29
30
  }
30
31
 
31
32
  if (Number(newColumnIndex) === Number(originalColumnIndex)) {