@carbon/ibm-products 1.12.0 → 1.13.0
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 +60 -13
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +6 -6
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +14 -6
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +60 -13
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -5
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +60 -13
- package/css/index.css.map +1 -1
- package/css/index.min.css +6 -6
- package/css/index.min.css.map +1 -1
- package/es/components/ActionBar/ActionBar.js +3 -1
- package/es/components/ActionBar/ActionBarOverflowItems.js +5 -3
- package/es/components/AddSelect/AddSelectList.js +27 -1
- package/es/components/AddSelect/AddSelectSidebar.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +87 -31
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +87 -33
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -4
- package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +37 -9
- package/lib/components/ActionBar/ActionBar.js +3 -1
- package/lib/components/ActionBar/ActionBarOverflowItems.js +5 -3
- package/lib/components/AddSelect/AddSelectList.js +28 -1
- package/lib/components/AddSelect/AddSelectSidebar.js +15 -11
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +89 -30
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +86 -33
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
- package/lib/components/TagSet/TagSet.js +12 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +37 -9
- package/package.json +9 -9
- package/scss/components/AddSelect/_add-select.scss +14 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +37 -5
- package/scss/components/HTTPErrors/_http-errors.scss +16 -16
- package/scss/components/PageHeader/_page-header.scss +4 -0
@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
6
|
-
var _excluded = ["cellSize", "className", "columns", "data", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
|
6
|
+
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
|
7
7
|
|
8
8
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
9
9
|
|
@@ -17,7 +17,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
17
17
|
*/
|
18
18
|
// Import portions of React that are needed.
|
19
19
|
import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
|
20
|
-
import { useBlockLayout, useTable } from 'react-table';
|
20
|
+
import { useBlockLayout, useTable } from 'react-table';
|
21
|
+
import { px } from '@carbon/layout'; // Other standard imports.
|
21
22
|
|
22
23
|
import PropTypes from 'prop-types';
|
23
24
|
import cx from 'classnames';
|
@@ -35,7 +36,8 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell';
|
|
35
36
|
import { createActiveCellFn } from './utils/createActiveCellFn';
|
36
37
|
import { getCellSize } from './utils/getCellSize';
|
37
38
|
import { handleMultipleKeys } from './utils/handleMultipleKeys';
|
38
|
-
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
|
39
|
+
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
|
40
|
+
import { removeCellSelections } from './utils/removeCellSelections'; // cspell:words rowcount colcount
|
39
41
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
40
42
|
|
41
43
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
@@ -45,6 +47,7 @@ var defaults = {
|
|
45
47
|
cellSize: 'standard',
|
46
48
|
columns: Object.freeze([]),
|
47
49
|
data: Object.freeze([]),
|
50
|
+
defaultEmptyRowCount: 16,
|
48
51
|
onDataUpdate: Object.freeze(function () {}),
|
49
52
|
onActiveCellChange: Object.freeze(function () {}),
|
50
53
|
onSelectionAreaChange: Object.freeze(function () {})
|
@@ -61,6 +64,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
61
64
|
columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
|
62
65
|
_ref$data = _ref.data,
|
63
66
|
data = _ref$data === void 0 ? defaults.data : _ref$data,
|
67
|
+
_ref$defaultEmptyRowC = _ref.defaultEmptyRowCount,
|
68
|
+
defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
|
64
69
|
_ref$onDataUpdate = _ref.onDataUpdate,
|
65
70
|
onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
|
66
71
|
id = _ref.id,
|
@@ -127,6 +132,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
127
132
|
|
128
133
|
var activeKeys = useRef([]);
|
129
134
|
var activeCellRef = useRef();
|
135
|
+
var cellEditorRulerRef = useRef();
|
130
136
|
var defaultColumn = useMemo(function () {
|
131
137
|
return {
|
132
138
|
width: 150,
|
@@ -174,23 +180,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
174
180
|
setCellEditorValue('');
|
175
181
|
setIsEditing(false);
|
176
182
|
cellEditorRef.current.style.display = 'none';
|
177
|
-
}, []); //
|
178
|
-
|
179
|
-
var removeCellSelections = useCallback(function (matcher) {
|
180
|
-
if (matcher && typeof matcher === 'string') {
|
181
|
-
var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
|
182
|
-
|
183
|
-
if (selectionToRemove) {
|
184
|
-
selectionToRemove.remove();
|
185
|
-
}
|
186
|
-
} else {
|
187
|
-
var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
|
188
|
-
|
189
|
-
_toConsumableArray(cellSelections).forEach(function (element) {
|
190
|
-
return element.remove();
|
191
|
-
});
|
192
|
-
}
|
193
|
-
}, [spreadsheetRef]); // Remove cell editor if the active cell coordinates change and save with new cell data, this will
|
183
|
+
}, []); // Remove cell editor if the active cell coordinates change and save with new cell data, this will
|
194
184
|
// happen if you click on another cell while isEditing is true
|
195
185
|
|
196
186
|
useEffect(function () {
|
@@ -200,6 +190,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
200
190
|
var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
|
201
191
|
removeCellEditor();
|
202
192
|
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
|
193
|
+
cellEditorRulerRef.current.textContent = '';
|
203
194
|
}
|
204
195
|
|
205
196
|
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)) {
|
@@ -494,13 +485,14 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
494
485
|
}
|
495
486
|
}
|
496
487
|
}
|
497
|
-
}, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor,
|
488
|
+
}, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas]);
|
498
489
|
|
499
490
|
var startEditMode = function startEditMode() {
|
500
491
|
setIsEditing(true);
|
501
492
|
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;
|
502
493
|
var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
503
494
|
setCellEditorValue(activeCellValue);
|
495
|
+
cellEditorRulerRef.current.textContent = activeCellValue;
|
504
496
|
};
|
505
497
|
|
506
498
|
var handleActiveCellClick = function handleActiveCellClick() {
|
@@ -566,11 +558,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
566
558
|
|
567
559
|
var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
|
568
560
|
startEditMode();
|
569
|
-
};
|
570
|
-
|
561
|
+
};
|
571
562
|
|
572
|
-
var
|
573
|
-
var
|
563
|
+
var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref5) {
|
564
|
+
var type = _ref5.type;
|
574
565
|
|
575
566
|
var submitEditChanges = function submitEditChanges() {
|
576
567
|
var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
|
@@ -579,8 +570,33 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
579
570
|
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
|
580
571
|
};
|
581
572
|
|
573
|
+
removeCellSelections({
|
574
|
+
spreadsheetRef: spreadsheetRef
|
575
|
+
});
|
576
|
+
submitEditChanges();
|
577
|
+
var tempMatcher = uuidv4();
|
578
|
+
var newSelectionArea = {
|
579
|
+
row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
|
580
|
+
column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
|
581
|
+
};
|
582
|
+
setSelectionAreas([{
|
583
|
+
point1: newSelectionArea,
|
584
|
+
point2: newSelectionArea,
|
585
|
+
matcher: tempMatcher,
|
586
|
+
areaCreated: false
|
587
|
+
}]);
|
588
|
+
setCurrentMatcher(tempMatcher);
|
589
|
+
cellEditorRulerRef.current.textContent = '';
|
590
|
+
}; // Update the data
|
591
|
+
|
592
|
+
|
593
|
+
var handleEditSubmit = function handleEditSubmit(event) {
|
594
|
+
var key = event.key;
|
595
|
+
|
582
596
|
if (key === 'Enter') {
|
583
|
-
|
597
|
+
updateSelectionAreaOnCellEditSubmit({
|
598
|
+
type: 'Enter'
|
599
|
+
});
|
584
600
|
setActiveCellCoordinates(function (prev) {
|
585
601
|
return _objectSpread(_objectSpread({}, prev), {}, {
|
586
602
|
row: prev.row === rows.length - 1 ? prev.row : prev.row + 1 // do not move to next cell below if we're already in the last row
|
@@ -591,7 +607,9 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
591
607
|
|
592
608
|
if (key === 'Tab') {
|
593
609
|
event.preventDefault();
|
594
|
-
|
610
|
+
updateSelectionAreaOnCellEditSubmit({
|
611
|
+
type: 'Tab'
|
612
|
+
});
|
595
613
|
setActiveCellCoordinates(function (prev) {
|
596
614
|
return _objectSpread(_objectSpread({}, prev), {}, {
|
597
615
|
column: prev.column === columns.length - 1 ? prev.column : prev.column + 1 // do not move to next cell below if we're already in the last column
|
@@ -619,14 +637,39 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
619
637
|
|
620
638
|
cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
|
621
639
|
(_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
|
640
|
+
var rulerWidth = cellEditorRulerRef.current.offsetWidth;
|
641
|
+
var cellWidth = activeCellRef.current.offsetWidth;
|
642
|
+
|
643
|
+
if (rulerWidth >= cellWidth) {
|
644
|
+
var widthMultiplier = Math.floor(rulerWidth / cellWidth) + 1;
|
645
|
+
var startingColumnPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column;
|
646
|
+
var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
|
647
|
+
var totalColumns = columns.length;
|
648
|
+
var totalRows = rows.length;
|
649
|
+
var totalMultiplierPossible = totalColumns - startingColumnPosition;
|
650
|
+
var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
|
651
|
+
cellEditorRef.current.style.maxHeight = px(totalCellEditorMaxHeight);
|
652
|
+
cellEditorRef.current.style.width = px(cellWidth * (widthMultiplier <= totalMultiplierPossible ? widthMultiplier : totalMultiplierPossible));
|
653
|
+
cellEditorRef.current.style.height = px(cellEditorRef.current.scrollHeight); // adds dynamic height to cell editor
|
654
|
+
// Cell editor has reached max height, we need to add the scrolling back.
|
655
|
+
// We also need to subtract 1 to account for the fact that the cell editor
|
656
|
+
// is placed one pixel below the cell being edited to account for the border
|
657
|
+
|
658
|
+
if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
|
659
|
+
cellEditorRef.current.style.overflow = 'auto';
|
660
|
+
} else {
|
661
|
+
cellEditorRef.current.style.overflow = 'hidden';
|
662
|
+
}
|
663
|
+
}
|
622
664
|
}
|
623
665
|
|
624
666
|
if (!isEditing) {
|
667
|
+
cellEditorRef.current.style.overflow = 'hidden';
|
625
668
|
cellEditorRef.current.style.display = 'none';
|
626
669
|
cellEditorRef.current.blur();
|
627
670
|
activeCellRef.current.focus();
|
628
671
|
}
|
629
|
-
}, [isEditing, activeCellCoordinates, rows]);
|
672
|
+
}, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn]);
|
630
673
|
|
631
674
|
var handleKeyUp = function handleKeyUp(event) {
|
632
675
|
var _activeKeys$current3;
|
@@ -644,7 +687,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
644
687
|
};
|
645
688
|
|
646
689
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
|
647
|
-
className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
|
690
|
+
className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
|
648
691
|
ref: spreadsheetRef,
|
649
692
|
role: "grid",
|
650
693
|
tabIndex: 0,
|
@@ -680,8 +723,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
680
723
|
selectionAreas: selectionAreas,
|
681
724
|
setSelectionAreas: setSelectionAreas,
|
682
725
|
cellSize: cellSize,
|
726
|
+
headerGroups: headerGroups,
|
683
727
|
defaultColumn: defaultColumn,
|
684
728
|
getTableBodyProps: getTableBodyProps,
|
729
|
+
onDataUpdate: onDataUpdate,
|
685
730
|
onActiveCellChange: onActiveCellChange,
|
686
731
|
onSelectionAreaChange: onSelectionAreaChange,
|
687
732
|
prepareRow: prepareRow,
|
@@ -692,7 +737,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
692
737
|
scrollBarSize: scrollBarSize,
|
693
738
|
totalColumnsWidth: totalColumnsWidth,
|
694
739
|
id: id,
|
695
|
-
columns: columns
|
740
|
+
columns: columns,
|
741
|
+
defaultEmptyRowCount: defaultEmptyRowCount
|
696
742
|
}), /*#__PURE__*/React.createElement("button", {
|
697
743
|
onClick: handleActiveCellClick,
|
698
744
|
onKeyDown: handleActiveCellKeyDown,
|
@@ -704,12 +750,17 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
704
750
|
value: cellEditorValue,
|
705
751
|
onKeyDown: handleEditSubmit,
|
706
752
|
onChange: function onChange(event) {
|
707
|
-
|
753
|
+
setCellEditorValue(event.target.value);
|
754
|
+
cellEditorRulerRef.current.textContent = event.target.value;
|
708
755
|
},
|
709
756
|
ref: cellEditorRef,
|
710
757
|
labelText: "",
|
711
758
|
"aria-labelledby": activeCellCoordinates ? "[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]") : null,
|
712
759
|
className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
|
760
|
+
}), /*#__PURE__*/React.createElement("pre", {
|
761
|
+
"aria-hidden": true,
|
762
|
+
ref: cellEditorRulerRef,
|
763
|
+
className: "".concat(blockClass, "__cell-editor-ruler")
|
713
764
|
}));
|
714
765
|
}); // Return a placeholder if not released and not enabled by feature flag
|
715
766
|
|
@@ -746,6 +797,11 @@ DataSpreadsheet.propTypes = {
|
|
746
797
|
*/
|
747
798
|
data: PropTypes.arrayOf(PropTypes.shape),
|
748
799
|
|
800
|
+
/**
|
801
|
+
* Sets the number of empty rows to be created when there is no data provided
|
802
|
+
*/
|
803
|
+
defaultEmptyRowCount: PropTypes.number,
|
804
|
+
|
749
805
|
/**
|
750
806
|
* The spreadsheet id
|
751
807
|
*/
|
@@ -12,6 +12,7 @@ import React, { useRef, useCallback, useEffect, forwardRef } from 'react';
|
|
12
12
|
import PropTypes from 'prop-types';
|
13
13
|
import { FixedSizeList } from 'react-window';
|
14
14
|
import cx from 'classnames';
|
15
|
+
import { px } from '@carbon/layout';
|
15
16
|
import { pkg } from '../../settings';
|
16
17
|
import { deepCloneObject } from '../../global/js/utils/deepCloneObject';
|
17
18
|
import uuidv4 from '../../global/js/utils/uuidv4';
|
@@ -25,8 +26,11 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
25
26
|
var columns = _ref.columns,
|
26
27
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
27
28
|
defaultColumn = _ref.defaultColumn,
|
29
|
+
defaultEmptyRowCount = _ref.defaultEmptyRowCount,
|
28
30
|
getTableBodyProps = _ref.getTableBodyProps,
|
31
|
+
headerGroups = _ref.headerGroups,
|
29
32
|
id = _ref.id,
|
33
|
+
onDataUpdate = _ref.onDataUpdate,
|
30
34
|
prepareRow = _ref.prepareRow,
|
31
35
|
rows = _ref.rows,
|
32
36
|
selectionAreaData = _ref.selectionAreaData,
|
@@ -45,7 +49,11 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
45
49
|
var previousState = usePreviousValue({
|
46
50
|
selectionAreaData: selectionAreaData,
|
47
51
|
clickAndHoldActive: clickAndHoldActive
|
48
|
-
}); //
|
52
|
+
}); // Set custom css property containing the spreadsheet total width
|
53
|
+
|
54
|
+
useEffect(function () {
|
55
|
+
ref === null || ref === void 0 ? void 0 : ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px(totalColumnsWidth + scrollBarSize));
|
56
|
+
}, [ref, scrollBarSize, totalColumnsWidth]); // Call the `onSelectionAreaChange` handler to send selection area data
|
49
57
|
// back to the consumer
|
50
58
|
|
51
59
|
useEffect(function () {
|
@@ -274,42 +282,73 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
274
282
|
setSelectionAreaData: setSelectionAreaData
|
275
283
|
});
|
276
284
|
};
|
277
|
-
}, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]); //
|
285
|
+
}, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]); // Builds the empty rows and calls `onDataUpdate` to set the new empty rows
|
286
|
+
// using defaultEmptyRowCount to determine how many empty rows are created.
|
287
|
+
|
288
|
+
useEffect(function () {
|
289
|
+
if (!(rows !== null && rows !== void 0 && rows.length)) {
|
290
|
+
var buildEmptyRows = function buildEmptyRows() {
|
291
|
+
var emptyRowData = [];
|
292
|
+
|
293
|
+
_toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
|
294
|
+
var _headerGroups$;
|
295
|
+
|
296
|
+
var emptyCell = {};
|
297
|
+
(_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 ? void 0 : _headerGroups$.headers.map(function (header) {
|
298
|
+
emptyCell[header.id] = null;
|
299
|
+
});
|
300
|
+
emptyRowData.push(emptyCell);
|
301
|
+
});
|
302
|
+
|
303
|
+
onDataUpdate(emptyRowData);
|
304
|
+
};
|
305
|
+
|
306
|
+
buildEmptyRows();
|
307
|
+
}
|
308
|
+
}, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
|
309
|
+
|
310
|
+
var RenderEmptyRows = function RenderEmptyRows() {
|
311
|
+
return /*#__PURE__*/React.createElement("div", null);
|
312
|
+
}; // Renders each row/cell in the spreadsheet body
|
313
|
+
|
278
314
|
|
279
315
|
var RenderRow = useCallback(function (_ref3) {
|
280
316
|
var index = _ref3.index,
|
281
317
|
style = _ref3.style;
|
282
318
|
var row = rows[index];
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
"
|
292
|
-
"data-column-index": "header",
|
293
|
-
type: "button",
|
294
|
-
onClick: handleRowHeaderClick(index),
|
295
|
-
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row'))),
|
296
|
-
style: {
|
297
|
-
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
298
|
-
}
|
299
|
-
}, index + 1), row.cells.map(function (cell, index) {
|
300
|
-
return /*#__PURE__*/React.createElement("button", _extends({
|
319
|
+
|
320
|
+
if (rows && rows.length) {
|
321
|
+
prepareRow(row);
|
322
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
|
323
|
+
style: style
|
324
|
+
}), {
|
325
|
+
className: cx("".concat(blockClass, "__tr")),
|
326
|
+
"data-row-index": index
|
327
|
+
}), /*#__PURE__*/React.createElement("button", {
|
301
328
|
tabIndex: -1,
|
302
|
-
"data-row-index":
|
303
|
-
"data-column-index":
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
329
|
+
"data-row-index": index,
|
330
|
+
"data-column-index": "header",
|
331
|
+
type: "button",
|
332
|
+
onClick: handleRowHeaderClick(index),
|
333
|
+
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row'))),
|
334
|
+
style: {
|
335
|
+
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
336
|
+
}
|
337
|
+
}, index + 1), row.cells.map(function (cell, index) {
|
338
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
339
|
+
tabIndex: -1,
|
340
|
+
"data-row-index": cell.row.index,
|
341
|
+
"data-column-index": index
|
342
|
+
}, cell.getCellProps(), {
|
343
|
+
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
|
344
|
+
key: "cell_".concat(index),
|
345
|
+
onMouseDown: handleBodyCellClick(cell, index),
|
346
|
+
onMouseOver: handleBodyCellHover(cell, index),
|
347
|
+
onFocus: function onFocus() {},
|
348
|
+
type: "button"
|
349
|
+
}), cell.render('Cell'));
|
350
|
+
}));
|
351
|
+
}
|
313
352
|
}, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);
|
314
353
|
var spreadsheetBodyRef = useRef();
|
315
354
|
return /*#__PURE__*/React.createElement("div", _extends({
|
@@ -318,10 +357,10 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
318
357
|
}, getTableBodyProps()), /*#__PURE__*/React.createElement(FixedSizeList, {
|
319
358
|
className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
|
320
359
|
height: 400,
|
321
|
-
itemCount: rows.length,
|
360
|
+
itemCount: rows.length || defaultEmptyRowCount,
|
322
361
|
itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
323
362
|
width: totalColumnsWidth + scrollBarSize
|
324
|
-
}, RenderRow));
|
363
|
+
}, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
|
325
364
|
});
|
326
365
|
DataSpreadsheetBody.propTypes = {
|
327
366
|
/**
|
@@ -356,11 +395,21 @@ DataSpreadsheetBody.propTypes = {
|
|
356
395
|
width: PropTypes.number
|
357
396
|
}),
|
358
397
|
|
398
|
+
/**
|
399
|
+
* Sets the number of empty rows to be created when there is no data provided
|
400
|
+
*/
|
401
|
+
defaultEmptyRowCount: PropTypes.number,
|
402
|
+
|
359
403
|
/**
|
360
404
|
* Function to set table body prop values
|
361
405
|
*/
|
362
406
|
getTableBodyProps: PropTypes.func,
|
363
407
|
|
408
|
+
/**
|
409
|
+
* Headers provided from useTable hook
|
410
|
+
*/
|
411
|
+
headerGroups: PropTypes.arrayOf(PropTypes.object),
|
412
|
+
|
364
413
|
/**
|
365
414
|
* The spreadsheet id
|
366
415
|
*/
|
@@ -371,6 +420,11 @@ DataSpreadsheetBody.propTypes = {
|
|
371
420
|
*/
|
372
421
|
onActiveCellChange: PropTypes.func,
|
373
422
|
|
423
|
+
/**
|
424
|
+
* The event handler that is called to set the rows for the empty spreadsheet
|
425
|
+
*/
|
426
|
+
onDataUpdate: PropTypes.func,
|
427
|
+
|
374
428
|
/**
|
375
429
|
* The event handler that is called when the selection areas change
|
376
430
|
*/
|
@@ -5,7 +5,8 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { useEffect } from 'react';
|
8
|
-
import { pkg } from '../../../settings';
|
8
|
+
import { pkg } from '../../../settings';
|
9
|
+
import { removeCellSelections } from '../utils/removeCellSelections'; // Click outside useEffect for spreadsheet
|
9
10
|
|
10
11
|
export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
|
11
12
|
var spreadsheetRef = _ref.spreadsheetRef,
|
@@ -14,7 +15,6 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
|
|
14
15
|
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
15
16
|
setSelectionAreas = _ref.setSelectionAreas,
|
16
17
|
removeActiveCell = _ref.removeActiveCell,
|
17
|
-
removeCellSelections = _ref.removeCellSelections,
|
18
18
|
setContainerHasFocus = _ref.setContainerHasFocus,
|
19
19
|
activeKeys = _ref.activeKeys,
|
20
20
|
removeCellEditor = _ref.removeCellEditor;
|
@@ -27,7 +27,9 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
|
|
27
27
|
setActiveCellCoordinates(null);
|
28
28
|
setSelectionAreas([]);
|
29
29
|
removeActiveCell();
|
30
|
-
removeCellSelections(
|
30
|
+
removeCellSelections({
|
31
|
+
spreadsheetRef: spreadsheetRef
|
32
|
+
});
|
31
33
|
setContainerHasFocus(false);
|
32
34
|
removeCellEditor();
|
33
35
|
activeKeys.current = [];
|
@@ -37,5 +39,5 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
|
|
37
39
|
return function () {
|
38
40
|
document.removeEventListener('click', handleOutsideClick);
|
39
41
|
};
|
40
|
-
}, [spreadsheetRef, removeActiveCell,
|
42
|
+
}, [spreadsheetRef, removeActiveCell, activeKeys, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
|
41
43
|
};
|
@@ -13,10 +13,9 @@ export var HTTPErrorSvg403 = function HTTPErrorSvg403(_ref) {
|
|
13
13
|
return /*#__PURE__*/React.createElement("svg", {
|
14
14
|
xmlns: "http://www.w3.org/2000/svg",
|
15
15
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
16
|
-
width: 1584,
|
17
|
-
height: 916,
|
18
16
|
viewBox: "0 0 1584 916",
|
19
|
-
className: className
|
17
|
+
className: className,
|
18
|
+
preserveAspectRatio: "xMinYMax meet"
|
20
19
|
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
21
20
|
id: "prefix__clip-path"
|
22
21
|
}, /*#__PURE__*/React.createElement("path", {
|
@@ -13,10 +13,9 @@ export var HTTPErrorSvg404 = function HTTPErrorSvg404(_ref) {
|
|
13
13
|
return /*#__PURE__*/React.createElement("svg", {
|
14
14
|
xmlns: "http://www.w3.org/2000/svg",
|
15
15
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
16
|
-
width: 1584,
|
17
|
-
height: 916,
|
18
16
|
viewBox: "0 0 1584 916",
|
19
|
-
className: className
|
17
|
+
className: className,
|
18
|
+
preserveAspectRatio: "xMinYMax meet"
|
20
19
|
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
21
20
|
id: "prefix__clip-path"
|
22
21
|
}, /*#__PURE__*/React.createElement("path", {
|
@@ -13,10 +13,9 @@ export var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
|
|
13
13
|
return /*#__PURE__*/React.createElement("svg", {
|
14
14
|
xmlns: "http://www.w3.org/2000/svg",
|
15
15
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
16
|
-
width: 1584,
|
17
|
-
height: 916,
|
18
16
|
viewBox: "0 0 1584 916",
|
19
|
-
className: className
|
17
|
+
className: className,
|
18
|
+
preserveAspectRatio: "xMinYMax meet"
|
20
19
|
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
21
20
|
id: "prefix__clip-path"
|
22
21
|
}, /*#__PURE__*/React.createElement("path", {
|
@@ -33,15 +33,14 @@ var allTagsModalSearchThreshold = 10; // Default values for props
|
|
33
33
|
|
34
34
|
var defaults = {
|
35
35
|
align: 'start',
|
36
|
-
allTagsModalTarget: document.body,
|
36
|
+
// allTagsModalTarget: document.body,
|
37
37
|
overflowAlign: 'center',
|
38
38
|
overflowDirection: 'bottom'
|
39
39
|
};
|
40
40
|
export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
41
41
|
var _ref$align = _ref.align,
|
42
42
|
align = _ref$align === void 0 ? defaults.align : _ref$align,
|
43
|
-
|
44
|
-
allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
|
43
|
+
allTagsModalTargetIn = _ref.allTagsModalTarget,
|
45
44
|
className = _ref.className,
|
46
45
|
maxVisible = _ref.maxVisible,
|
47
46
|
_ref$overflowAlign = _ref.overflowAlign,
|
@@ -88,10 +87,20 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
88
87
|
|
89
88
|
var overflowTag = useRef(null);
|
90
89
|
|
90
|
+
var _useState11 = useState(null),
|
91
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
92
|
+
allTagsModalTarget = _useState12[0],
|
93
|
+
setAllTagsModalTarget = _useState12[1];
|
94
|
+
|
91
95
|
var handleShowAllClick = function handleShowAllClick() {
|
92
96
|
setShowAllModalOpen(true);
|
93
97
|
};
|
94
98
|
|
99
|
+
useEffect(function () {
|
100
|
+
var _document;
|
101
|
+
|
102
|
+
setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
|
103
|
+
}, [allTagsModalTargetIn]);
|
95
104
|
useEffect(function () {
|
96
105
|
var newSizingTags = []; // create sizing tags
|
97
106
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
-
var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
3
|
+
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
4
4
|
|
5
5
|
/**
|
6
6
|
* Copyright IBM Corp. 2021, 2021
|
@@ -31,6 +31,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
31
31
|
var backgroundColor = _ref.backgroundColor,
|
32
32
|
className = _ref.className,
|
33
33
|
kind = _ref.kind,
|
34
|
+
icon = _ref.icon,
|
34
35
|
initials = _ref.initials,
|
35
36
|
image = _ref.image,
|
36
37
|
imageDescription = _ref.imageDescription,
|
@@ -62,18 +63,40 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
62
63
|
return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
|
63
64
|
};
|
64
65
|
|
65
|
-
var
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
66
|
+
var getFillItem = function getFillItem() {
|
67
|
+
if (image) {
|
68
|
+
return function () {
|
69
|
+
return /*#__PURE__*/React.createElement("img", {
|
70
|
+
alt: imageDescription,
|
71
|
+
src: image,
|
72
|
+
className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
|
73
|
+
});
|
74
|
+
};
|
75
|
+
}
|
76
|
+
|
77
|
+
if (initials) {
|
78
|
+
return formatInitials;
|
79
|
+
}
|
80
|
+
|
81
|
+
if (kind && size) {
|
82
|
+
return icons[kind][size];
|
83
|
+
}
|
84
|
+
|
85
|
+
return icon;
|
86
|
+
}; // if user doesn't provide a color just generate a random one
|
87
|
+
|
88
|
+
|
89
|
+
var getRandomColor = function getRandomColor() {
|
90
|
+
var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
|
91
|
+
return colors[Math.floor(Math.random() * colors.length)];
|
92
|
+
};
|
93
|
+
|
94
|
+
var FillItem = getFillItem();
|
72
95
|
|
73
96
|
var renderUserProfileImage = function renderUserProfileImage() {
|
74
97
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
75
98
|
ref: ref,
|
76
|
-
className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
|
99
|
+
className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
|
77
100
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
|
78
101
|
};
|
79
102
|
|
@@ -97,6 +120,11 @@ UserProfileImage.propTypes = {
|
|
97
120
|
*/
|
98
121
|
className: PropTypes.string,
|
99
122
|
|
123
|
+
/**
|
124
|
+
* Provide a custom icon to use if you need to use an icon other than the included ones
|
125
|
+
*/
|
126
|
+
icon: PropTypes.object,
|
127
|
+
|
100
128
|
/**
|
101
129
|
* When passing the image prop, supply a full path to the image to be displayed.
|
102
130
|
*/
|
@@ -93,6 +93,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
93
93
|
className: "".concat(blockClass, "__hidden-sizing-items"),
|
94
94
|
"aria-hidden": true,
|
95
95
|
ref: sizingRef
|
96
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
97
|
+
"aria-hidden": false
|
96
98
|
}, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
|
97
99
|
className: "".concat(blockClass, "__hidden-sizing-item"),
|
98
100
|
overflowAriaLabel: "hidden sizing overflow items",
|
@@ -108,7 +110,7 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
108
110
|
key: "hidden-item-".concat(key),
|
109
111
|
className: "".concat(blockClass, "__hidden-sizing-item")
|
110
112
|
}));
|
111
|
-
})));
|
113
|
+
}))));
|
112
114
|
}, [actions]); // creates displayed items based on actions, displayCount and alignment
|
113
115
|
|
114
116
|
(0, _react.useEffect)(function () {
|