@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.
Files changed (47) hide show
  1. package/css/index-full-carbon.css +60 -13
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +6 -6
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +14 -6
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +60 -13
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +5 -5
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +60 -13
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +6 -6
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ActionBar/ActionBar.js +3 -1
  18. package/es/components/ActionBar/ActionBarOverflowItems.js +5 -3
  19. package/es/components/AddSelect/AddSelectList.js +27 -1
  20. package/es/components/AddSelect/AddSelectSidebar.js +15 -5
  21. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  22. package/es/components/DataSpreadsheet/DataSpreadsheet.js +87 -31
  23. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +87 -33
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -4
  25. package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  26. package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  27. package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  28. package/es/components/TagSet/TagSet.js +12 -3
  29. package/es/components/UserProfileImage/UserProfileImage.js +37 -9
  30. package/lib/components/ActionBar/ActionBar.js +3 -1
  31. package/lib/components/ActionBar/ActionBarOverflowItems.js +5 -3
  32. package/lib/components/AddSelect/AddSelectList.js +28 -1
  33. package/lib/components/AddSelect/AddSelectSidebar.js +15 -11
  34. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  35. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +89 -30
  36. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +86 -33
  37. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -3
  38. package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  39. package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  40. package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  41. package/lib/components/TagSet/TagSet.js +12 -3
  42. package/lib/components/UserProfileImage/UserProfileImage.js +37 -9
  43. package/package.json +9 -9
  44. package/scss/components/AddSelect/_add-select.scss +14 -2
  45. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +37 -5
  46. package/scss/components/HTTPErrors/_http-errors.scss +16 -16
  47. 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'; // Other standard imports.
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'; // cspell:words rowcount colcount
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
- }, []); // Removes the cell selection elements
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, removeCellSelections, selectionAreas]);
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
- }; // Update the data
570
-
561
+ };
571
562
 
572
- var handleEditSubmit = function handleEditSubmit(event) {
573
- var key = event.key;
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
- submitEditChanges();
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
- submitEditChanges();
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
- return setCellEditorValue(event.target.value);
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
- }); // Call the `onSelectionAreaChange` handler to send selection area data
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]); // Renders each row/cell in the spreadsheet body
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
- prepareRow(row);
284
- return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
285
- style: style
286
- }), {
287
- className: cx("".concat(blockClass, "__tr")),
288
- "data-row-index": index
289
- }), /*#__PURE__*/React.createElement("button", {
290
- tabIndex: -1,
291
- "data-row-index": index,
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": cell.row.index,
303
- "data-column-index": index
304
- }, cell.getCellProps(), {
305
- className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
306
- key: "cell_".concat(index),
307
- onMouseDown: handleBodyCellClick(cell, index),
308
- onMouseOver: handleBodyCellHover(cell, index),
309
- onFocus: function onFocus() {},
310
- type: "button"
311
- }), cell.render('Cell'));
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'; // Click outside useEffect for spreadsheet
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, removeCellSelections, activeKeys, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
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
- _ref$allTagsModalTarg = _ref.allTagsModalTarget,
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 FillItem = image ? function () {
66
- return /*#__PURE__*/React.createElement("img", {
67
- alt: imageDescription,
68
- src: image,
69
- className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
70
- });
71
- } : initials ? formatInitials : kind && size && icons[kind][size];
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 () {