@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.
- package/css/index-full-carbon.css +2 -3
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +2 -3
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +2 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +12 -22
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
- package/es/components/DataSpreadsheet/types/index.d.ts +1 -1
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
- package/es/components/Datagrid/types/index.d.ts +2 -5
- package/es/components/Datagrid/useColumnRightAlign.d.ts +1 -8
- package/es/components/Datagrid/useColumnRightAlign.js +3 -4
- package/es/components/Datagrid/useInlineEdit.d.ts +1 -8
- package/es/components/Datagrid/useInlineEdit.js +1 -1
- package/es/components/Datagrid/useNestedRows.js +9 -27
- package/es/components/Decorator/Decorator.js +1 -2
- package/es/components/DecoratorBase/DecoratorBase.js +5 -3
- package/es/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
- package/es/components/DecoratorLink/DecoratorLink.js +1 -2
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +12 -22
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
- package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
- package/lib/components/Datagrid/types/index.d.ts +2 -5
- package/lib/components/Datagrid/useColumnRightAlign.d.ts +1 -8
- package/lib/components/Datagrid/useColumnRightAlign.js +3 -4
- package/lib/components/Datagrid/useInlineEdit.d.ts +1 -8
- package/lib/components/Datagrid/useInlineEdit.js +1 -1
- package/lib/components/Datagrid/useNestedRows.js +9 -27
- package/lib/components/Decorator/Decorator.js +1 -2
- package/lib/components/DecoratorBase/DecoratorBase.js +5 -3
- package/lib/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
- package/lib/components/DecoratorLink/DecoratorLink.js +1 -2
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
- package/package.json +3 -3
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +0 -1
- package/scss/components/StatusIcon/_status-icon.scss +4 -4
- package/scss/components/StringFormatter/_string-formatter.scss +2 -2
- 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?:
|
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
|
81
|
-
|
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
|
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
|
-
|
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,
|
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
|
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
|
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,
|
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?:
|
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
|
-
|
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
|
-
|
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,
|
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
|
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 ||
|
18
|
+
sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
|
20
19
|
})
|
21
|
-
}, column
|
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' ?
|
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;
|
@@ -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
|
41
|
-
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,
|
56
|
-
var 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,
|
62
|
-
var 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,
|
73
|
-
var cell =
|
74
|
-
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
|
-
*
|
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,
|
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
|
-
*
|
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
|
-
*
|
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
|
-
*
|
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
|
-
|
127
|
-
|
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
|
-
|
132
|
-
|
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
|
145
|
-
|
146
|
-
activeCellContent =
|
147
|
-
setActiveCellContent =
|
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
|
-
|
709
|
-
|
710
|
-
|
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?:
|
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
|
*/
|