@carbon/ibm-products 1.12.0 → 1.13.0

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -49,8 +49,10 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     className: (0, _classnames.default)(blockClass, className),
     direction: "bottom",
     flipped: true,
+    iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+    ,
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass)
-  }, _react.default.Children.map(overflowItems, function (item) {
+  }, _react.default.Children.map(overflowItems, function (item, index) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
@@ -58,10 +60,10 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
       className: "".concat(blockClass, "__item"),
       itemText: /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
-        "aria-describedby": "".concat(internalId, "--item-label")
+        "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
-        id: "".concat(internalId, "--item-label")
+        id: "".concat(internalId.current, "-").concat(index, "--item-label")
       }, item.props.iconDescription), /*#__PURE__*/_react.default.createElement(item.props.renderIcon, null))
     });
   }));

package/lib/components/AddSelect/AddSelectList.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _UserProfileImage = require("../UserProfileImage");
+
 var _settings = require("../../settings");
 
 //
@@ -121,6 +123,27 @@ var AddSelectList = function AddSelectList(_ref) {
     return multiSelection.includes(id);
   };
 
+  var getAvatarProps = function getAvatarProps(_ref3) {
+    var src = _ref3.src,
+        alt = _ref3.alt,
+        icon = _ref3.icon,
+        backgroundColor = _ref3.backgroundColor;
+    return {
+      className: "".concat(blockClass, "-cell-avatar"),
+      size: 'lg',
+      theme: 'light',
+      image: src,
+      imageDescription: alt,
+      icon: icon,
+      backgroundColor: backgroundColor
+    };
+  };
+
+  var getItemIcon = function getItemIcon(_ref4) {
+    var Icon = _ref4.icon;
+    return /*#__PURE__*/_react.default.createElement(Icon, null);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
@@ -147,12 +170,16 @@ var AddSelectList = function AddSelectList(_ref) {
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
     }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-wrapper")
+    }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-cell-icon")
+    }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-text")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "-cell-title")
     }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
+    }, item.subtitle)))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
       id: "".concat(item.id, "-modifier"),
       type: "inline",
       items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectSidebar = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -19,12 +21,7 @@ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState")
 
 var _settings = require("../../settings");
 
-//
-// Copyright IBM Corp. 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
+var _excluded = ["icon", "avatar"];
 var componentName = 'AddSelectSidebar';
 
 var AddSelectSidebar = function AddSelectSidebar(_ref) {
@@ -44,11 +41,18 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     setMultiSelection(newSelections);
   };
 
-  var sidebarItems = multiSelection.map(function (selectedId) {
-    return items.find(function (item) {
-      return item.id === selectedId;
-    });
-  });
+  var sidebarItems = multiSelection.reduce(function (acc, cur) {
+    var selectedItem = items.find(function (item) {
+      return item.id === cur;
+    }); // certain properties should not be displayed in the sidebar
+    // eslint-disable-next-line no-unused-vars
+
+    var icon = selectedItem.icon,
+        avatar = selectedItem.avatar,
+        newItem = (0, _objectWithoutProperties2.default)(selectedItem, _excluded);
+    acc.push(newItem);
+    return acc;
+  }, []);
 
   var getTitle = function getTitle(_ref2) {
     var title = _ref2.title,

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -93,6 +93,8 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
+      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      ,
       renderIcon: _iconsReact.OverflowMenuHorizontal32,
       className: "".concat(blockClass, "__overflow-menu"),
       menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -23,6 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactTable = require("react-table");
 
+var _layout = require("@carbon/layout");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -57,7 +59,9 @@ var _handleMultipleKeys = require("./utils/handleMultipleKeys");
 
 var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
 
-var _excluded = ["cellSize", "className", "columns", "data", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
+var _removeCellSelections = require("./utils/removeCellSelections");
+
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
 
 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); }
 
@@ -76,6 +80,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 () {})
@@ -92,6 +97,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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,
@@ -157,6 +164,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
   var activeKeys = (0, _react.useRef)([]);
   var activeCellRef = (0, _react.useRef)();
