@carbon/ibm-products 2.43.2-canary.15 → 2.43.2-canary.3

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 (61) hide show
  1. package/css/index-full-carbon.css +2 -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-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +2 -3
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +1 -1
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +2 -3
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +1 -1
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/DataSpreadsheet/DataSpreadsheet.js +16 -29
  16. package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
  17. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
  18. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
  19. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
  20. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
  21. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
  22. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
  23. package/es/components/DataSpreadsheet/types/index.d.ts +1 -1
  24. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
  25. package/es/components/Datagrid/types/index.d.ts +4 -18
  26. package/es/components/Datagrid/useActionsColumn.d.ts +1 -8
  27. package/es/components/Datagrid/useActionsColumn.js +6 -7
  28. package/es/components/Datagrid/useColumnRightAlign.d.ts +1 -8
  29. package/es/components/Datagrid/useColumnRightAlign.js +3 -4
  30. package/es/components/Datagrid/useNestedRows.js +9 -27
  31. package/es/components/Decorator/Decorator.js +1 -2
  32. package/es/components/DecoratorBase/DecoratorBase.js +5 -3
  33. package/es/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
  34. package/es/components/DecoratorLink/DecoratorLink.js +1 -2
  35. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
  36. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +16 -29
  37. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
  38. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
  39. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
  40. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
  41. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
  42. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
  43. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
  44. package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
  45. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
  46. package/lib/components/Datagrid/types/index.d.ts +4 -18
  47. package/lib/components/Datagrid/useActionsColumn.d.ts +1 -8
  48. package/lib/components/Datagrid/useActionsColumn.js +6 -7
  49. package/lib/components/Datagrid/useColumnRightAlign.d.ts +1 -8
  50. package/lib/components/Datagrid/useColumnRightAlign.js +3 -4
  51. package/lib/components/Datagrid/useNestedRows.js +9 -27
  52. package/lib/components/Decorator/Decorator.js +1 -2
  53. package/lib/components/DecoratorBase/DecoratorBase.js +5 -3
  54. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
  55. package/lib/components/DecoratorLink/DecoratorLink.js +1 -2
  56. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
  57. package/package.json +3 -3
  58. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +0 -1
  59. package/scss/components/StatusIcon/_status-icon.scss +4 -4
  60. package/scss/components/StringFormatter/_string-formatter.scss +2 -2
  61. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -6
@@ -112,19 +112,15 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
112
112
  _useState18 = _slicedToArray(_useState17, 2),
113
113
  headerCellHoldActive = _useState18[0],
114
114
  setHeaderCellHoldActive = _useState18[1];
115
+ var isBlurSpreadsheet = useRef(false);
115
116
  var _useState19 = useState(false),
116
117
  _useState20 = _slicedToArray(_useState19, 2),
117
- selectedHeaderReorderActive = _useState20[0],
118
- setSelectedHeaderReorderActive = _useState20[1];
119
- var isBlurSpreadsheet = useRef(false);
118
+ isActiveHeaderCellChanged = _useState20[0],
119
+ setIsActiveHeaderCellChanged = _useState20[1];
120
120
  var _useState21 = useState(false),
121
121
  _useState22 = _slicedToArray(_useState21, 2),
122
- isActiveHeaderCellChanged = _useState22[0],
123
- setIsActiveHeaderCellChanged = _useState22[1];
124
- var _useState23 = useState(false),
125
- _useState24 = _slicedToArray(_useState23, 2),
126
- activeCellInsideSelectionArea = _useState24[0],
127
- setActiveCellInsideSelectionArea = _useState24[1];
122
+ activeCellInsideSelectionArea = _useState22[0],
123
+ setActiveCellInsideSelectionArea = _useState22[1];
128
124
  var previousState = usePreviousValue({
129
125
  activeCellCoordinates: activeCellCoordinates,
130
126
  isEditing: isEditing,
@@ -132,10 +128,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
132
128
  }) || {};
133
129
  var cellSizeValue = getCellSize(cellSize);
134
130
  var cellEditorRef = useRef();
135
- var _useState25 = useState(),
136
- _useState26 = _slicedToArray(_useState25, 2),
137
- activeCellContent = _useState26[0],
138
- setActiveCellContent = _useState26[1];
131
+ var _useState23 = useState(),
132
+ _useState24 = _slicedToArray(_useState23, 2),
133
+ activeCellContent = _useState24[0],
134
+ setActiveCellContent = _useState24[1];
139
135
  var activeCellRef = useRef();
