@carbon/ibm-products 1.12.0 → 1.13.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cellSize", "className", "columns", "data", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
 
 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; }
 
@@ -17,7 +17,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 // Import portions of React that are needed.
 import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { useBlockLayout, useTable } from 'react-table'; // Other standard imports.
+import { useBlockLayout, useTable } from 'react-table';
+import { px } from '@carbon/layout'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -35,7 +36,8 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell';
 import { createActiveCellFn } from './utils/createActiveCellFn';
 import { getCellSize } from './utils/getCellSize';
 import { handleMultipleKeys } from './utils/handleMultipleKeys';
-import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection'; // cspell:words rowcount colcount
+import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
+import { removeCellSelections } from './utils/removeCellSelections'; // cspell:words rowcount colcount
 // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
@@ -45,6 +47,7 @@ var defaults = {
   cellSize: 'standard',
   columns: Object.freeze([]),
   data: Object.freeze([]),
+  defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
   onSelectionAreaChange: Object.freeze(function () {})
@@ -61,6 +64,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
       _ref$data = _ref.data,
       data = _ref$data === void 0 ? defaults.data : _ref$data,
+      _ref$defaultEmptyRowC = _ref.defaultEmptyRowCount,
+      defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
       _ref$onDataUpdate = _ref.onDataUpdate,
       onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
       id = _ref.id,
@@ -127,6 +132,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   var activeKeys = useRef([]);
   var activeCellRef = useRef();
+  var cellEditorRulerRef = useRef();
   var defaultColumn = useMemo(function () {
     return {
       width: 150,
@@ -174,23 +180,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     setCellEditorValue('');
     setIsEditing(false);
     cellEditorRef.current.style.display = 'none';
-  }, []); // Removes the cell selection elements
-
-  var removeCellSelections = useCallback(function (matcher) {
-    if (matcher && typeof matcher === 'string') {
-      var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
-
-      if (selectionToRemove) {
-        selectionToRemove.remove();
-      }
-    } else {
-      var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
-
-      _toConsumableArray(cellSelections).forEach(function (element) {
-        return element.remove();
-      });
-    }
-  }, [spreadsheetRef]); // Remove cell editor if the active cell coordinates change and save with new cell data, this will
+  }, []); // Remove cell editor if the active cell coordinates change and save with new cell data, this will
   // happen if you click on another cell while isEditing is true
 
   useEffect(function () {
@@ -200,6 +190,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
       removeCellEditor();
       updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
+      cellEditorRulerRef.current.textContent = '';
     }
 
     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)
           }
       }
     }
-  }, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, removeCellSelections, selectionAreas]);
+  }, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas]);
 
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     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;
     var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     setCellEditorValue(activeCellValue);
+    cellEditorRulerRef.current.textContent = activeCellValue;
   };
 
   var handleActiveCellClick = function handleActiveCellClick() {
@@ -566,11 +558,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
     startEditMode();
-  }; // Update the data
-
+  };
 
