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

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 +12 -22
  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 +2 -5
  26. package/es/components/Datagrid/useColumnRightAlign.d.ts +1 -8
  27. package/es/components/Datagrid/useColumnRightAlign.js +3 -4
  28. package/es/components/Datagrid/useInlineEdit.d.ts +1 -8
  29. package/es/components/Datagrid/useInlineEdit.js +1 -1
  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 +12 -22
  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 +2 -5
  47. package/lib/components/Datagrid/useColumnRightAlign.d.ts +1 -8
  48. package/lib/components/Datagrid/useColumnRightAlign.js +3 -4
  49. package/lib/components/Datagrid/useInlineEdit.d.ts +1 -8
  50. package/lib/components/Datagrid/useInlineEdit.js +1 -1
  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
@@ -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;
@@ -6,7 +6,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
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, UseSortByOptions, UseTableHooks } from 'react-table';
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
11
  import { type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -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: {
@@ -219,5 +217,4 @@ export interface ResizeHeaderProps {
219
217
  isFetching?: boolean;
220
218
  }
221
219
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
222
- export type NodeFuncType = (props: any) => ReactNode;
223
220
  export {};
@@ -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;
@@ -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
  /**
@@ -23,7 +23,8 @@ var defaults = {
23
23
  onContextMenu: function onContextMenu() {},
24
24
  onContextMenuLabel: function onContextMenuLabel() {},
25
25
  onContextMenuValue: function onContextMenuValue() {},
26
- scoreThresholds: [0, 4, 7, 10]
26
+ scoreThresholds: [0, 4, 7, 10],
27
+ theme: 'light'
27
28
  };
28
29
 
29
30
  /**
@@ -55,7 +56,8 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
55
56
  _ref$scoreThresholds = _ref.scoreThresholds,
56
57
  scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
57
58
  small = _ref.small,
58
- theme = _ref.theme,
59
+ _ref$theme = _ref.theme,
60
+ theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
59
61
  truncateValue = _ref.truncateValue,
60
62
  value = _ref.value,
61
63
  valueTitle = _ref.valueTitle,
@@ -65,7 +67,7 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
65
67
  var _value = truncate(value, truncateValue);
66
68
 
67
69
  // These class names apply to all types of DecoratorBase.
68
- var classNames = cx(blockClass, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--").concat(theme), theme), "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
70
+ var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
69
71
 
70
72
  // These properties apply to all <DecoratorIcons>.
71
73
  var decoratorIconsProps = {
@@ -111,8 +111,7 @@ DecoratorDualButton.propTypes = {
111
111
  */
112
112
  small: PropTypes.bool,
113
113
  /**
114
- * Override the default theme of the component.
115
- * Useful if you want "invert" the component's theme.
114
+ * Determines the theme of the component.
116
115
  */
117
116
  theme: PropTypes.oneOf(['light', 'dark']),
118
117
  /**
@@ -101,8 +101,7 @@ DecoratorLink.propTypes = {
101
101
  */
102
102
  small: PropTypes.bool,
103
103
  /**
104
- * Override the default theme of the component.
105
- * Useful if you want "invert" the component's theme.
104
+ * Determines the theme of the component.
106
105
  */
107
106
  theme: PropTypes.oneOf(['light', 'dark']),
108
107
  /**
@@ -101,8 +101,7 @@ DecoratorSingleButton.propTypes = {
101
101
  */
102
102
  small: PropTypes.bool,
103
103
  /**
104
- * Override the default theme of the component.
105
- * Useful if you want "invert" the component's theme.
104
+ * Determines the theme of the component.
106
105
  */
107
106
  theme: PropTypes.oneOf(['light', 'dark']),
108
107
  /**
@@ -121,19 +121,15 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
121
121
  _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
122
122
  headerCellHoldActive = _useState18[0],
123
123
  setHeaderCellHoldActive = _useState18[1];
124
+ var isBlurSpreadsheet = React.useRef(false);
124
125
  var _useState19 = React.useState(false),
125
126
  _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
126
- selectedHeaderReorderActive = _useState20[0],
127
- setSelectedHeaderReorderActive = _useState20[1];
128
- var isBlurSpreadsheet = React.useRef(false);
127
+ isActiveHeaderCellChanged = _useState20[0],
128
+ setIsActiveHeaderCellChanged = _useState20[1];
129
129
  var _useState21 = React.useState(false),
130
130
  _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
131
- isActiveHeaderCellChanged = _useState22[0],
132
- setIsActiveHeaderCellChanged = _useState22[1];
133
- var _useState23 = React.useState(false),
134
- _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
135
- activeCellInsideSelectionArea = _useState24[0],
136
- setActiveCellInsideSelectionArea = _useState24[1];
131
+ activeCellInsideSelectionArea = _useState22[0],
132
+ setActiveCellInsideSelectionArea = _useState22[1];
137
133
  var previousState = usePreviousValue.usePreviousValue({
138
134
  activeCellCoordinates: activeCellCoordinates,
139
135
  isEditing: isEditing,
@@ -141,10 +137,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
141
137
  }) || {};
142
138
  var cellSizeValue = getCellSize.getCellSize(cellSize);
143
139
  var cellEditorRef = React.useRef();
144
- var _useState25 = React.useState(),
145
- _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
146
- activeCellContent = _useState26[0],
147
- setActiveCellContent = _useState26[1];
140
+ var _useState23 = React.useState(),
141
+ _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
142
+ activeCellContent = _useState24[0],
143
+ setActiveCellContent = _useState24[1];
148
144
  var activeCellRef = React.useRef();
149
145
  var cellEditorRulerRef = React.useRef();
150
146
  var defaultColumn = React.useMemo(function () {
@@ -628,8 +624,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
628
624
  columns: columns,
629
625
  currentMatcher: currentMatcher,
630
626
  defaultColumn: defaultColumn,
631
- selectedHeaderReorderActive: selectedHeaderReorderActive,
632
- setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
633
627
  headerGroups: headerGroups,
634
628
  rows: rows,
635
629
  scrollBarSize: scrollBarSize,
@@ -653,8 +647,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
653
647
  currentMatcher: currentMatcher,
654
648
  setCurrentMatcher: setCurrentMatcher,
655
649
  setContainerHasFocus: setContainerHasFocus,
656
- selectedHeaderReorderActive: selectedHeaderReorderActive,
657
- setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
658
650
  selectionAreas: selectionAreas,
659
651
  setSelectionAreas: setSelectionAreas,
660
652
  headerGroups: headerGroups,
@@ -705,11 +697,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
705
697
  updateData: updateData
706
698
  }),
707
699
  onChange: function onChange(event) {
708
- if (previousState.isEditing) {
709
- setCellEditorValue(event.target.value);
710
- if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
711
- cellEditorRulerRef.current.textContent = event.target.value;
712
- }
700
+ setCellEditorValue(event.target.value);
701
+ if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
702
+ cellEditorRulerRef.current.textContent = event.target.value;
713
703
  }
714
704
  },
715
705
  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
  */