140
136
  var cellEditorRulerRef = useRef();
141
137
  var defaultColumn = useMemo(function () {
@@ -211,12 +207,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
211
207
  }
212
208
  if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
213
209
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
210
+ var _activeCellFullData$r;
214
211
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
215
- if (activeCellFullData) {
216
- setActiveCellContent(activeCellFullData.render('Cell'));
217
- } else {
218
- setActiveCellContent(null);
219
- }
212
+ setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
220
213
  }
221
214
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
222
215
  setActiveCellContent(null);
@@ -431,8 +424,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
431
424
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
432
425
  var activeCellValue;
433
426
  if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
434
- var _activeCellFullData$r;
435
- activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
427
+ var _activeCellFullData$r2;
428
+ activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
436
429
  }
437
430
  setCellEditorValue(activeCellValue || '');
438
431
  if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -622,8 +615,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
622
615
  columns: columns,
623
616
  currentMatcher: currentMatcher,
624
617
  defaultColumn: defaultColumn,
625
- selectedHeaderReorderActive: selectedHeaderReorderActive,
626
- setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
627
618
  headerGroups: headerGroups,
628
619
  rows: rows,
629
620
  scrollBarSize: scrollBarSize,
@@ -647,8 +638,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
647
638
  currentMatcher: currentMatcher,
648
639
  setCurrentMatcher: setCurrentMatcher,
649
640
  setContainerHasFocus: setContainerHasFocus,
650
- selectedHeaderReorderActive: selectedHeaderReorderActive,
651
- setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
652
641
  selectionAreas: selectionAreas,
653
642
  setSelectionAreas: setSelectionAreas,
654
643
  headerGroups: headerGroups,
@@ -699,11 +688,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
699
688
  updateData: updateData
700
689
  }),
701
690
  onChange: function onChange(event) {
702
- if (previousState.isEditing) {
703
- setCellEditorValue(event.target.value);
704
- if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
705
- cellEditorRulerRef.current.textContent = event.target.value;
706
- }
691
+ setCellEditorValue(event.target.value);
692
+ if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
693
+ cellEditorRulerRef.current.textContent = event.target.value;
707
694
  }
708
695
  },
709
696
  ref: cellEditorRef,