-  var handleEditSubmit = function handleEditSubmit(event) {
-    var key = event.key;
+  var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref5) {
+    var type = _ref5.type;
 
     var submitEditChanges = function submitEditChanges() {
       var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
@@ -579,8 +570,33 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
     };
 
+    removeCellSelections({
+      spreadsheetRef: spreadsheetRef
+    });
+    submitEditChanges();
+    var tempMatcher = uuidv4();
+    var newSelectionArea = {
+      row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
+      column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
+    };
+    setSelectionAreas([{
+      point1: newSelectionArea,
+      point2: newSelectionArea,
+      matcher: tempMatcher,
+      areaCreated: false
+    }]);
+    setCurrentMatcher(tempMatcher);
+    cellEditorRulerRef.current.textContent = '';
+  }; // Update the data
+
+
+  var handleEditSubmit = function handleEditSubmit(event) {
+    var key = event.key;
+
     if (key === 'Enter') {
-      submitEditChanges();
+      updateSelectionAreaOnCellEditSubmit({
+        type: 'Enter'
+      });
       setActiveCellCoordinates(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           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)
 
     if (key === 'Tab') {
       event.preventDefault();
-      submitEditChanges();
+      updateSelectionAreaOnCellEditSubmit({
+        type: 'Tab'
+      });
       setActiveCellCoordinates(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           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)
 
       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';
       (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
+      var rulerWidth = cellEditorRulerRef.current.offsetWidth;
+      var cellWidth = activeCellRef.current.offsetWidth;
+
+      if (rulerWidth >= cellWidth) {
+        var widthMultiplier = Math.floor(rulerWidth / cellWidth) + 1;
+        var startingColumnPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column;
+        var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
+        var totalColumns = columns.length;
+        var totalRows = rows.length;
+        var totalMultiplierPossible = totalColumns - startingColumnPosition;
+        var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
+        cellEditorRef.current.style.maxHeight = px(totalCellEditorMaxHeight);
+        cellEditorRef.current.style.width = px(cellWidth * (widthMultiplier <= totalMultiplierPossible ? widthMultiplier : totalMultiplierPossible));
+        cellEditorRef.current.style.height = px(cellEditorRef.current.scrollHeight); // adds dynamic height to cell editor
+        // Cell editor has reached max height, we need to add the scrolling back.
+        // We also need to subtract 1 to account for the fact that the cell editor
+        // is placed one pixel below the cell being edited to account for the border
+
+        if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
+          cellEditorRef.current.style.overflow = 'auto';
+        } else {
+          cellEditorRef.current.style.overflow = 'hidden';
+        }
+      }
     }
 
     if (!isEditing) {
+      cellEditorRef.current.style.overflow = 'hidden';
       cellEditorRef.current.style.display = 'none';
       cellEditorRef.current.blur();
       activeCellRef.current.focus();
     }
-  }, [isEditing, activeCellCoordinates, rows]);
+  }, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn]);
 
   var handleKeyUp = function handleKeyUp(event) {
     var _activeKeys$current3;
@@ -644,7 +687,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   };
 
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
-    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
+    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
@@ -680,8 +723,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
     cellSize: cellSize,
+    headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    onDataUpdate: onDataUpdate,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -692,7 +737,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     scrollBarSize: scrollBarSize,
     totalColumnsWidth: totalColumnsWidth,
     id: id,
-    columns: columns
+    columns: columns,
+    defaultEmptyRowCount: defaultEmptyRowCount
   }), /*#__PURE__*/React.createElement("button", {
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
@@ -704,12 +750,17 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     value: cellEditorValue,
     onKeyDown: handleEditSubmit,
     onChange: function onChange(event) {
-      return setCellEditorValue(event.target.value);
+      setCellEditorValue(event.target.value);
+      cellEditorRulerRef.current.textContent = event.target.value;
     },
     ref: cellEditorRef,
     labelText: "",
     "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,
     className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
+  }), /*#__PURE__*/React.createElement("pre", {
+    "aria-hidden": true,
+    ref: cellEditorRulerRef,
+    className: "".concat(blockClass, "__cell-editor-ruler")
   }));
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -746,6 +797,11 @@ DataSpreadsheet.propTypes = {
    */
   data: PropTypes.arrayOf(PropTypes.shape),
 
+  /**
+   * Sets the number of empty rows to be created when there is no data provided
+   */
+  defaultEmptyRowCount: PropTypes.number,
+
   /**
    * The spreadsheet id
    */

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -12,6 +12,7 @@ import React, { useRef, useCallback, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { FixedSizeList } from 'react-window';
 import cx from 'classnames';
+import { px } from '@carbon/layout';
 import { pkg } from '../../settings';
 import { deepCloneObject } from '../../global/js/utils/deepCloneObject';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -25,8 +26,11 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var columns = _ref.columns,
       activeCellCoordinates = _ref.activeCellCoordinates,
       defaultColumn = _ref.defaultColumn,
+      defaultEmptyRowCount = _ref.defaultEmptyRowCount,
       getTableBodyProps = _ref.getTableBodyProps,
+      headerGroups = _ref.headerGroups,
       id = _ref.id,
+      onDataUpdate = _ref.onDataUpdate,
       prepareRow = _ref.prepareRow,
       rows = _ref.rows,
       selectionAreaData = _ref.selectionAreaData,
@@ -45,7 +49,11 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive
-  }); // Call the `onSelectionAreaChange` handler to send selection area data
+  }); // Set custom css property containing the spreadsheet total width
+
+  useEffect(function () {
+    ref === null || ref === void 0 ? void 0 : ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px(totalColumnsWidth + scrollBarSize));
+  }, [ref, scrollBarSize, totalColumnsWidth]); // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
 
   useEffect(function () {
@@ -274,42 +282,73 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setSelectionAreaData: setSelectionAreaData
       });
     };
