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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) 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/useInlineEdit.d.ts +1 -8
  31. package/es/components/Datagrid/useInlineEdit.js +1 -1
  32. package/es/components/Datagrid/useNestedRows.js +9 -27
  33. package/es/components/Decorator/Decorator.js +1 -2
  34. package/es/components/DecoratorBase/DecoratorBase.js +5 -3
  35. package/es/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
  36. package/es/components/DecoratorLink/DecoratorLink.js +1 -2
  37. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
  38. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +16 -29
  39. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
  40. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
  41. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
  42. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
  43. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
  44. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
  45. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
  46. package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
  47. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
  48. package/lib/components/Datagrid/types/index.d.ts +4 -18
  49. package/lib/components/Datagrid/useActionsColumn.d.ts +1 -8
  50. package/lib/components/Datagrid/useActionsColumn.js +6 -7
  51. package/lib/components/Datagrid/useColumnRightAlign.d.ts +1 -8
  52. package/lib/components/Datagrid/useColumnRightAlign.js +3 -4
  53. package/lib/components/Datagrid/useInlineEdit.d.ts +1 -8
  54. package/lib/components/Datagrid/useInlineEdit.js +1 -1
  55. package/lib/components/Datagrid/useNestedRows.js +9 -27
  56. package/lib/components/Decorator/Decorator.js +1 -2
  57. package/lib/components/DecoratorBase/DecoratorBase.js +5 -3
  58. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
  59. package/lib/components/DecoratorLink/DecoratorLink.js +1 -2
  60. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
  61. package/package.json +3 -3
  62. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +0 -1
  63. package/scss/components/StatusIcon/_status-icon.scss +4 -4
  64. package/scss/components/StringFormatter/_string-formatter.scss +2 -2
  65. 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) {
@@ -1,9 +1,2 @@
1
- /**
2
- * Copyright IBM Corp. 2022, 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
- import { Hooks } from 'react-table';
8
- declare const useInlineEdit: (hooks: Hooks) => void;
9
1
  export default useInlineEdit;
2
+ declare function useInlineEdit(hooks: any): void;
@@ -25,7 +25,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
25
25
  tabIndex: -1,
26
26
  value: cell.value,
27
27
  cell: cell,
28
- disabledCell: isDisabled,
28
+ isDisabled: isDisabled,
29
29
  instance: instance,
30
30
  type: type
31
31
  });
@@ -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;