@carbon/ibm-products 2.38.0 → 2.39.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +227 -0
- 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.css +227 -0
- 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 +227 -0
- 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/Card/Card.js +50 -9
- package/es/components/Card/CardFooter.d.ts +5 -1
- package/es/components/Card/CardFooter.js +11 -1
- package/es/components/Carousel/Carousel.d.ts +6 -2
- package/es/components/Checklist/Checklist.d.ts +100 -2
- package/es/components/Checklist/Checklist.js +9 -5
- package/es/components/Checklist/Checklist.types.d.ts +19 -0
- package/es/components/Checklist/Checklist.types.js +22 -0
- package/es/components/Checklist/ChecklistChart.d.ts +5 -1
- package/es/components/Checklist/ChecklistChart.js +9 -4
- package/es/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/es/components/Checklist/ChecklistIcon.js +9 -4
- package/es/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/es/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +48 -27
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +34 -25
- package/es/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/es/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/es/components/GetStartedCard/GetStartedCard.js +82 -0
- package/es/components/GetStartedCard/index.d.ts +1 -0
- package/es/components/Guidebanner/Guidebanner.js +2 -2
- package/es/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
- package/es/components/NotificationsPanel/NotificationsPanel.js +10 -10
- package/es/components/SidePanel/SidePanel.js +1 -1
- package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/es/components/TagOverflow/TagOverflow.js +153 -29
- package/es/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/es/components/TagOverflow/TagOverflowModal.js +112 -0
- package/es/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/es/components/TagOverflow/TagOverflowPopover.js +135 -0
- package/es/components/index.d.ts +1 -0
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/settings.d.ts +1 -0
- package/lib/components/Card/Card.js +50 -9
- package/lib/components/Card/CardFooter.d.ts +5 -1
- package/lib/components/Card/CardFooter.js +11 -1
- package/lib/components/Carousel/Carousel.d.ts +6 -2
- package/lib/components/Checklist/Checklist.d.ts +100 -2
- package/lib/components/Checklist/Checklist.js +9 -5
- package/lib/components/Checklist/Checklist.types.d.ts +19 -0
- package/lib/components/Checklist/Checklist.types.js +27 -0
- package/lib/components/Checklist/ChecklistChart.d.ts +5 -1
- package/lib/components/Checklist/ChecklistChart.js +14 -9
- package/lib/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/lib/components/Checklist/ChecklistIcon.js +9 -4
- package/lib/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +48 -27
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +34 -25
- package/lib/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/lib/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/lib/components/GetStartedCard/GetStartedCard.js +88 -0
- package/lib/components/GetStartedCard/index.d.ts +1 -0
- package/lib/components/Guidebanner/Guidebanner.js +2 -2
- package/lib/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.js +10 -10
- package/lib/components/SidePanel/SidePanel.js +1 -1
- package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/lib/components/TagOverflow/TagOverflow.js +154 -28
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/lib/components/TagOverflow/TagOverflowModal.js +121 -0
- package/lib/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/lib/components/TagOverflow/TagOverflowPopover.js +144 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +3 -3
- package/scss/components/GetStartedCard/_carbon-imports.scss +9 -0
- package/scss/components/GetStartedCard/_get-started-card.scss +135 -0
- package/scss/components/GetStartedCard/_index-with-carbon.scss +9 -0
- package/scss/components/GetStartedCard/_index.scss +8 -0
- package/scss/components/TagOverflow/_tag-overflow.scss +157 -0
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/telemetry.yml +23 -16
@@ -42,14 +42,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
42
42
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
43
43
|
|
44
44
|
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
|
45
|
-
|
46
45
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
47
46
|
var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
|
48
47
|
var componentName = 'DataSpreadsheet';
|
49
48
|
|
50
49
|
// Default values for props
|
51
50
|
var defaults = {
|
52
|
-
cellSize: 'sm',
|
53
51
|
columns: Object.freeze([]),
|
54
52
|
data: Object.freeze([]),
|
55
53
|
defaultEmptyRowCount: 16,
|
@@ -58,13 +56,12 @@ var defaults = {
|
|
58
56
|
onSelectionAreaChange: Object.freeze(function () {}),
|
59
57
|
theme: 'light'
|
60
58
|
};
|
61
|
-
|
62
59
|
/**
|
63
60
|
* DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
|
64
61
|
*/
|
65
62
|
exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
66
63
|
var _ref$cellSize = _ref.cellSize,
|
67
|
-
cellSize = _ref$cellSize === void 0 ?
|
64
|
+
cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
|
68
65
|
className = _ref.className,
|
69
66
|
_ref$columns = _ref.columns,
|
70
67
|
columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
|
@@ -84,7 +81,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
84
81
|
theme = _ref.theme,
|
85
82
|
totalVisibleColumns = _ref.totalVisibleColumns,
|
86
83
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
87
|
-
var multiKeyTrackingRef = React.useRef();
|
84
|
+
var multiKeyTrackingRef = React.useRef(null);
|
88
85
|
var localRef = React.useRef();
|
89
86
|
var spreadsheetRef = ref || localRef;
|
90
87
|
var focusedElement = useActiveElement.useActiveElement();
|
@@ -124,7 +121,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
124
121
|
_useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
|
125
122
|
headerCellHoldActive = _useState18[0],
|
126
123
|
setHeaderCellHoldActive = _useState18[1];
|
127
|
-
var _useState19 = React.useState(
|
124
|
+
var _useState19 = React.useState(false),
|
128
125
|
_useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
|
129
126
|
isActiveHeaderCellChanged = _useState20[0],
|
130
127
|
setIsActiveHeaderCellChanged = _useState20[1];
|
@@ -135,10 +132,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
135
132
|
var previousState = usePreviousValue.usePreviousValue({
|
136
133
|
activeCellCoordinates: activeCellCoordinates,
|
137
134
|
isEditing: isEditing
|
138
|
-
});
|
135
|
+
}) || {};
|
139
136
|
var cellSizeValue = getCellSize.getCellSize(cellSize);
|
140
137
|
var cellEditorRef = React.useRef();
|
141
|
-
var _useState23 = React.useState(),
|
138
|
+
var _useState23 = React.useState(null),
|
142
139
|
_useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
|
143
140
|
activeCellContent = _useState24[0],
|
144
141
|
setActiveCellContent = _useState24[1];
|
@@ -189,13 +186,18 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
189
186
|
|
190
187
|
// Removes the active cell element
|
191
188
|
var removeActiveCell = React.useCallback(function () {
|
192
|
-
var
|
193
|
-
activeCellHighlight.
|
189
|
+
var _current;
|
190
|
+
var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === void 0 || (_current = spreadsheetRef.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
191
|
+
if (activeCellHighlight) {
|
192
|
+
activeCellHighlight.style.display = 'none';
|
193
|
+
}
|
194
194
|
}, [spreadsheetRef]);
|
195
195
|
var removeCellEditor = React.useCallback(function () {
|
196
196
|
setCellEditorValue('');
|
197
197
|
setIsEditing(false);
|
198
|
-
cellEditorRef.current
|
198
|
+
if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
|
199
|
+
cellEditorRef.current.style.display = 'none';
|
200
|
+
}
|
199
201
|
}, []);
|
200
202
|
|
201
203
|
// Remove cell editor if the active cell coordinates change and save with new cell data, this will
|
@@ -205,8 +207,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
205
207
|
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)) && isEditing) {
|
206
208
|
var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
|
207
209
|
removeCellEditor();
|
208
|
-
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
|
209
|
-
cellEditorRulerRef.current
|
210
|
+
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
|
211
|
+
if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
|
212
|
+
cellEditorRulerRef.current.textContent = '';
|
213
|
+
}
|
210
214
|
}
|
211
215
|
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)) {
|
212
216
|
if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
|
@@ -251,7 +255,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
251
255
|
setActiveCellCoordinates: setActiveCellCoordinates,
|
252
256
|
setSelectionAreas: setSelectionAreas,
|
253
257
|
removeActiveCell: removeActiveCell,
|
254
|
-
removeCellSelections: removeCellSelections.removeCellSelections,
|
255
258
|
setContainerHasFocus: setContainerHasFocus,
|
256
259
|
removeCellEditor: removeCellEditor
|
257
260
|
});
|
@@ -306,6 +309,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
306
309
|
}
|
307
310
|
});
|
308
311
|
removeCellSelections.removeCellSelections({
|
312
|
+
matcher: undefined,
|
309
313
|
spreadsheetRef: spreadsheetRef
|
310
314
|
});
|
311
315
|
}, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
|
@@ -313,7 +317,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
313
317
|
return isEditing || key === 'Meta' || key === 'Control';
|
314
318
|
}, [isEditing]);
|
315
319
|
var handleArrowKeyPress = React.useCallback(function (arrowKey) {
|
316
|
-
|
320
|
+
var _event;
|
321
|
+
(_event = event) === null || _event === void 0 || _event.preventDefault();
|
317
322
|
handleInitialArrowPress();
|
318
323
|
var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
|
319
324
|
var updatedValue;
|
@@ -416,18 +421,28 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
416
421
|
setIsEditing(true);
|
417
422
|
setClickAndHoldActive(false);
|
418
423
|
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;
|
419
|
-
var activeCellValue
|
424
|
+
var activeCellValue;
|
425
|
+
if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
|
426
|
+
var _activeCellFullData$r;
|
427
|
+
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;
|
428
|
+
}
|
420
429
|
setCellEditorValue(activeCellValue || '');
|
421
|
-
cellEditorRulerRef.current
|
422
|
-
|
430
|
+
if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
|
431
|
+
cellEditorRulerRef.current.textContent = activeCellValue;
|
432
|
+
}
|
433
|
+
if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
|
434
|
+
var _activeCellRef$curren;
|
435
|
+
cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === void 0 || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === void 0 ? void 0 : _activeCellRef$curren.width;
|
436
|
+
}
|
423
437
|
};
|
424
438
|
|
425
439
|
// Sets the initial placement of the cell editor cursor at the end of the text area
|
426
440
|
// this is not done for us by default in Safari
|
427
441
|
React.useEffect(function () {
|
428
442
|
if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
|
429
|
-
|
430
|
-
cellEditorRef.current.
|
443
|
+
var _cellEditorRef$curren, _cellEditorRulerRef$c, _cellEditorRulerRef$c2, _cellEditorRef$curren2;
|
444
|
+
cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 || _cellEditorRef$curren.setSelectionRange(Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c === void 0 || (_cellEditorRulerRef$c = _cellEditorRulerRef$c.textContent) === null || _cellEditorRulerRef$c === void 0 ? void 0 : _cellEditorRulerRef$c.length), Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c2 = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c2 === void 0 || (_cellEditorRulerRef$c2 = _cellEditorRulerRef$c2.textContent) === null || _cellEditorRulerRef$c2 === void 0 ? void 0 : _cellEditorRulerRef$c2.length));
|
445
|
+
cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren2 = cellEditorRef.current) === null || _cellEditorRef$curren2 === void 0 || _cellEditorRef$curren2.focus();
|
431
446
|
}
|
432
447
|
}, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
|
433
448
|
var handleActiveCellClick = function handleActiveCellClick() {
|
@@ -438,7 +453,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
438
453
|
}
|
439
454
|
handleRowColumnHeaderClick({
|
440
455
|
isKeyboard: false,
|
441
|
-
index: indexValue
|
456
|
+
index: Number(indexValue)
|
442
457
|
});
|
443
458
|
}
|
444
459
|
return;
|
@@ -455,6 +470,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
455
470
|
var tempMatcher = uuidv4["default"]();
|
456
471
|
setClickAndHoldActive(true);
|
457
472
|
removeCellSelections.removeCellSelections({
|
473
|
+
matcher: null,
|
458
474
|
spreadsheetRef: spreadsheetRef
|
459
475
|
});
|
460
476
|
setSelectionAreas([{
|
@@ -485,19 +501,21 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
485
501
|
var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref5) {
|
486
502
|
var isKeyboard = _ref5.isKeyboard,
|
487
503
|
_ref5$index = _ref5.index,
|
488
|
-
index = _ref5$index === void 0 ?
|
504
|
+
index = _ref5$index === void 0 ? -1 : _ref5$index;
|
489
505
|
var handleHeaderCellProps = {
|
490
506
|
activeCellCoordinates: activeCellCoordinates,
|
491
507
|
rows: rows,
|
492
508
|
columns: columns,
|
509
|
+
currentMatcher: currentMatcher,
|
493
510
|
setActiveCellCoordinates: setActiveCellCoordinates,
|
494
511
|
setCurrentMatcher: setCurrentMatcher,
|
495
512
|
setSelectionAreas: setSelectionAreas,
|
496
513
|
spreadsheetRef: spreadsheetRef,
|
514
|
+
index: index,
|
497
515
|
isKeyboard: isKeyboard,
|
498
516
|
setSelectionAreaData: setSelectionAreaData,
|
499
|
-
|
500
|
-
|
517
|
+
isHoldingCommandKey: null,
|
518
|
+
isHoldingShiftKey: null
|
501
519
|
};
|
502
520
|
// Select an entire column
|
503
521
|
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
|
@@ -621,7 +639,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
621
639
|
setContainerHasFocus: setContainerHasFocus,
|
622
640
|
selectionAreas: selectionAreas,
|
623
641
|
setSelectionAreas: setSelectionAreas,
|
624
|
-
cellSize: cellSize,
|
625
642
|
headerGroups: headerGroups,
|
626
643
|
defaultColumn: defaultColumn,
|
627
644
|
getTableBodyProps: getTableBodyProps,
|
@@ -671,10 +688,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
671
688
|
}),
|
672
689
|
onChange: function onChange(event) {
|
673
690
|
setCellEditorValue(event.target.value);
|
674
|
-
cellEditorRulerRef.current
|
691
|
+
if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
|
692
|
+
cellEditorRulerRef.current.textContent = event.target.value;
|
693
|
+
}
|
675
694
|
},
|
676
695
|
ref: cellEditorRef,
|
677
|
-
"aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) :
|
696
|
+
"aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : '',
|
678
697
|
className: cx__default["default"]("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
|
679
698
|
}), /*#__PURE__*/React__default["default"].createElement("pre", {
|
680
699
|
"aria-hidden": true,
|
@@ -705,6 +724,7 @@ exports.DataSpreadsheet.propTypes = {
|
|
705
724
|
/**
|
706
725
|
* The data that will build the column headers
|
707
726
|
*/
|
727
|
+
/**@ts-ignore */
|
708
728
|
columns: index["default"].arrayOf(index["default"].shape({
|
709
729
|
Header: index["default"].string,
|
710
730
|
accessor: index["default"].oneOfType([index["default"].string, index["default"].func]),
|
@@ -713,6 +733,7 @@ exports.DataSpreadsheet.propTypes = {
|
|
713
733
|
/**
|
714
734
|
* The spreadsheet data that will be rendered in the body of the spreadsheet component
|
715
735
|
*/
|
736
|
+
/**@ts-ignore */
|
716
737
|
data: index["default"].arrayOf(index["default"].shape),
|
717
738
|
/**
|
718
739
|
* Sets the number of empty rows to be created when there is no data provided
|
@@ -1,2 +1,139 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
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 React, { Dispatch, SetStateAction, MutableRefObject } from 'react';
|
8
|
+
import { ActiveCellCoordinates, Column } from './types';
|
9
|
+
interface DataSpreadsheetBodyProps {
|
10
|
+
/**
|
11
|
+
* Object containing the active cell coordinates
|
12
|
+
*/
|
13
|
+
activeCellCoordinates?: ActiveCellCoordinates | null;
|
14
|
+
/**
|
15
|
+
*This is the ref of the button input, which is the active cell element
|
16
|
+
*/
|
17
|
+
activeCellRef?: MutableRefObject<HTMLElement | undefined>;
|
18
|
+
/**
|
19
|
+
* Is the user clicking and holding in the data spreadsheet body
|
20
|
+
*/
|
21
|
+
clickAndHoldActive?: boolean;
|
22
|
+
/**
|
23
|
+
* All of the spreadsheet columns
|
24
|
+
*/
|
25
|
+
columns?: readonly Column[];
|
26
|
+
/**
|
27
|
+
* This represents the id of the current cell selection area
|
28
|
+
*/
|
29
|
+
currentMatcher?: string;
|
30
|
+
/**
|
31
|
+
* Default spreadsheet sizing values
|
32
|
+
*/
|
33
|
+
defaultColumn?: Column;
|
34
|
+
/**
|
35
|
+
* Sets the number of empty rows to be created when there is no data provided
|
36
|
+
*/
|
37
|
+
defaultEmptyRowCount?: number;
|
38
|
+
/**
|
39
|
+
* Function to set table body prop values
|
40
|
+
*/
|
41
|
+
getTableBodyProps?: () => {
|
42
|
+
data: any;
|
43
|
+
};
|
44
|
+
/**
|
45
|
+
* Headers provided from useTable hook
|
46
|
+
*/
|
47
|
+
headerGroups?: any[];
|
48
|
+
/**
|
49
|
+
* The spreadsheet id
|
50
|
+
*/
|
51
|
+
id?: number | string;
|
52
|
+
/**
|
53
|
+
* The event handler that is called when the active cell changes
|
54
|
+
*/
|
55
|
+
onActiveCellChange?: () => void;
|
56
|
+
/**
|
57
|
+
* The event handler that is called to set the rows for the empty spreadsheet
|
58
|
+
*/
|
59
|
+
onDataUpdate?: ({ ...args }: {
|
60
|
+
[x: string]: any;
|
61
|
+
}) => void;
|
62
|
+
/**
|
63
|
+
* The event handler that is called when the selection areas change
|
64
|
+
*/
|
65
|
+
onSelectionAreaChange?: ({ ...args }: {
|
66
|
+
[x: string]: any;
|
67
|
+
}) => void;
|
68
|
+
/**
|
69
|
+
* Prepare row function from react-table
|
70
|
+
*/
|
71
|
+
prepareRow?: (...args: any[]) => void;
|
72
|
+
/**
|
73
|
+
* All of the spreadsheet row data
|
74
|
+
*/
|
75
|
+
rows?: any[];
|
76
|
+
/**
|
77
|
+
* The scrollbar width
|
78
|
+
*/
|
79
|
+
scrollBarSize?: number;
|
80
|
+
/**
|
81
|
+
* Array of selection area data
|
82
|
+
*/
|
83
|
+
selectionAreaData?: object[];
|
84
|
+
/**
|
85
|
+
* Array of selection areas
|
86
|
+
*/
|
87
|
+
selectionAreas?: any[];
|
88
|
+
/**
|
89
|
+
* Setter fn for activeCellCoordinates state value
|
90
|
+
*/
|
91
|
+
setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
|
92
|
+
/**
|
93
|
+
* Setter fn for active cell inside of selection area
|
94
|
+
*/
|
95
|
+
setActiveCellInsideSelectionArea?: Dispatch<SetStateAction<boolean>>;
|
96
|
+
/**
|
97
|
+
* Setter fn for clickAndHold state value
|
98
|
+
*/
|
99
|
+
setClickAndHoldActive?: Dispatch<SetStateAction<boolean>>;
|
100
|
+
/**
|
101
|
+
* Setter fn for column ordering, provided from react-table
|
102
|
+
*/
|
103
|
+
setColumnOrder?: () => void;
|
104
|
+
/**
|
105
|
+
* Setter fn for containerHasFocus state value
|
106
|
+
*/
|
107
|
+
setContainerHasFocus?: Dispatch<SetStateAction<boolean>>;
|
108
|
+
/**
|
109
|
+
* Setter fn for currentMatcher state value
|
110
|
+
*/
|
111
|
+
setCurrentMatcher?: Dispatch<SetStateAction<string>>;
|
112
|
+
/**
|
113
|
+
* Setter fn for header cell hold active value
|
114
|
+
*/
|
115
|
+
setHeaderCellHoldActive?: Dispatch<SetStateAction<boolean>>;
|
116
|
+
/**
|
117
|
+
* Setter fn for selectionAreaData state value
|
118
|
+
*/
|
119
|
+
setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
|
120
|
+
/**
|
121
|
+
* Setter fn for selectionAreas state value
|
122
|
+
*/
|
123
|
+
setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
|
124
|
+
/**
|
125
|
+
* The total columns width
|
126
|
+
*/
|
127
|
+
totalColumnsWidth?: number;
|
128
|
+
/**
|
129
|
+
* The total number of columns to be initially visible, additional columns will be rendered and
|
130
|
+
* visible via horizontal scrollbar
|
131
|
+
*/
|
132
|
+
totalVisibleColumns?: number;
|
133
|
+
/**
|
134
|
+
* Prop from react-table used to reorder columns
|
135
|
+
*/
|
136
|
+
visibleColumns?: [];
|
137
|
+
}
|
138
|
+
export declare const DataSpreadsheetBody: React.ForwardRefExoticComponent<DataSpreadsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
|
139
|
+
export {};
|
@@ -72,21 +72,21 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
72
72
|
var previousState = usePreviousValue.usePreviousValue({
|
73
73
|
selectionAreaData: selectionAreaData,
|
74
74
|
clickAndHoldActive: clickAndHoldActive,
|
75
|
-
rowHeight: defaultColumn.rowHeight
|
76
|
-
});
|
75
|
+
rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
76
|
+
}) || {};
|
77
77
|
|
78
78
|
// Set custom css property containing the spreadsheet total width
|
79
79
|
React.useEffect(function () {
|
80
|
-
ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px(totalColumnsWidth + scrollBarSize));
|
80
|
+
ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
|
81
81
|
}, [ref, scrollBarSize, totalColumnsWidth]);
|
82
82
|
|
83
83
|
// Call the `onSelectionAreaChange` handler to send selection area data
|
84
84
|
// back to the consumer
|
85
85
|
React.useEffect(function () {
|
86
|
-
if (selectionAreaData.length) {
|
86
|
+
if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
|
87
87
|
var _previousState$select;
|
88
88
|
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)) {
|
89
|
-
onSelectionAreaChange(selectionAreaData);
|
89
|
+
onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
|
90
90
|
}
|
91
91
|
}
|
92
92
|
}, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
|
@@ -118,7 +118,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
118
118
|
}),
|
119
119
|
selectionId: area.matcher
|
120
120
|
};
|
121
|
-
setSelectionAreaData(function (prev) {
|
121
|
+
setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
|
122
122
|
var prevValues = deepCloneObject.deepCloneObject(prev);
|
123
123
|
var newAreaData = prevValues.filter(function (item) {
|
124
124
|
return item.selectionId !== area.matcher;
|
@@ -176,19 +176,28 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
176
176
|
// cell also gets updated with the new size and new top placement
|
177
177
|
// value. All of the cell selections will be updated as well
|
178
178
|
React.useEffect(function () {
|
179
|
-
var listContainer
|
180
|
-
var activeCellButton
|
181
|
-
if (
|
179
|
+
var listContainer;
|
180
|
+
var activeCellButton;
|
181
|
+
if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== void 0 && spreadsheetBodyRef.current) {
|
182
|
+
var _listContainer;
|
183
|
+
listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
|
184
|
+
activeCellButton = (_listContainer = listContainer) === null || _listContainer === void 0 ? void 0 : _listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
185
|
+
}
|
186
|
+
if (activeCellButton && (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight) !== previousState.rowHeight) {
|
182
187
|
activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
|
183
188
|
if (activeCellCoordinates) {
|
184
|
-
var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
|
185
|
-
var
|
186
|
-
var newActiveCellTopPosition
|
189
|
+
var activeTargetElement = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
|
190
|
+
var _listContainer2 = ref === null || ref === void 0 ? void 0 : ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
191
|
+
var newActiveCellTopPosition;
|
192
|
+
if (activeTargetElement && _listContainer2) {
|
193
|
+
newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === void 0 ? void 0 : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
|
194
|
+
}
|
187
195
|
activeCellButton.style.top = layout.px(newActiveCellTopPosition);
|
188
196
|
removeCellSelections.removeCellSelections({
|
197
|
+
matcher: undefined,
|
189
198
|
spreadsheetRef: ref
|
190
199
|
});
|
191
|
-
selectionAreas.map(function (area) {
|
200
|
+
selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
|
192
201
|
if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
|
193
202
|
return createCellSelectionArea.createCellSelectionArea({
|
194
203
|
ref: ref,
|
@@ -211,12 +220,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
211
220
|
var removeDuplicateSelections = React.useCallback(function () {
|
212
221
|
var uniqueAttrArray = [],
|
213
222
|
removedSelectionAreaMatcherArr = [];
|
214
|
-
ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
|
215
|
-
var
|
216
|
-
top =
|
217
|
-
left =
|
218
|
-
height =
|
219
|
-
width =
|
223
|
+
ref === null || ref === void 0 || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
|
224
|
+
var _style = selectorEl.style,
|
225
|
+
top = _style.top,
|
226
|
+
left = _style.left,
|
227
|
+
height = _style.height,
|
228
|
+
width = _style.width;
|
220
229
|
var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
|
221
230
|
if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
|
222
231
|
uniqueAttrArray.push(uniqueAttrStr);
|
@@ -228,13 +237,13 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
228
237
|
|
229
238
|
//clean the duplicate selectionAreaData and selectionArea
|
230
239
|
if (removedSelectionAreaMatcherArr.length) {
|
231
|
-
setSelectionAreas(function (prev) {
|
240
|
+
setSelectionAreas === null || setSelectionAreas === void 0 || setSelectionAreas(function (prev) {
|
232
241
|
var prevValues = deepCloneObject.deepCloneObject(prev);
|
233
242
|
return prevValues.filter(function (item) {
|
234
243
|
return !removedSelectionAreaMatcherArr.includes(item.matcher);
|
235
244
|
});
|
236
245
|
});
|
237
|
-
setSelectionAreaData(function (prev) {
|
246
|
+
setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
|
238
247
|
var prevValues = deepCloneObject.deepCloneObject(prev);
|
239
248
|
return prevValues.filter(function (item) {
|
240
249
|
return !removedSelectionAreaMatcherArr.includes(item.selectionId);
|
@@ -257,14 +266,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
257
266
|
};
|
258
267
|
}, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
|
259
268
|
var handleBodyScroll = function handleBodyScroll() {
|
260
|
-
var headerRowElement = ref.current.querySelector("\n .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
|
261
|
-
headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
|
269
|
+
var headerRowElement = ref.current.querySelector("\n .".concat(blockClass, "__header--container .").concat(blockClass, "__tr")) || new HTMLDivElement();
|
270
|
+
headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === void 0 ? void 0 : contentScrollRef.current.scrollLeft;
|
262
271
|
};
|
263
272
|
React.useEffect(function () {
|
264
|
-
contentScrollRef.current.addEventListener('scroll', function (
|
273
|
+
contentScrollRef.current.addEventListener('scroll', function () {
|
265
274
|
return handleBodyScroll();
|
266
275
|
});
|
267
|
-
var contentScrollElementRef = contentScrollRef.current;
|
276
|
+
var contentScrollElementRef = contentScrollRef.current || new HTMLElement();
|
268
277
|
return function () {
|
269
278
|
contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
|
270
279
|
};
|
@@ -289,12 +298,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
289
298
|
_rollupPluginBabelHelpers.toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
|
290
299
|
var _headerGroups$;
|
291
300
|
var emptyCell = {};
|
292
|
-
(_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
|
301
|
+
headerGroups === null || headerGroups === void 0 || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
|
293
302
|
emptyCell[header.id] = null;
|
294
303
|
});
|
295
304
|
emptyRowData.push(emptyCell);
|
296
305
|
});
|
297
|
-
onDataUpdate(emptyRowData);
|
306
|
+
onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
|
298
307
|
};
|
299
308
|
buildEmptyRows();
|
300
309
|
}
|
@@ -307,9 +316,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
307
316
|
var RenderRow = React.useCallback(function (_ref3) {
|
308
317
|
var index = _ref3.index,
|
309
318
|
style = _ref3.style;
|
310
|
-
var row = rows[index];
|
319
|
+
var row = rows === null || rows === void 0 ? void 0 : rows[index];
|
311
320
|
if (rows && rows.length) {
|
312
|
-
prepareRow(row);
|
321
|
+
prepareRow === null || prepareRow === void 0 || prepareRow(row);
|
313
322
|
var rowProps = propsHelper.prepareProps(row.getRowProps({
|
314
323
|
style: style
|
315
324
|
}), 'key');
|
@@ -364,12 +373,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
364
373
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
365
374
|
ref: spreadsheetBodyRef,
|
366
375
|
className: cx__default["default"]("".concat(blockClass, "__body--container"))
|
367
|
-
}, getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
|
376
|
+
}, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React__default["default"].createElement(reactWindow.FixedSizeList, {
|
368
377
|
className: cx__default["default"]("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
|
369
378
|
height: 400,
|
370
|
-
itemCount: rows.length || defaultEmptyRowCount,
|
379
|
+
itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
|
371
380
|
itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
372
381
|
width: getSpreadsheetWidth.getSpreadsheetWidth({
|
382
|
+
headerGroup: undefined,
|
383
|
+
type: undefined,
|
373
384
|
scrollBarSizeValue: scrollBarSize,
|
374
385
|
totalVisibleColumns: totalVisibleColumns,
|
375
386
|
defaultColumn: defaultColumn,
|
@@ -383,6 +394,7 @@ DataSpreadsheetBody.propTypes = {
|
|
383
394
|
/**
|
384
395
|
* Object containing the active cell coordinates
|
385
396
|
*/
|
397
|
+
/**@ts-ignore */
|
386
398
|
activeCellCoordinates: index["default"].shape({
|
387
399
|
row: index["default"].oneOfType([index["default"].string, index["default"].number]),
|
388
400
|
column: index["default"].oneOfType([index["default"].string, index["default"].number])
|
@@ -390,6 +402,7 @@ DataSpreadsheetBody.propTypes = {
|
|
390
402
|
/**
|
391
403
|
*This is the ref of the button input, which is the active cell element
|
392
404
|
*/
|
405
|
+
/**@ts-ignore */
|
393
406
|
activeCellRef: index["default"].object,
|
394
407
|
/**
|
395
408
|
* Is the user clicking and holding in the data spreadsheet body
|
@@ -406,6 +419,7 @@ DataSpreadsheetBody.propTypes = {
|
|
406
419
|
/**
|
407
420
|
* Default spreadsheet sizing values
|
408
421
|
*/
|
422
|
+
/**@ts-ignore */
|
409
423
|
defaultColumn: index["default"].shape({
|
410
424
|
rowHeight: index["default"].number,
|
411
425
|
rowHeaderWidth: index["default"].number,
|
@@ -507,6 +521,7 @@ DataSpreadsheetBody.propTypes = {
|
|
507
521
|
/**
|
508
522
|
* Prop from react-table used to reorder columns
|
509
523
|
*/
|
524
|
+
/**@ts-ignore */
|
510
525
|
visibleColumns: index["default"].array
|
511
526
|
};
|
512
527
|
|