-  }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]); // Renders each row/cell in the spreadsheet body
+  }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]); // Builds the empty rows and calls `onDataUpdate` to set the new empty rows
+  // using defaultEmptyRowCount to determine how many empty rows are created.
+
+  useEffect(function () {
+    if (!(rows !== null && rows !== void 0 && rows.length)) {
+      var buildEmptyRows = function buildEmptyRows() {
+        var emptyRowData = [];
+
+        _toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
+          var _headerGroups$;
+
+          var emptyCell = {};
+          (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 ? void 0 : _headerGroups$.headers.map(function (header) {
+            emptyCell[header.id] = null;
+          });
+          emptyRowData.push(emptyCell);
+        });
+
+        onDataUpdate(emptyRowData);
+      };
+
+      buildEmptyRows();
+    }
+  }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
+
+  var RenderEmptyRows = function RenderEmptyRows() {
+    return /*#__PURE__*/React.createElement("div", null);
+  }; // Renders each row/cell in the spreadsheet body
+
 
   var RenderRow = useCallback(function (_ref3) {
     var index = _ref3.index,
         style = _ref3.style;
     var row = rows[index];
-    prepareRow(row);
-    return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
-      style: style
-    }), {
-      className: cx("".concat(blockClass, "__tr")),
-      "data-row-index": index
-    }), /*#__PURE__*/React.createElement("button", {
-      tabIndex: -1,
-      "data-row-index": index,
-      "data-column-index": "header",
-      type: "button",
-      onClick: handleRowHeaderClick(index),
-      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'))),
-      style: {
-        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
-      }
-    }, index + 1), row.cells.map(function (cell, index) {
-      return /*#__PURE__*/React.createElement("button", _extends({
+
+    if (rows && rows.length) {
+      prepareRow(row);
+      return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
+        style: style
+      }), {
+        className: cx("".concat(blockClass, "__tr")),
+        "data-row-index": index
+      }), /*#__PURE__*/React.createElement("button", {
         tabIndex: -1,
-        "data-row-index": cell.row.index,
-        "data-column-index": index
-      }, cell.getCellProps(), {
-        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-        key: "cell_".concat(index),
-        onMouseDown: handleBodyCellClick(cell, index),
-        onMouseOver: handleBodyCellHover(cell, index),
-        onFocus: function onFocus() {},
-        type: "button"
-      }), cell.render('Cell'));
-    }));
+        "data-row-index": index,
+        "data-column-index": "header",
+        type: "button",
+        onClick: handleRowHeaderClick(index),
+        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'))),
+        style: {
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+        }
+      }, index + 1), row.cells.map(function (cell, index) {
+        return /*#__PURE__*/React.createElement("button", _extends({
+          tabIndex: -1,
+          "data-row-index": cell.row.index,
+          "data-column-index": index
+        }, cell.getCellProps(), {
+          className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
+          key: "cell_".concat(index),
+          onMouseDown: handleBodyCellClick(cell, index),
+          onMouseOver: handleBodyCellHover(cell, index),
+          onFocus: function onFocus() {},
+          type: "button"
+        }), cell.render('Cell'));
+      }));
+    }
   }, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);
   var spreadsheetBodyRef = useRef();
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -318,10 +357,10 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, getTableBodyProps()), /*#__PURE__*/React.createElement(FixedSizeList, {
     className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
-    itemCount: rows.length,
+    itemCount: rows.length || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
     width: totalColumnsWidth + scrollBarSize
-  }, RenderRow));
+  }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
 });
 DataSpreadsheetBody.propTypes = {
   /**
@@ -356,11 +395,21 @@ DataSpreadsheetBody.propTypes = {
     width: PropTypes.number
   }),
 
+  /**
+   * Sets the number of empty rows to be created when there is no data provided
+   */
+  defaultEmptyRowCount: PropTypes.number,
+
   /**
    * Function to set table body prop values
    */
   getTableBodyProps: PropTypes.func,
 
+  /**
+   * Headers provided from useTable hook
+   */
+  headerGroups: PropTypes.arrayOf(PropTypes.object),
+
   /**
    * The spreadsheet id
    */
@@ -371,6 +420,11 @@ DataSpreadsheetBody.propTypes = {
    */
   onActiveCellChange: PropTypes.func,
 
+  /**
+   * The event handler that is called to set the rows for the empty spreadsheet
+   */
+  onDataUpdate: PropTypes.func,
+
   /**
    * The event handler that is called when the selection areas change
    */

package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useEffect } from 'react';
-import { pkg } from '../../../settings'; // Click outside useEffect for spreadsheet
+import { pkg } from '../../../settings';
+import { removeCellSelections } from '../utils/removeCellSelections'; // Click outside useEffect for spreadsheet
 
 export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
   var spreadsheetRef = _ref.spreadsheetRef,
@@ -14,7 +15,6 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
       setActiveCellCoordinates = _ref.setActiveCellCoordinates,
       setSelectionAreas = _ref.setSelectionAreas,
       removeActiveCell = _ref.removeActiveCell,
-      removeCellSelections = _ref.removeCellSelections,
       setContainerHasFocus = _ref.setContainerHasFocus,
       activeKeys = _ref.activeKeys,
       removeCellEditor = _ref.removeCellEditor;
@@ -27,7 +27,9 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
-      removeCellSelections();
+      removeCellSelections({
+        spreadsheetRef: spreadsheetRef
+      });
       setContainerHasFocus(false);
       removeCellEditor();
       activeKeys.current = [];
@@ -37,5 +39,5 @@ export var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [spreadsheetRef, removeActiveCell, removeCellSelections, activeKeys, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
+  }, [spreadsheetRef, removeActiveCell, activeKeys, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
 };

package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvg403 = function HTTPErrorSvg403(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvg404 = function HTTPErrorSvg404(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/TagSet/TagSet.js

@@ -33,15 +33,14 @@ var allTagsModalSearchThreshold = 10; // Default values for props
 
 var defaults = {
   align: 'start',
-  allTagsModalTarget: document.body,
+  // allTagsModalTarget: document.body,
   overflowAlign: 'center',
   overflowDirection: 'bottom'
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? defaults.align : _ref$align,
-      _ref$allTagsModalTarg = _ref.allTagsModalTarget,
-      allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
+      allTagsModalTargetIn = _ref.allTagsModalTarget,
       className = _ref.className,
       maxVisible = _ref.maxVisible,
       _ref$overflowAlign = _ref.overflowAlign,
@@ -88,10 +87,20 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var overflowTag = useRef(null);
 
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      allTagsModalTarget = _useState12[0],
+      setAllTagsModalTarget = _useState12[1];
+
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
 
+  useEffect(function () {
+    var _document;
+
+    setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
+  }, [allTagsModalTargetIn]);
   useEffect(function () {
     var newSizingTags = []; // create sizing tags
 

package/es/components/UserProfileImage/UserProfileImage.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -31,6 +31,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var backgroundColor = _ref.backgroundColor,
       className = _ref.className,
       kind = _ref.kind,
+      icon = _ref.icon,
       initials = _ref.initials,
       image = _ref.image,
       imageDescription = _ref.imageDescription,
@@ -62,18 +63,40 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
   };
 
-  var FillItem = image ? function () {
-    return /*#__PURE__*/React.createElement("img", {
-      alt: imageDescription,
-      src: image,
-      className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
-    });
-  } : initials ? formatInitials : kind && size && icons[kind][size];
+  var getFillItem = function getFillItem() {
+    if (image) {
+      return function () {
+        return /*#__PURE__*/React.createElement("img", {
+          alt: imageDescription,
+          src: image,
+          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        });
+      };
+    }
+
+    if (initials) {
+      return formatInitials;
+    }
+
+    if (kind && size) {
+      return icons[kind][size];
+    }
+
+    return icon;
+  }; // if user doesn't provide a color just generate a random one
+
+
+  var getRandomColor = function getRandomColor() {
+    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'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  var FillItem = getFillItem();
 
   var renderUserProfileImage = function renderUserProfileImage() {
     return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
       ref: ref,
-      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
+      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
   };
 
@@ -97,6 +120,11 @@ UserProfileImage.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the included ones
+   */
+  icon: PropTypes.object,
+
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */

package/lib/components/ActionBar/ActionBar.js

@@ -93,6 +93,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": false
     }, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
@@ -108,7 +110,7 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         key: "hidden-item-".concat(key),
         className: "".concat(blockClass, "__hidden-sizing-item")
       }));
-    })));
+    }))));
   }, [actions]); // creates displayed items based on actions, displayCount and alignment
 
   (0, _react.useEffect)(function () {