@@ -79,15 +79,7 @@ interface DataSpreadsheetBodyProps {
79
79
  /**
80
80
  * Array of selection area data
81
81
  */
82
- selectionAreaData?: any[];
83
- /**
84
- * Header reordering is active
85
- */
86
- selectedHeaderReorderActive?: boolean;
87
- /**
88
- * Set header reordering active or not
89
- */
90
- setSelectedHeaderReorderActive?: Dispatch<SetStateAction<boolean>>;
82
+ selectionAreaData?: object[];
91
83
  /**
92
84
  * Array of selection areas
93
85
  */
@@ -40,8 +40,6 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
40
40
  selectionAreaData = _ref.selectionAreaData,
41
41
  setSelectionAreaData = _ref.setSelectionAreaData,
42
42
  setActiveCellCoordinates = _ref.setActiveCellCoordinates,
43
- selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
44
- setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
45
43
  selectionAreas = _ref.selectionAreas,
46
44
  setContainerHasFocus = _ref.setContainerHasFocus,
47
45
  setSelectionAreas = _ref.setSelectionAreas,
@@ -77,12 +75,8 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
77
75
  // back to the consumer
78
76
  useEffect(function () {
79
77
  if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
80
- var _previousState$select, _selectionAreaData$, _previousState$select2;
81
- var selectionChanged = false;
82
- if ((previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length) || (selectionAreaData === null || selectionAreaData === void 0 || (_selectionAreaData$ = selectionAreaData[0]) === null || _selectionAreaData$ === void 0 ? void 0 : _selectionAreaData$.cells.length) !== (previousState === null || previousState === void 0 || (_previousState$select2 = previousState.selectionAreaData) === null || _previousState$select2 === void 0 || (_previousState$select2 = _previousState$select2[0]) === null || _previousState$select2 === void 0 ? void 0 : _previousState$select2.cells.length)) {
83
- selectionChanged = true;
84
- }
85
- if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || selectionChanged) {
78
+ var _previousState$select;
79
+ if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
86
80
  onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
87
81
  }
88
82
  }
@@ -157,8 +151,6 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
157
151
  setClickAndHoldActive: setClickAndHoldActive,
158
152
  setSelectionAreas: setSelectionAreas,
159
153
  setValidStartingPoint: setValidStartingPoint,
160
- selectedHeaderReorderActive: selectedHeaderReorderActive,
161
- setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
162
154
  validStartingPoint: validStartingPoint,
163
155
  ref: ref,
164
156
  setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -465,10 +457,6 @@ DataSpreadsheetBody.propTypes = {
465
457
  * The scrollbar width
466
458
  */
467
459
  scrollBarSize: PropTypes.number,
468
- /**
469
- * Header reordering is active
470
- */
471
- selectedHeaderReorderActive: PropTypes.bool,
472
460
  /**
473
461
  * Array of selection area data
474
462
  */
@@ -505,10 +493,6 @@ DataSpreadsheetBody.propTypes = {
505
493
  * Setter fn for header cell hold active value
506
494
  */
507
495
  setHeaderCellHoldActive: PropTypes.func,
508
- /**
509
- * Set header reordering active or not
510
- */
511
- setSelectedHeaderReorderActive: PropTypes.func,
512
496
  /**
513
497
  * Setter fn for selectionAreaData state value
514
498
  */
@@ -56,14 +56,6 @@ interface DataSpreadsheetHeaderProps {
56
56
  * Setter fn for activeCellCoordinates value
57
57
  */
58
58
  setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
59
- /**
60
- * Header reordering is active
61
- */
62
- selectedHeaderReorderActive?: boolean;
63
- /**
64
- * Set header reordering active or not
65
- */
66
- setSelectedHeaderReorderActive?: Dispatch<SetStateAction<boolean>>;
67
59
  /**
68
60
  * Setter fn for currentMatcher value
69
61
  */
@@ -31,8 +31,6 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
31
31
  headerGroups = _ref.headerGroups,
32
32
  scrollBarSize = _ref.scrollBarSize,
33
33
  selectionAreas = _ref.selectionAreas,
34
- selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
35
- setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
36
34
  setActiveCellCoordinates = _ref.setActiveCellCoordinates,
37
35
  setCurrentMatcher = _ref.setCurrentMatcher,
38
36
  setSelectionAreas = _ref.setSelectionAreas,
@@ -48,6 +46,10 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
48
46
  _useState2 = _slicedToArray(_useState, 2),
49
47
  scrollBarSizeValue = _useState2[0],
50
48
  setScrollBarSizeValue = _useState2[1];
49
+ var _useState3 = useState(false),
50
+ _useState4 = _slicedToArray(_useState3, 2),
51
+ selectedHeaderReorderActive = _useState4[0],
52
+ setSelectedHeaderReorderActive = _useState4[1];
51
53
  var previousState = usePreviousValue({
52
54
  cellSize: cellSize
53
55
  }) || {};
@@ -105,16 +107,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
105
107
  // Remove columns, need to call handleHeaderCellSelection
106
108
  return;
107
109
  }
110
+ setSelectedHeaderReorderActive(true);
108
111
  var selectionAreaToClone = selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.filter(function (item) {
109
112
  return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
110
113
  });
111
114
  var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat(selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
112
- if (selectionAreaElement) {
113
- selectionAreaElement.classList.add("".concat(blockClass, "__selection-area--element"));
114
- }
115
- if (typeof setSelectedHeaderReorderActive === 'function') {
116
- setSelectedHeaderReorderActive(true);
117
- }
118
115
  var clickXPosition = event.clientX;
119
116
  var headerButtonCoords = event.target.getBoundingClientRect();
120
117
  var headerIndex = event.target.getAttribute('data-column-index');
@@ -192,7 +189,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
192
189
  "data-column-index": index,
193
190
  tabIndex: -1,
194
191
  onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
195
- onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
192
+ onMouseUp: selectedHeader ? function () {
196
193
  return setSelectedHeaderReorderActive(false);
197
194
  } : undefined,
198
195
  onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -257,10 +254,6 @@ DataSpreadsheetHeader.propTypes = {
257
254
  * The aria label applied to the Select all button
258
255
  */
259
256
  selectAllAriaLabel: PropTypes.string.isRequired,
260
- /**
261
- * Header reordering is active
262
- */
263
- selectedHeaderReorderActive: PropTypes.bool,
264
257
  /**
265
258
  * All of the cell selection area items
266
259
  */
@@ -278,10 +271,6 @@ DataSpreadsheetHeader.propTypes = {
278
271
  * Setter fn for header cell hold active value
279
272
  */
280
273
  setHeaderCellHoldActive: PropTypes.func,
281
- /**
282
- * Set header reordering active or not
283
- */
284
- setSelectedHeaderReorderActive: PropTypes.func,
285
274
  /**
286
275
  * Setter fn for selectionAreaData state value
287
276
  */
@@ -40,12 +40,9 @@ var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
40
40
  var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
41
41
  var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
42
42
  var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
43
- var leftPosition = totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth;
44
43
  // Moves the position of the cloned selection area to follow mouse, and
45
44
  // add the amount horizontally scrolled
46
- if (leftPosition < spreadsheetCoords.right - 40) {
47
- clonedSelectionElement.style.left = px(leftPosition);
48
- }
45
+ clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
49
46
  };
50
47
  if (headerCellHoldActive) {
51
48
  ref.current.addEventListener('mousemove', handleMouseMove);
@@ -1,8 +1,6 @@
1
- export function useSpreadsheetMouseUp({ currentMatcher, setSelectionAreas, selectedHeaderReorderActive, setSelectedHeaderReorderActive, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, blockClass, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas, }: {
1
+ export function useSpreadsheetMouseUp({ currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, blockClass, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas, }: {
2
2
  currentMatcher: any;
3
3
  setSelectionAreas: any;
4
- selectedHeaderReorderActive: any;
5
- setSelectedHeaderReorderActive: any;
6
4
  setClickAndHoldActive: any;
7
5
  setValidStartingPoint: any;
8
6
  validStartingPoint: any;
@@ -14,8 +14,6 @@ import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
14
14
  var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
15
15
  var currentMatcher = _ref.currentMatcher,
16
16
  setSelectionAreas = _ref.setSelectionAreas,
17
- selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
18
- setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
19
17
  setClickAndHoldActive = _ref.setClickAndHoldActive,
20
18
  setValidStartingPoint = _ref.setValidStartingPoint,
21
19
  validStartingPoint = _ref.validStartingPoint,
@@ -32,22 +30,15 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
32
30
  selectionAreas = _ref.selectionAreas;
33
31
  useEffect(function () {
34
32
  var handleMouseUp = function handleMouseUp(event) {
35
- var _selectionAreas$;
36
- var isHoldingColumn = false;
37
- if (selectionAreas !== null && selectionAreas !== void 0 && (_selectionAreas$ = selectionAreas[0]) !== null && _selectionAreas$ !== void 0 && _selectionAreas$.header && selectionAreas[0].header.type === 'column') {
38
- isHoldingColumn = true;
39
- }
40
33
  // Remove the cloned selection area on mouse up
41
- if (!validStartingPoint && isHoldingColumn) {
34
+ if (!validStartingPoint) {
42
35
  setHeaderCellHoldActive(false);
43
- var selectionAreaElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element"));
44
36
  var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
45
37
  if (!selectionAreaCloneElement) {
46
38
  return;
47
39
  }
48
40
  // Mouse up while a cloned selection area exists/a column is being reordered
49
41
  if (selectionAreaCloneElement) {
50
- var _selectionAreaElement;
51
42
  var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
52
43
  var newColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index'));
53
44
  var originalColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original'));
@@ -90,7 +81,6 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
90
81
  selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min.apply(Math, _toConsumableArray(newIndexArray));
91
82
  selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max.apply(Math, _toConsumableArray(newIndexArray));
92
83
  }
93
- selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
94
84
  return selectionAreaClone;
95
85
  });
96
86
  // Only reorder columns if the new index is _not_ part of the
@@ -135,13 +125,11 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
135
125
  var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
136
126
  indicatorLineElement === null || indicatorLineElement === void 0 || indicatorLineElement.remove();
137
127
  selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 || selectionAreaCloneElement.remove();
138
- selectionAreaElement === null || selectionAreaElement === void 0 || (_selectionAreaElement = selectionAreaElement.classList) === null || _selectionAreaElement === void 0 || _selectionAreaElement.remove("".concat(blockClass, "__selection-area--element"));
139
- setSelectedHeaderReorderActive(false);
140
128
  }
141
129
  }
142
130
  // Mouse up was on a spreadsheet body cell which is a valid
143
131
  // start/end point for creating a selection area
144
- if (validStartingPoint || event.type === 'mouseup') {
132
+ if (validStartingPoint) {
145
133
  setClickAndHoldActive(false);
146
134
  setValidStartingPoint(false);
147
135
  var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
@@ -170,7 +158,7 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
170
158
  return function () {
171
159
  document.removeEventListener('mouseup', handleMouseUp);
172
160
  };
173
- }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, selectedHeaderReorderActive, setSelectedHeaderReorderActive, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
161
+ }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
174
162
  };
175
163
 
176
164
  export { useSpreadsheetMouseUp };
@@ -13,7 +13,7 @@ export interface PrevState {
13
13
  cellEditorValue?: string;
14
14
  activeCellCoordinates?: ActiveCellCoordinates;
15
15
  isEditing?: boolean;
16
- selectionAreaData?: any[];
16
+ selectionAreaData?: object[];
17
17
  clickAndHoldActive?: boolean;
18
18
  rowHeight?: number;
19
19
  cellSize?: Size;
@@ -22,43 +22,11 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
22
22
  var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
23
23
  var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
24
24
  var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
25
- var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
26
- var scrollSpeed = 10; // Scrolling speed
27
- var leftEdgeThreshold = 120; // Distance from the left edge to start scrolling
28
- var rightEdgeThreshold = 100; // Distance from the right edge to start scrolling
29
-
30
- var _event = event,
31
- clientX = _event.clientX;
32
- var _listContainer$getBou = listContainer.getBoundingClientRect(),
33
- left = _listContainer$getBou.left,
34
- right = _listContainer$getBou.right;
35
-
36
- // Is near left side of viewport
37
- if (clientX < leftEdgeThreshold) {
38
- window.scrollBy(-scrollSpeed, 0);
39
- }
40
-
41
- // Is near right side of viewport
42
- if (clientX > window.innerWidth - rightEdgeThreshold) {
43
- window.scrollBy(scrollSpeed, 0);
44
- }
45
-
46
- // Is near left edge of table
47
- if (clientX > left && clientX < left + leftEdgeThreshold) {
48
- listContainer.scrollBy(-scrollSpeed, 0);
49
- }
50
-
51
- // Is near right edge of table
52
- if (clientX < right && clientX > right - rightEdgeThreshold) {
53
- listContainer.scrollBy(scrollSpeed, 0);
54
- }
55
25
  if (Number(newColumnIndex) > Number(originalColumnIndex)) {
56
- var leftPosition = closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount;
57
- indicatorLineElement.style.left = px(leftPosition);
26
+ indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
58
27
  }
59
28
  if (Number(newColumnIndex) < Number(originalColumnIndex)) {
60
- var _leftPosition = closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount;
61
- indicatorLineElement.style.left = px(_leftPosition);
29
+ indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
62
30
  }
63
31
  if (Number(newColumnIndex) === Number(originalColumnIndex)) {
64
32
  indicatorLineElement.style.left = selectionAreaOrigin.style.left;
@@ -5,10 +5,10 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
5
5
  import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
- import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
9
- import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
8
+ import { CSSProperties, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
9
+ import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseTableHooks } from 'react-table';
10
10
  import { CarbonIconType } from '@carbon/react/icons';
11
- import { IconButton, type ButtonProps } from '@carbon/react';
11
+ import { type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
13
13
  export type Size = 'xs' | 'sm' | 'md' | 'lg';
14
14
  export interface ResizerProps {
@@ -85,10 +85,9 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
85
85
  }
86
86
  export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
87
87
  }
88
- export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
88
+ export interface DatagridColumn<T extends object = any> extends ColumnInstance<T> {
89
89
  sticky?: 'left' | 'right';
90
90
  className?: string;
91
- rightAlignedColumn?: boolean;
92
91
  disableSortBy?: boolean;
93
92
  centerAlignedColumn?: boolean;
94
93
  }
@@ -101,7 +100,6 @@ export interface DatagridRow<T extends object = any> extends Omit<Row<T>, 'cells
101
100
  RowExpansionRenderer?: (state?: DataGridState) => void;
102
101
  cells: Array<DataGridCell>;
103
102
  isSkeleton?: boolean;
104
- hasExpanded?: boolean;
105
103
  }
106
104
  export interface DataGridHeader<T extends object = any> extends ColumnInstance, UseResizeColumnsColumnProps<T>, UseSortByColumnProps<T> {
107
105
  className(className: any, arg1: {
@@ -122,16 +120,6 @@ interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectSta
122
120
  }
123
121
  export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
124
122
  }
125
- export interface RowAction {
126
- id?: string;
127
- itemText?: string;
128
- icon?: ComponentType | FunctionComponent;
129
- align?: React.ComponentProps<typeof IconButton>['align'];
130
- shouldHideMenuItem?: (...args: any[]) => void;
131
- shouldDisableMenuItem?: (...args: any[]) => void;
132
- disabled?: boolean;
133
- onClick?: (...args: any[]) => void;
134
- }
135
123
  export interface DataGridState<T extends object = any> extends TableCommonProps, UsePaginationInstanceProps<T>, Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>, Omit<UseFiltersInstanceProps<T>, 'rows'>, UseRowSelectInstanceProps<T>, Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
136
124
  withVirtualScroll?: boolean;
137
125
  DatagridPagination?: JSXElementConstructor<any>;
@@ -154,7 +142,6 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
154
142
  batchActions?: boolean;
155
143
  row: DatagridRow;
156
144
  rows: Array<DatagridRow<any>>;
157
- rowActions?: RowAction[];
158
145
  columns: Array<DatagridColumn>;
159
146
  key?: any;
160
147
  rowSize?: Size;
@@ -230,5 +217,4 @@ export interface ResizeHeaderProps {
230
217
  isFetching?: boolean;
231
218
  }
232
219
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
233
- export type NodeFuncType = (props: any) => ReactNode;
234
220
  export {};
@@ -1,9 +1,2 @@
1
- /**
2
- * Copyright IBM Corp. 2021, 2023
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
- import { Hooks } from 'react-table';
8
- declare const useActionsColumn: (hooks: Hooks) => void;
9
1
  export default useActionsColumn;
2
+ declare function useActionsColumn(hooks: any): void;
@@ -17,10 +17,9 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
17
17
  var blockClass = "".concat(pkg.prefix, "--datagrid");
18
18
  var useActionsColumn = function useActionsColumn(hooks) {
19
19
  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
20
- var _ref = instance,
21
- rowActions = _ref.rowActions,
22
- isFetching = _ref.isFetching,
23
- selectedRowIds = _ref.state.selectedRowIds;
20
+ var rowActions = instance.rowActions,
21
+ isFetching = instance.isFetching,
22
+ selectedRowIds = instance.state.selectedRowIds;
24
23
  var getDisabledState = function getDisabledState(rowIndex) {
25
24
  var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
26
25
  return Number(n);
@@ -80,10 +79,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
80
79
  return;
81
80
  }
82
81
  e.stopPropagation();
83
- _onClick === null || _onClick === void 0 || _onClick(id, row, e);
82
+ _onClick(id, row, e);
84
83
  },
85
84
  disabled: isDisabledByRow
86
- }), Icon && /*#__PURE__*/React__default.createElement(Icon, null)));
85
+ }), /*#__PURE__*/React__default.createElement(Icon, null)));
87
86
  })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(OverflowMenu, {
88
87
  align: "left",
89
88
  size: "sm",
@@ -109,7 +108,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
109
108
  disabled: isDisabledByRow,
110
109
  onClick: function onClick(e) {
111
110
  e.stopPropagation();
112
- _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
111
+ _onClick2(id, row, e);
113
112
  },
114
113
  key: id
115
114
  }));
@@ -1,9 +1,2 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2023
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
- import { Hooks } from 'react-table';
8
- declare const useColumnRightAlign: (hooks: Hooks) => void;
9
1
  export default useColumnRightAlign;
2
+ declare function useColumnRightAlign(hooks: any): void;
@@ -13,17 +13,16 @@ import { pkg } from '../../settings.js';
13
13
  var blockClass = "".concat(pkg.prefix, "--datagrid");
14
14
  var useColumnRightAlign = function useColumnRightAlign(hooks) {
15
15
  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
16
- var _tableProps$column, _column$Cell;
17
16
  return /*#__PURE__*/React__default.createElement("div", {
18
17
  className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
19
- sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
18
+ sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
20
19
  })
21
- }, column === null || column === void 0 || (_column$Cell = column.Cell) === null || _column$Cell === void 0 ? void 0 : _column$Cell.call(column, tableProps));
20
+ }, column.Cell(tableProps));
22
21
  };