+  var cellEditorRulerRef = (0, _react.useRef)();
   var defaultColumn = (0, _react.useMemo)(function () {
     return {
       width: 150,
@@ -204,22 +212,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     setCellEditorValue('');
     setIsEditing(false);
     cellEditorRef.current.style.display = 'none';
-  }, []); // Removes the cell selection elements
-
-  var removeCellSelections = (0, _react.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"));
-      (0, _toConsumableArray2.default)(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
 
   (0, _react.useEffect)(function () {
@@ -229,6 +222,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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)) {
@@ -277,7 +271,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,
     removeActiveCell: removeActiveCell,
-    removeCellSelections: removeCellSelections,
+    removeCellSelections: _removeCellSelections.removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
     activeKeys: activeKeys,
     removeCellEditor: removeCellEditor
@@ -346,7 +340,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && key !== 'Shift' && !activeKeys.current.includes('Shift')) {
         setSelectionAreas([]);
         setSelectionAreaData([]);
-        removeCellSelections({
+        (0, _removeCellSelections.removeCellSelections)({
           spreadsheetRef: spreadsheetRef
         });
       }
@@ -522,13 +516,14 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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() {
@@ -594,11 +589,10 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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;
@@ -607,8 +601,33 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
     };
 
+    (0, _removeCellSelections.removeCellSelections)({
+      spreadsheetRef: spreadsheetRef
+    });
+    submitEditChanges();
+    var tempMatcher = (0, _uuidv.default)();
+    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
@@ -619,7 +638,9 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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
@@ -647,14 +668,39 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 = (0, _layout.px)(totalCellEditorMaxHeight);
+        cellEditorRef.current.style.width = (0, _layout.px)(cellWidth * (widthMultiplier <= totalMultiplierPossible ? widthMultiplier : totalMultiplierPossible));
+        cellEditorRef.current.style.height = (0, _layout.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;
@@ -671,7 +717,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   };
 
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
-    className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
+    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
@@ -707,8 +753,10 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
     cellSize: cellSize,
+    headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    onDataUpdate: onDataUpdate,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -719,7 +767,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     scrollBarSize: scrollBarSize,
     totalColumnsWidth: totalColumnsWidth,
     id: id,
-    columns: columns
+    columns: columns,
+    defaultEmptyRowCount: defaultEmptyRowCount
   }), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
@@ -731,12 +780,17 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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: (0, _classnames.default)("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
+  }), /*#__PURE__*/_react.default.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
 
@@ -775,6 +829,11 @@ DataSpreadsheet.propTypes = {
    */
   data: _propTypes.default.arrayOf(_propTypes.default.shape),
 
+  /**
+   * Sets the number of empty rows to be created when there is no data provided
+   */
+  defaultEmptyRowCount: _propTypes.default.number,
+
   /**
    * The spreadsheet id
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -23,6 +23,8 @@ var _reactWindow = require("react-window");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _layout = require("@carbon/layout");
+
 var _settings = require("../../settings");
 
 var _deepCloneObject = require("../../global/js/utils/deepCloneObject");
@@ -54,8 +56,11 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   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,
@@ -74,7 +79,11 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   var previousState = (0, _hooks.usePreviousValue)({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive
-  }); // Call the `onSelectionAreaChange` handler to send selection area data
+  }); // Set custom css property containing the spreadsheet total width
+
+  (0, _react.useEffect)(function () {
+    ref === null || ref === void 0 ? void 0 : ref.current.style.setProperty("--".concat(blockClass, "--total-width"), (0, _layout.px)(totalColumnsWidth + scrollBarSize));
+  }, [ref, scrollBarSize, totalColumnsWidth]); // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
 
   (0, _react.useEffect)(function () {
@@ -303,42 +312,71 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
         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.
+
+  (0, _react.useEffect)(function () {
+    if (!(rows !== null && rows !== void 0 && rows.length)) {
+      var buildEmptyRows = function buildEmptyRows() {
+        var emptyRowData = [];
+        (0, _toConsumableArray2.default)(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.default.createElement("div", null);
+  }; // Renders each row/cell in the spreadsheet body
+
 
   var RenderRow = (0, _react.useCallback)(function (_ref3) {
     var index = _ref3.index,
         style = _ref3.style;
     var row = rows[index];
-    prepareRow(row);
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
-      style: style
-    }), {
-      className: (0, _classnames.default)("".concat(blockClass, "__tr")),
-      "data-row-index": index
-    }), /*#__PURE__*/_react.default.createElement("button", {
-      tabIndex: -1,
-      "data-row-index": index,
-      "data-column-index": "header",
-      type: "button",
-      onClick: handleRowHeaderClick(index),
-      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'))),
-      style: {
-        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
-      }
-    }, index + 1), row.cells.map(function (cell, index) {
-      return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+
+    if (rows && rows.length) {
+      prepareRow(row);
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
+        style: style
+      }), {
+        className: (0, _classnames.default)("".concat(blockClass, "__tr")),
+        "data-row-index": index
+      }), /*#__PURE__*/_react.default.createElement("button", {
         tabIndex: -1,
-        "data-row-index": cell.row.index,
-        "data-column-index": index
-      }, cell.getCellProps(), {
-        className: (0, _classnames.default)("".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: (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'))),
+        style: {
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+        }
+      }, index + 1), row.cells.map(function (cell, index) {
+        return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+          tabIndex: -1,
+          "data-row-index": cell.row.index,
+          "data-column-index": index
+        }, cell.getCellProps(), {
+          className: (0, _classnames.default)("".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 = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -347,10 +385,10 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   }, getTableBodyProps()), /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
     className: (0, _classnames.default)("".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));
 });
 exports.DataSpreadsheetBody = DataSpreadsheetBody;
 DataSpreadsheetBody.propTypes = {
@@ -386,11 +424,21 @@ DataSpreadsheetBody.propTypes = {
     width: _propTypes.default.number
   }),
 
+  /**
+   * Sets the number of empty rows to be created when there is no data provided
+   */
+  defaultEmptyRowCount: _propTypes.default.number,
+
   /**
    * Function to set table body prop values
    */
   getTableBodyProps: _propTypes.default.func,
 
+  /**
+   * Headers provided from useTable hook
+   */
+  headerGroups: _propTypes.default.arrayOf(_propTypes.default.object),
+
   /**
    * The spreadsheet id
    */
@@ -401,6 +449,11 @@ DataSpreadsheetBody.propTypes = {
    */
   onActiveCellChange: _propTypes.default.func,
 
+  /**
+   * The event handler that is called to set the rows for the empty spreadsheet
+   */
+  onDataUpdate: _propTypes.default.func,
+
   /**
    * The event handler that is called when the selection areas change
    */

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

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _settings = require("../../../settings");
 
+var _removeCellSelections = require("../utils/removeCellSelections");
+
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -23,7 +25,6 @@ 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;
@@ -36,7 +37,9 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
-      removeCellSelections();
+      (0, _removeCellSelections.removeCellSelections)({
+        spreadsheetRef: spreadsheetRef
+      });
       setContainerHasFocus(false);
       removeCellEditor();
       activeKeys.current = [];
@@ -46,7 +49,7 @@ 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]);
 };
 
 exports.useSpreadsheetOutsideClick = useSpreadsheetOutsideClick;

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

@@ -24,10 +24,9 @@ var HTTPErrorSvg403 = function HTTPErrorSvg403(_ref) {
   return /*#__PURE__*/_react.default.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.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/_react.default.createElement("path", {

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

@@ -24,10 +24,9 @@ var HTTPErrorSvg404 = function HTTPErrorSvg404(_ref) {
   return /*#__PURE__*/_react.default.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.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/_react.default.createElement("path", {