@carbon/ibm-products 2.0.0-rc.32 → 2.0.0-rc.33

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -1,560 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DataSpreadsheetBody = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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");
-var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _hooks = require("../../global/js/hooks");
-var _removeCellSelections = require("./utils/removeCellSelections");
-var _createCellSelectionArea = require("./utils/createCellSelectionArea");
-var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
-var _checkSelectedHeaderCell = require("./utils/checkSelectedHeaderCell");
-var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
-var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
-var _hooks2 = require("./hooks");
-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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright IBM Corp. 2022, 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 blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
-var DataSpreadsheetBody = /*#__PURE__*/(0, _react.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,
-    setSelectionAreaData = _ref.setSelectionAreaData,
-    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-    selectionAreas = _ref.selectionAreas,
-    setContainerHasFocus = _ref.setContainerHasFocus,
-    setSelectionAreas = _ref.setSelectionAreas,
-    scrollBarSize = _ref.scrollBarSize,
-    totalColumnsWidth = _ref.totalColumnsWidth,
-    clickAndHoldActive = _ref.clickAndHoldActive,
-    setClickAndHoldActive = _ref.setClickAndHoldActive,
-    currentMatcher = _ref.currentMatcher,
-    setCurrentMatcher = _ref.setCurrentMatcher,
-    onSelectionAreaChange = _ref.onSelectionAreaChange,
-    setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-    setColumnOrder = _ref.setColumnOrder,
-    visibleColumns = _ref.visibleColumns;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    validStartingPoint = _useState2[0],
-    setValidStartingPoint = _useState2[1];
-  var contentScrollRef = (0, _react.useRef)();
-  var previousState = (0, _hooks.usePreviousValue)({
-    selectionAreaData: selectionAreaData,
-    clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn.rowHeight
-  });
-
-  // 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 () {
-    if (selectionAreaData.length) {
-      var _previousState$select;
-      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 ? void 0 : (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
-        onSelectionAreaChange(selectionAreaData);
-      }
-    }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
-
-  // Create cell selection areas based on selectionAreas array
-  (0, _react.useEffect)(function () {
-    if (selectionAreas && selectionAreas.length) {
-      selectionAreas.map(function (area) {
-        // Setup selection area data that will be sent back to consumer via onSelectionAreaChange prop
-        if (area.areaCreated) {
-          var rowStart = Math.min(area.point1.row, area.point2.row);
-          var rowEnd = Math.max(area.point1.row, area.point2.row);
-          var columnStart = Math.min(area.point1.column, area.point2.column);
-          var columnEnd = Math.max(area.point1.column, area.point2.column);
-          var selectionData = {
-            rows: {
-              start: rowStart,
-              end: rowEnd
-            },
-            columns: {
-              start: columnStart,
-              end: columnEnd
-            },
-            cells: populateSelectionAreaCellData({
-              rowStart: rowStart,
-              rowEnd: rowEnd,
-              columnStart: columnStart,
-              columnEnd: columnEnd
-            }),
-            selectionId: area.matcher
-          };
-          setSelectionAreaData(function (prev) {
-            var prevValues = (0, _deepCloneObject.deepCloneObject)(prev);
-            var newAreaData = prevValues.filter(function (item) {
-              return item.selectionId !== area.matcher;
-            });
-            return [].concat((0, _toConsumableArray2.default)(newAreaData), [selectionData]);
-          });
-        }
-        if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-          (0, _createCellSelectionArea.createCellSelectionArea)({
-            ref: ref,
-            area: area,
-            blockClass: blockClass,
-            defaultColumn: defaultColumn,
-            selectionAreas: selectionAreas,
-            setSelectionAreas: setSelectionAreas,
-            setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
-            visibleColumns: visibleColumns
-          });
-        }
-        return;
-      });
-    }
-  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
-  var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
-    var rowStart = _ref2.rowStart,
-      rowEnd = _ref2.rowEnd,
-      columnStart = _ref2.columnStart,
-      columnEnd = _ref2.columnEnd;
-    var cellContainer = [];
-    for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
-      for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
-        cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
-      }
-    }
-    return cellContainer;
-  };
-  (0, _hooks2.useSpreadsheetMouseUp)({
-    currentMatcher: currentMatcher,
-    setClickAndHoldActive: setClickAndHoldActive,
-    setSelectionAreas: setSelectionAreas,
-    setValidStartingPoint: setValidStartingPoint,
-    validStartingPoint: validStartingPoint,
-    ref: ref,
-    setHeaderCellHoldActive: setHeaderCellHoldActive,
-    setColumnOrder: setColumnOrder,
-    visibleColumns: visibleColumns,
-    setActiveCellCoordinates: setActiveCellCoordinates,
-    rows: rows,
-    activeCellCoordinates: activeCellCoordinates,
-    defaultColumn: defaultColumn,
-    selectionAreas: selectionAreas
-  });
-
-  // Make sure that if the cellSize prop changes, the active
-  // cell also gets updated with the new size and new top placement
-  // value. All of the cell selections will be updated as well
-  (0, _react.useEffect)(function () {
-    var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
-    var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
-      activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
-      if (activeCellCoordinates) {
-        var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
-        var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
-        var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
-        activeCellButton.style.top = (0, _layout.px)(newActiveCellTopPosition);
-        (0, _removeCellSelections.removeCellSelections)({
-          spreadsheetRef: ref
-        });
-        selectionAreas.map(function (area) {
-          if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-            return (0, _createCellSelectionArea.createCellSelectionArea)({
-              ref: ref,
-              area: area,
-              blockClass: blockClass,
-              defaultColumn: defaultColumn,
-              selectionAreas: selectionAreas,
-              setSelectionAreas: setSelectionAreas,
-              setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
-              visibleColumns: visibleColumns
-            });
-          }
-        });
-      }
-    }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
-
-  // onClick fn for each cell in the data spreadsheet body,
-  // adds the active cell highlight
-  var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {
-    return function (event) {
-      event.preventDefault();
-      var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
-      var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
-      setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
-      setContainerHasFocus(true);
-      var activeCoordinates = {
-        row: cell.row.index,
-        column: columnIndex
-      };
-      var tempMatcher = (0, _uuidv.default)();
-      setClickAndHoldActive(true);
-
-      // prevent multiple selections unless cmd key is held
-      // meaning that selectionAreas should only have one item by default
-      if (isHoldingCommandKey) {
-        var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-        activeCellElement.setAttribute('data-selection-id', tempMatcher);
-        setActiveCellInsideSelectionArea(true);
-        setActiveCellCoordinates(activeCoordinates);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreas(function (prev) {
-          return [].concat((0, _toConsumableArray2.default)(prev), [{
-            point1: activeCoordinates,
-            matcher: tempMatcher
-          }]);
-        });
-      } else if (isHoldingShiftKey) {
-        setContainerHasFocus(true);
-        var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
-        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-          return item.matcher === currentMatcher;
-        });
-        if (indexOfItemToUpdate === -1) {
-          // There is always a selectionArea with a point1 object that updates
-          // whenever the activeCellCoordinates update, we should always be able
-          // to find an index, but if we do not for some reason we should return
-          // at this point.
-          return;
-        } else {
-          // Update the selectionArea that was found, do not update currentMatcher
-          selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
-          setSelectionAreas(selectionAreaClone);
-        }
-      } else {
-        setActiveCellInsideSelectionArea(false);
-        setActiveCellCoordinates(activeCoordinates);
-        // remove all previous cell selections
-        (0, _removeCellSelections.removeCellSelections)({
-          spreadsheetRef: ref
-        });
-        setSelectionAreas([{
-          point1: activeCoordinates,
-          matcher: tempMatcher
-        }]);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreaData([]);
-      }
-    };
-  }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
-  var handleBodyScroll = function handleBodyScroll() {
-    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
-    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
-  };
-  (0, _react.useEffect)(function () {
-    contentScrollRef.current.addEventListener('scroll', function (event) {
-      return handleBodyScroll(event);
-    });
-    var contentScrollElementRef = contentScrollRef.current;
-    return function () {
-      contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
-    };
-  });
-  var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
-    return function () {
-      if (clickAndHoldActive) {
-        var cellCoordinates = {
-          row: cell.row.index,
-          column: columnIndex
-        };
-        setSelectionAreas(function (prev) {
-          var _selectionAreaClone$i, _selectionAreaClone$i2;
-          var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
-          var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-            return item.matcher === currentMatcher;
-          });
-          // No items in the array match up with the currentMatcher value
-          if (indexOfItemToUpdate === -1) {
-            return prev;
-          }
-          // Do not update state if you're still hovering on the same cell
-          if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
-            return prev;
-          }
-          selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          return selectionAreaClone;
-        });
-      }
-    };
-  }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClick = (0, _react.useCallback)(function (index) {
-    return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      (0, _handleHeaderCellSelection.handleHeaderCellSelection)({
-        type: 'row',
-        activeCellCoordinates: activeCellCoordinates,
-        rows: rows,
-        columns: columns,
-        setActiveCellCoordinates: setActiveCellCoordinates,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
-        spreadsheetRef: ref,
-        index: index,
-        setSelectionAreaData: setSelectionAreaData,
-        isHoldingCommandKey: isHoldingCommandKey
-      });
-    };
-  }, [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];
-    if (rows && rows.length) {
-      var _cx;
-      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,
-        "aria-rowindex": index + 1,
-        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        role: "rowheader",
-        className: "".concat(blockClass, "__td-th--cell-container")
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        id: "".concat(blockClass, "__cell--").concat(index, "--header"),
-        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"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row')), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'row', columns)), _cx)),
-        style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
-        }
-      }, index + 1)), row.cells.map(function (cell, index) {
-        var _cell$column;
-        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-          key: "cell_".concat(index),
-          "aria-colindex": index + 1
-        }, cell.getCellProps(), {
-          role: "gridcell",
-          style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
-            display: 'grid',
-            minWidth: (cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
-          })
-        }), /*#__PURE__*/_react.default.createElement("button", {
-          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
-          tabIndex: -1,
-          "data-row-index": cell.row.index,
-          "data-column-index": index,
-          className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          onMouseDown: handleBodyCellClick(cell, index),
-          onMouseOver: handleBodyCellHover(cell, index),
-          onFocus: function onFocus() {},
-          type: "button"
-        }, cell.render('Cell')));
-      }));
-    }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
-  var spreadsheetBodyRef = (0, _react.useRef)();
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: spreadsheetBodyRef,
-    className: (0, _classnames.default)("".concat(blockClass, "__body--container"))
-  }, 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 || defaultEmptyRowCount,
-    itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
-    width: (0, _getSpreadsheetWidth.getSpreadsheetWidth)({
-      scrollBarSizeValue: scrollBarSize,
-      totalVisibleColumns: totalVisibleColumns,
-      defaultColumn: defaultColumn,
-      totalColumnsWidth: totalColumnsWidth,
-      visibleColumns: visibleColumns
-    }),
-    outerRef: contentScrollRef
-  }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
-});
-exports.DataSpreadsheetBody = DataSpreadsheetBody;
-DataSpreadsheetBody.propTypes = {
-  /**
-   * Object containing the active cell coordinates
-   */
-  activeCellCoordinates: _propTypes.default.shape({
-    row: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    column: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-  }),
-  /**
-   * Is the user clicking and holding in the data spreadsheet body
-   */
-  clickAndHoldActive: _propTypes.default.bool,
-  /**
-   * All of the spreadsheet columns
-   */
-  columns: _propTypes.default.array,
-  /**
-   * This represents the id of the current cell selection area
-   */
-  currentMatcher: _propTypes.default.string,
-  /**
-   * Default spreadsheet sizing values
-   */
-  defaultColumn: _propTypes.default.shape({
-    rowHeight: _propTypes.default.number,
-    rowHeaderWidth: _propTypes.default.number,
-    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
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  /**
-   * The event handler that is called when the active cell changes
-   */
-  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
-   */
-  onSelectionAreaChange: _propTypes.default.func,
-  /**
-   * Prepare row function from react-table
-   */
-  prepareRow: _propTypes.default.func,
-  /**
-   * All of the spreadsheet row data
-   */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * The scrollbar width
-   */
-  scrollBarSize: _propTypes.default.number,
-  /**
-   * Array of selection area data
-   */
-  selectionAreaData: _propTypes.default.array,
-  /**
-   * Array of selection areas
-   */
-  selectionAreas: _propTypes.default.array,
-  /**
-   * Setter fn for activeCellCoordinates state value
-   */
-  setActiveCellCoordinates: _propTypes.default.func,
-  /**
-   * Setter fn for active cell inside of selection area
-   */
-  setActiveCellInsideSelectionArea: _propTypes.default.func,
-  /**
-   * Setter fn for clickAndHold state value
-   */
-  setClickAndHoldActive: _propTypes.default.func,
-  /**
-   * Setter fn for column ordering, provided from react-table
-   */
-  setColumnOrder: _propTypes.default.func,
-  /**
-   * Setter fn for containerHasFocus state value
-   */
-  setContainerHasFocus: _propTypes.default.func,
-  /**
-   * Setter fn for currentMatcher state value
-   */
-  setCurrentMatcher: _propTypes.default.func,
-  /**
-   * Setter fn for header cell hold active value
-   */
-  setHeaderCellHoldActive: _propTypes.default.func,
-  /**
-   * Setter fn for selectionAreaData state value
-   */
-  setSelectionAreaData: _propTypes.default.func,
-  /**
-   * Setter fn for selectionAreas state value
-   */
-  setSelectionAreas: _propTypes.default.func,
-  /**
-   * The total columns width
-   */
-  totalColumnsWidth: _propTypes.default.number,
-  /**
-   * The total number of columns to be initially visible, additional columns will be rendered and
-   * visible via horizontal scrollbar
-   */
-  totalVisibleColumns: _propTypes.default.number,
-  /**
-   * Prop from react-table used to reorder columns
-   */
-  visibleColumns: _propTypes.default.array
-};