23
22
  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
24
23
  return /*#__PURE__*/React__default.createElement("div", {
25
24
  className: "".concat(blockClass, "__right-align-header")
26
- }, typeof column.Header === 'function' ? (column === null || column === void 0 ? void 0 : column.Header.bind(column))(headerProp) : column.Header);
25
+ }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
27
26
  };
28
27
  var rightAlignedColumns = function rightAlignedColumns(columns) {
29
28
  var columnsWithDefaultCells = columns.map(function (column) {
@@ -15,30 +15,12 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
15
15
  var useNestedRows = function useNestedRows(hooks) {
16
16
  useNestedRowExpander(hooks);
17
17
  var useInstance = function useInstance(instance) {
18
- useEffect(function () {
19
- var _ref = instance,
20
- rows = _ref.rows;
21
- var defaultExpandedRows = rows.filter(function (row) {
22
- var _row$original;
23
- return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
24
- });
25
- if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
26
- defaultExpandedRows.map(function (defaultExpandedRow) {
27
- if (!(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.isExpanded) && !(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.hasExpanded)) {
28
- var _defaultExpandedRow$t;
29
- defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
30
- defaultExpandedRow.hasExpanded = true;
31
- return;
32
- }
33
- });
34
- }
35
- }, [instance, instance.rows]);
36
18
  // This useEffect will expand rows if they exist in the initialState obj
37
19
  useEffect(function () {
38
20
  var rows = instance.rows,
39
21
  initialState = instance.initialState;
40
- var _ref2 = initialState,
41
- expandedRowIds = _ref2.expandedRowIds;
22
+ var _ref = initialState,
23
+ expandedRowIds = _ref.expandedRowIds;
42
24
  if (expandedRowIds) {
43
25
  Object.keys(expandedRowIds).forEach(function (key) {
44
26
  var row = rows.filter(function (r) {
@@ -52,14 +34,14 @@ var useNestedRows = function useNestedRows(hooks) {
52
34
  }
53
35
  }, [instance]);
54
36
  var marginLeft = 24;
55
- var getRowProps = function getRowProps(props, _ref3) {
56
- var row = _ref3.row;
37
+ var getRowProps = function getRowProps(props, _ref2) {
38
+ var row = _ref2.row;
57
39
  return [props, {
58
40
  className: cx(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
59
41
  }];
60
42
  };
61
- var getRowStyles = function getRowStyles(props, _ref4) {
62
- var row = _ref4.row;
43
+ var getRowStyles = function getRowStyles(props, _ref3) {
44
+ var row = _ref3.row;
63
45
  return [props, {
64
46
  style: {
65
47
  paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
@@ -69,9 +51,9 @@ var useNestedRows = function useNestedRows(hooks) {
69
51
  var getIndentation = function getIndentation(depth) {
70
52
  return 32 * depth + 16;
71
53
  }; // row indentation padding
72
- var getCellProps = function getCellProps(props, _ref5) {
73
- var cell = _ref5.cell,
74
- instance = _ref5.instance;
54
+ var getCellProps = function getCellProps(props, _ref4) {
55
+ var cell = _ref4.cell,
56
+ instance = _ref4.instance;
75
57
  // we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
76
58
  var isFirstCell = instance.columns.findIndex(function (c) {
77
59
  return c.id === cell.column.id;
@@ -87,8 +87,7 @@ Decorator.propTypes = {
87
87
  */
88
88
  small: PropTypes.bool,
89
89
  /**
90
- * Override the default theme of the component.
91
- * Useful if you want "invert" the component's theme.
90
+ * Determines the theme of the component.
92
91
  */
93
92
  theme: PropTypes.oneOf(['light', 'dark']),
94
93
  /**