@carbon/ibm-products 1.9.0 → 1.10.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +123 -5628
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +45 -3424
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +91 -3894
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +91 -3895
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +11 -6
- package/es/components/AddSelect/AddSelectColumn.js +44 -7
- package/es/components/ButtonMenu/ButtonMenu.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +316 -133
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +113 -69
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +22 -5
- package/es/components/DataSpreadsheet/checkActiveHeaderCell.js +34 -0
- package/es/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/es/components/InlineEdit/InlineEdit.js +11 -21
- package/es/components/OptionsTile/OptionsTile.js +11 -1
- package/es/components/PageHeader/PageHeader.js +48 -40
- package/es/components/PageHeader/PageHeaderUtils.js +3 -7
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +2 -1
- package/lib/components/AddSelect/AddSelect.js +11 -6
- package/lib/components/AddSelect/AddSelectColumn.js +55 -13
- package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +317 -134
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +112 -70
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +24 -5
- package/lib/components/DataSpreadsheet/checkActiveHeaderCell.js +45 -0
- package/lib/components/DataSpreadsheet/createActiveCellFn.js +3 -1
- package/lib/components/InlineEdit/InlineEdit.js +10 -20
- package/lib/components/OptionsTile/OptionsTile.js +11 -1
- package/lib/components/PageHeader/PageHeader.js +47 -40
- package/lib/components/PageHeader/PageHeaderUtils.js +3 -7
- package/lib/components/TagSet/TagSet.js +13 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +2 -1
- package/package.json +14 -14
- package/scss/components/AddSelect/_add-select.scss +27 -14
- package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
- package/scss/components/CreateModal/_create-modal.scss +1 -0
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +1 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +12 -7
- package/scss/components/InlineEdit/_inline-edit.scss +20 -11
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/LoadingBar/_loading-bar.scss +13 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -0
- package/scss/components/PageHeader/_page-header.scss +2 -0
- package/scss/components/SidePanel/_side-panel.scss +11 -4
- package/scss/components/StatusIcon/_status-icon.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +9 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -0
@@ -11,6 +11,8 @@ exports.DataSpreadsheetBody = void 0;
|
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
14
16
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
15
17
|
|
16
18
|
var _react = _interopRequireWildcard(require("react"));
|
@@ -29,6 +31,8 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
|
29
31
|
|
30
32
|
var _createCellSelectionArea = require("./createCellSelectionArea");
|
31
33
|
|
34
|
+
var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
|
35
|
+
|
32
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
33
37
|
|
34
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -40,9 +44,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
40
44
|
* LICENSE file in the root directory of this source tree.
|
41
45
|
*/
|
42
46
|
var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
|
43
|
-
|
44
|
-
var
|
45
|
-
|
47
|
+
var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
48
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
49
|
+
defaultColumn = _ref.defaultColumn,
|
46
50
|
getTableBodyProps = _ref.getTableBodyProps,
|
47
51
|
id = _ref.id,
|
48
52
|
prepareRow = _ref.prepareRow,
|
@@ -57,7 +61,8 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
57
61
|
setClickAndHoldActive = _ref.setClickAndHoldActive,
|
58
62
|
currentMatcher = _ref.currentMatcher,
|
59
63
|
setCurrentMatcher = _ref.setCurrentMatcher;
|
60
|
-
// Create cell selection areas based on selectionAreas array
|
64
|
+
var currentMatcherRef = ref; // Create cell selection areas based on selectionAreas array
|
65
|
+
|
61
66
|
(0, _react.useEffect)(function () {
|
62
67
|
if (selectionAreas && selectionAreas.length) {
|
63
68
|
selectionAreas.map(function (area) {
|
@@ -97,7 +102,6 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
97
102
|
row: Number(cellButton.getAttribute('data-row-index')),
|
98
103
|
column: Number(cellButton.getAttribute('data-column-index'))
|
99
104
|
};
|
100
|
-
setCurrentMatcher(null);
|
101
105
|
setSelectionAreas(function (prev) {
|
102
106
|
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
103
107
|
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
@@ -122,11 +126,16 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
122
126
|
return;
|
123
127
|
}
|
124
128
|
|
125
|
-
var
|
126
|
-
return item.matcher
|
129
|
+
var notYetCreatedSelections = selectionAreaClone.filter(function (item) {
|
130
|
+
return !item.areaCreated && item.matcher === currentMatcher;
|
127
131
|
});
|
128
|
-
|
129
|
-
|
132
|
+
var previouslyCreatedSelectionAreas = selectionAreaClone.filter(function (item) {
|
133
|
+
return item.point2 && item.areaCreated;
|
134
|
+
}); // We want to ensure that there is only ever one item in selectionAreas
|
135
|
+
// that has not been created yet. This item's point1 values will always
|
136
|
+
// be equal to the activeCellCoordinates
|
137
|
+
|
138
|
+
setSelectionAreas([].concat((0, _toConsumableArray2.default)(notYetCreatedSelections), (0, _toConsumableArray2.default)(previouslyCreatedSelectionAreas)));
|
130
139
|
}
|
131
140
|
};
|
132
141
|
|
@@ -134,7 +143,7 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
134
143
|
return function () {
|
135
144
|
document.removeEventListener('mouseup', handleMouseUp);
|
136
145
|
};
|
137
|
-
}, [selectionAreas, currentMatcher, setSelectionAreas, setClickAndHoldActive, setCurrentMatcher]); // Make sure that if the cellSize prop changes, the active
|
146
|
+
}, [selectionAreas, currentMatcher, setSelectionAreas, setClickAndHoldActive, setCurrentMatcher, ref]); // Make sure that if the cellSize prop changes, the active
|
138
147
|
// cell also gets updated with the new size
|
139
148
|
|
140
149
|
(0, _react.useEffect)(function () {
|
@@ -147,67 +156,97 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
147
156
|
}, [defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight]); // onClick fn for each cell in the data spreadsheet body,
|
148
157
|
// adds the active cell highlight
|
149
158
|
|
150
|
-
var handleBodyCellClick = (0, _react.useCallback)(function (
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
var tempMatcher = (0, _uuidv.default)();
|
158
|
-
setActiveCellCoordinates(activeCoordinates); // prevent multiple selections unless cmd key is held
|
159
|
-
// meaning that selectionAreas should only have one item by default
|
160
|
-
|
161
|
-
if (isHoldingCommandKey) {
|
162
|
-
setSelectionAreas(function (prev) {
|
163
|
-
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
164
|
-
point1: activeCoordinates,
|
165
|
-
matcher: tempMatcher
|
166
|
-
}]);
|
167
|
-
});
|
168
|
-
} else {
|
169
|
-
// remove all previous cell selections
|
170
|
-
var cellSelections = spreadsheetBodyRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
|
171
|
-
Array.from(cellSelections).forEach(function (element) {
|
172
|
-
return element.remove();
|
173
|
-
});
|
174
|
-
setSelectionAreas([{
|
175
|
-
point1: activeCoordinates,
|
176
|
-
matcher: tempMatcher
|
177
|
-
}]);
|
178
|
-
}
|
179
|
-
|
180
|
-
setCurrentMatcher(tempMatcher);
|
181
|
-
setClickAndHoldActive(true);
|
182
|
-
}, [setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher]);
|
183
|
-
var handleBodyCellHover = (0, _react.useCallback)(function (event, cell, columnIndex) {
|
184
|
-
if (clickAndHoldActive) {
|
185
|
-
var cellCoordinates = {
|
159
|
+
var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {
|
160
|
+
return function (event) {
|
161
|
+
event.preventDefault();
|
162
|
+
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
163
|
+
var isHoldingShiftKey = event.shiftKey;
|
164
|
+
setContainerHasFocus(true);
|
165
|
+
var activeCoordinates = {
|
186
166
|
row: cell.row.index,
|
187
167
|
column: columnIndex
|
188
168
|
};
|
189
|
-
|
190
|
-
|
169
|
+
var tempMatcher = (0, _uuidv.default)(); // prevent multiple selections unless cmd key is held
|
170
|
+
// meaning that selectionAreas should only have one item by default
|
191
171
|
|
192
|
-
|
172
|
+
if (isHoldingCommandKey) {
|
173
|
+
setActiveCellCoordinates(activeCoordinates);
|
174
|
+
setCurrentMatcher(tempMatcher);
|
175
|
+
setSelectionAreas(function (prev) {
|
176
|
+
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
177
|
+
point1: activeCoordinates,
|
178
|
+
matcher: tempMatcher
|
179
|
+
}]);
|
180
|
+
});
|
181
|
+
} else if (isHoldingShiftKey) {
|
182
|
+
setContainerHasFocus(true);
|
183
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
193
184
|
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
194
185
|
return item.matcher === currentMatcher;
|
195
|
-
});
|
186
|
+
});
|
196
187
|
|
197
188
|
if (indexOfItemToUpdate === -1) {
|
198
|
-
|
199
|
-
|
189
|
+
// There is always a selectionArea with a point1 object that updates
|
190
|
+
// whenever the activeCellCoordinates update, we should always be able
|
191
|
+
// to find an index, but if we do not for some reason we should return
|
192
|
+
// at this point.
|
193
|
+
return;
|
194
|
+
} else {
|
195
|
+
// Update the selectionArea that was found, do not update currentMatcher
|
196
|
+
selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
|
197
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
|
198
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
199
|
+
selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
|
200
|
+
setSelectionAreas(selectionAreaClone);
|
201
|
+
}
|
202
|
+
} else {
|
203
|
+
setActiveCellCoordinates(activeCoordinates); // remove all previous cell selections
|
200
204
|
|
205
|
+
var cellSelections = spreadsheetBodyRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
|
206
|
+
(0, _toConsumableArray2.default)(cellSelections).forEach(function (element) {
|
207
|
+
return element.remove();
|
208
|
+
});
|
209
|
+
setSelectionAreas([{
|
210
|
+
point1: activeCoordinates,
|
211
|
+
matcher: tempMatcher
|
212
|
+
}]);
|
213
|
+
setCurrentMatcher(tempMatcher);
|
214
|
+
}
|
201
215
|
|
202
|
-
|
203
|
-
|
204
|
-
|
216
|
+
currentMatcherRef.current = tempMatcher;
|
217
|
+
setClickAndHoldActive(true);
|
218
|
+
};
|
219
|
+
}, [currentMatcherRef, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher]);
|
220
|
+
var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
|
221
|
+
return function () {
|
222
|
+
if (clickAndHoldActive) {
|
223
|
+
var cellCoordinates = {
|
224
|
+
row: cell.row.index,
|
225
|
+
column: columnIndex
|
226
|
+
};
|
227
|
+
setSelectionAreas(function (prev) {
|
228
|
+
var _selectionAreaClone$i, _selectionAreaClone$i2;
|
205
229
|
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
230
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
231
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
232
|
+
return item.matcher === currentMatcher;
|
233
|
+
}); // No items in the array match up with the currentMatcher value
|
234
|
+
|
235
|
+
if (indexOfItemToUpdate === -1) {
|
236
|
+
return prev;
|
237
|
+
} // Do not update state if you're still hovering on the same cell
|
238
|
+
|
239
|
+
|
240
|
+
if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
|
241
|
+
return prev;
|
242
|
+
}
|
243
|
+
|
244
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
|
245
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
246
|
+
return selectionAreaClone;
|
247
|
+
});
|
248
|
+
}
|
249
|
+
};
|
211
250
|
}, [clickAndHoldActive, currentMatcher, setSelectionAreas]); // Renders each cell in the spreadsheet body
|
212
251
|
|
213
252
|
var RenderRow = (0, _react.useCallback)(function (_ref2) {
|
@@ -225,7 +264,7 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
225
264
|
"data-row-index": index,
|
226
265
|
"data-column-index": "header",
|
227
266
|
type: "button",
|
228
|
-
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element")),
|
267
|
+
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row'))),
|
229
268
|
style: {
|
230
269
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
231
270
|
}
|
@@ -237,17 +276,13 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
237
276
|
}, cell.getCellProps(), {
|
238
277
|
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
|
239
278
|
key: "cell_".concat(index),
|
240
|
-
onMouseDown:
|
241
|
-
|
242
|
-
},
|
243
|
-
onMouseOver: function onMouseOver(event) {
|
244
|
-
return handleBodyCellHover(event, cell, index);
|
245
|
-
},
|
279
|
+
onMouseDown: handleBodyCellClick(cell, index),
|
280
|
+
onMouseOver: handleBodyCellHover(cell, index),
|
246
281
|
onFocus: function onFocus() {},
|
247
282
|
type: "button"
|
248
283
|
}), cell.render('Cell'));
|
249
284
|
}));
|
250
|
-
}, [prepareRow, rows, defaultColumn.rowHeaderWidth, handleBodyCellClick, handleBodyCellHover]);
|
285
|
+
}, [prepareRow, rows, defaultColumn.rowHeaderWidth, handleBodyCellClick, handleBodyCellHover, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas]);
|
251
286
|
var spreadsheetBodyRef = (0, _react.useRef)();
|
252
287
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
253
288
|
ref: spreadsheetBodyRef,
|
@@ -259,10 +294,17 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
259
294
|
itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
260
295
|
width: totalColumnsWidth + scrollBarSize
|
261
296
|
}, RenderRow));
|
262
|
-
};
|
263
|
-
|
297
|
+
});
|
264
298
|
exports.DataSpreadsheetBody = DataSpreadsheetBody;
|
265
299
|
DataSpreadsheetBody.propTypes = {
|
300
|
+
/**
|
301
|
+
* Object containing the active cell coordinates
|
302
|
+
*/
|
303
|
+
activeCellCoordinates: _propTypes.default.shape({
|
304
|
+
row: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
305
|
+
column: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
306
|
+
}),
|
307
|
+
|
266
308
|
/**
|
267
309
|
* Is the user clicking and holding in the data spreadsheet body
|
268
310
|
*/
|
@@ -9,6 +9,8 @@ exports.DataSpreadsheetHeader = void 0;
|
|
9
9
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
11
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
|
+
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
13
15
|
|
14
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
@@ -17,6 +19,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
19
|
|
18
20
|
var _settings = require("../../settings");
|
19
21
|
|
22
|
+
var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
|
23
|
+
|
20
24
|
/**
|
21
25
|
* Copyright IBM Corp. 2022, 2022
|
22
26
|
*
|
@@ -26,8 +30,10 @@ var _settings = require("../../settings");
|
|
26
30
|
var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
|
27
31
|
|
28
32
|
var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
29
|
-
var
|
30
|
-
|
33
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
34
|
+
defaultColumn = _ref.defaultColumn,
|
35
|
+
headerGroups = _ref.headerGroups,
|
36
|
+
selectionAreas = _ref.selectionAreas;
|
31
37
|
return /*#__PURE__*/_react.default.createElement("div", {
|
32
38
|
className: (0, _classnames.default)("".concat(blockClass, "__header--container"))
|
33
39
|
}, headerGroups.map(function (headerGroup, index) {
|
@@ -40,7 +46,7 @@ var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
|
40
46
|
"data-column-index": "header",
|
41
47
|
type: "button",
|
42
48
|
tabIndex: -1,
|
43
|
-
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element")),
|
49
|
+
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header')),
|
44
50
|
style: {
|
45
51
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
|
46
52
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
@@ -55,7 +61,7 @@ var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
|
55
61
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
56
62
|
}
|
57
63
|
}, column.getHeaderProps(), {
|
58
|
-
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element")),
|
64
|
+
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column'))),
|
59
65
|
type: "button"
|
60
66
|
}), column.render('Header'));
|
61
67
|
}));
|
@@ -64,6 +70,14 @@ var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
|
64
70
|
|
65
71
|
exports.DataSpreadsheetHeader = DataSpreadsheetHeader;
|
66
72
|
DataSpreadsheetHeader.propTypes = {
|
73
|
+
/**
|
74
|
+
* Object containing the active cell coordinates
|
75
|
+
*/
|
76
|
+
activeCellCoordinates: _propTypes.default.shape({
|
77
|
+
row: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
78
|
+
column: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
79
|
+
}),
|
80
|
+
|
67
81
|
/**
|
68
82
|
* Default spreadsheet sizing values
|
69
83
|
*/
|
@@ -76,5 +90,10 @@ DataSpreadsheetHeader.propTypes = {
|
|
76
90
|
/**
|
77
91
|
* Headers provided from useTable hook
|
78
92
|
*/
|
79
|
-
headerGroups: _propTypes.default.arrayOf(_propTypes.default.object)
|
93
|
+
headerGroups: _propTypes.default.arrayOf(_propTypes.default.object),
|
94
|
+
|
95
|
+
/**
|
96
|
+
* All of the cell selection area items
|
97
|
+
*/
|
98
|
+
selectionAreas: _propTypes.default.arrayOf(_propTypes.default.object)
|
80
99
|
};
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.checkActiveHeaderCell = void 0;
|
9
|
+
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _deepCloneObject = require("../../global/js/utils/deepCloneObject");
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Copyright IBM Corp. 2022, 2022
|
16
|
+
*
|
17
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
19
|
+
*/
|
20
|
+
// Determines if a row or column header cell should receive a highlight/active background color
|
21
|
+
// Check each object in selectionAreas and see if the headerIndex is between
|
22
|
+
// point1.row and point2.row, inclusive
|
23
|
+
var checkActiveHeaderCell = function checkActiveHeaderCell(headerIndex, selectionAreas, headerType) {
|
24
|
+
var areasCloned = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
25
|
+
var activeRowIndexes = [];
|
26
|
+
areasCloned.forEach(function (area) {
|
27
|
+
var _area$point, _area$point2, _area$point3, _area$point4;
|
28
|
+
|
29
|
+
var greatestRowIndex = Math.max((_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[headerType], (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[headerType]);
|
30
|
+
var lowestRowIndex = Math.min((_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[headerType], (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[headerType]);
|
31
|
+
|
32
|
+
for (var i = lowestRowIndex; i <= greatestRowIndex; i++) {
|
33
|
+
activeRowIndexes.push(i);
|
34
|
+
}
|
35
|
+
});
|
36
|
+
var activeRowIndexesNoDuplicates = (0, _toConsumableArray2.default)(new Set(activeRowIndexes));
|
37
|
+
|
38
|
+
if (areasCloned !== null && areasCloned !== void 0 && areasCloned.length && activeRowIndexesNoDuplicates.includes(headerIndex)) {
|
39
|
+
return true;
|
40
|
+
}
|
41
|
+
|
42
|
+
return false;
|
43
|
+
};
|
44
|
+
|
45
|
+
exports.checkActiveHeaderCell = checkActiveHeaderCell;
|
@@ -24,7 +24,8 @@ var createActiveCellFn = function createActiveCellFn(_ref) {
|
|
24
24
|
_ref$blockClass = _ref.blockClass,
|
25
25
|
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
26
26
|
onActiveCellChange = _ref.onActiveCellChange,
|
27
|
-
activeCellValue = _ref.activeCellValue
|
27
|
+
activeCellValue = _ref.activeCellValue,
|
28
|
+
handleActiveCellMouseEnter = _ref.handleActiveCellMouseEnter;
|
28
29
|
|
29
30
|
if (!coords) {
|
30
31
|
return;
|
@@ -39,6 +40,7 @@ var createActiveCellFn = function createActiveCellFn(_ref) {
|
|
39
40
|
};
|
40
41
|
var activeCellButton = (contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"))) || document.createElement('button');
|
41
42
|
activeCellButton.classList.add("".concat(blockClass, "__active-cell--highlight"), "".concat(blockClass, "--interactive-cell-element"));
|
43
|
+
activeCellButton.addEventListener('mouseenter', handleActiveCellMouseEnter);
|
42
44
|
activeCellButton.style.width = (0, _layout.px)(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetWidth);
|
43
45
|
activeCellButton.style.height = (0, _layout.px)(placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetHeight);
|
44
46
|
activeCellButton.style.left = (0, _layout.px)(relativePosition.left);
|
@@ -31,7 +31,7 @@ var _carbonComponentsReact = require("carbon-components-react");
|
|
31
31
|
|
32
32
|
var _iconsReact = require("@carbon/icons-react");
|
33
33
|
|
34
|
-
var _excluded = ["cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"
|
34
|
+
var _excluded = ["cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
|
35
35
|
|
36
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
37
37
|
|
@@ -72,8 +72,6 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
72
72
|
_ref$size = _ref.size,
|
73
73
|
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
74
74
|
value = _ref.value,
|
75
|
-
warn = _ref.warn,
|
76
|
-
warnText = _ref.warnText,
|
77
75
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
78
76
|
var refInput = (0, _react.useRef)(null);
|
79
77
|
var localRef = (0, _react.useRef)(null);
|
@@ -89,9 +87,11 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
89
87
|
internalValue = _useState4[0],
|
90
88
|
setInternalValue = _useState4[1];
|
91
89
|
|
92
|
-
var showValidation = invalid || warn;
|
93
|
-
|
94
|
-
var
|
90
|
+
var showValidation = invalid; // || warn;
|
91
|
+
|
92
|
+
var validationText = invalidText; // || warnText;
|
93
|
+
|
94
|
+
var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null;
|
95
95
|
|
96
96
|
var doSetEditing = function doSetEditing(value) {
|
97
97
|
if (value === false) {
|
@@ -243,7 +243,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
|
|
243
243
|
_react.default.createElement("div", {
|
244
244
|
className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
|
245
245
|
className, // Apply any supplied class names to the main HTML element.
|
246
|
-
"".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--
|
246
|
+
"".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), refInput.current && refInput.current.scrollWidth > refInput.current.offsetWidth), _cx)),
|
247
247
|
onClick: handleEdit // disabled eslint for click handler
|
248
248
|
,
|
249
249
|
onBlur: handleBlur,
|
@@ -375,14 +375,14 @@ InlineEdit.propTypes = {
|
|
375
375
|
/**
|
376
376
|
* method called on input event (it's a React thing onChange behaves like on input).
|
377
377
|
*
|
378
|
-
* NOTE: caller to handle invalid
|
378
|
+
* NOTE: caller to handle invalid states and associated text
|
379
379
|
*/
|
380
380
|
onChange: _propTypes.default.func,
|
381
381
|
|
382
382
|
/**
|
383
383
|
* method called on change event
|
384
384
|
*
|
385
|
-
* NOTE: caller to handle invalid
|
385
|
+
* NOTE: caller to handle invalid states and associated text
|
386
386
|
*/
|
387
387
|
onSave: _propTypes.default.func,
|
388
388
|
|
@@ -404,15 +404,5 @@ InlineEdit.propTypes = {
|
|
404
404
|
/**
|
405
405
|
* initial/unedited value
|
406
406
|
*/
|
407
|
-
value: _propTypes.default.string
|
408
|
-
|
409
|
-
/**
|
410
|
-
* set warn state for input
|
411
|
-
*/
|
412
|
-
warn: _propTypes.default.bool,
|
413
|
-
|
414
|
-
/**
|
415
|
-
* text shown when warn true
|
416
|
-
*/
|
417
|
-
warnText: _propTypes.default.string
|
407
|
+
value: _propTypes.default.string
|
418
408
|
};
|
@@ -204,9 +204,19 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
204
204
|
} else if (locked) {
|
205
205
|
Icon = _iconsReact.Locked16;
|
206
206
|
summaryClasses.push("".concat(blockClass, "__summary--locked"));
|
207
|
+
|
208
|
+
if (!text) {
|
209
|
+
text = lockedText;
|
210
|
+
}
|
211
|
+
}
|
212
|
+
|
213
|
+
var hasValidationState = invalid || warn || locked;
|
214
|
+
var summaryHidden = !hasValidationState && enabled === false;
|
215
|
+
|
216
|
+
if (summaryHidden) {
|
217
|
+
summaryClasses.push("".concat(blockClass, "__summary--hidden"));
|
207
218
|
}
|
208
219
|
|
209
|
-
var summaryHidden = enabled === false;
|
210
220
|
return /*#__PURE__*/_react.default.createElement("div", {
|
211
221
|
className: "".concat(blockClass, "__title")
|
212
222
|
}, /*#__PURE__*/_react.default.createElement("h6", {
|