@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.30

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -1,602 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-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) { _defineProperty(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.
- */
-import React, { useRef, useCallback, useEffect, forwardRef, useState } 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';
-import { usePreviousValue } from '../../global/js/hooks';
-import { removeCellSelections } from './utils/removeCellSelections';
-import { createCellSelectionArea } from './utils/createCellSelectionArea';
-import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
-import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell';
-import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
-import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth';
-import { useSpreadsheetMouseUp } from './hooks';
-var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
-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,
-      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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      validStartingPoint = _useState2[0],
-      setValidStartingPoint = _useState2[1];
-
-  var contentScrollRef = useRef();
-  var previousState = usePreviousValue({
-    selectionAreaData: selectionAreaData,
-    clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn.rowHeight
-  }); // 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 () {
-    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
-
-  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 = deepCloneObject(prev);
-            var newAreaData = prevValues.filter(function (item) {
-              return item.selectionId !== area.matcher;
-            });
-            return [].concat(_toConsumableArray(newAreaData), [selectionData]);
-          });
-        }
-
-        if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-          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;
-  };
-
-  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
-
-  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 = px(newActiveCellTopPosition);
-        removeCellSelections({
-          spreadsheetRef: ref
-        });
-        selectionAreas.map(function (area) {
-          if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
-            return 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 = 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 = uuidv4();
-      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(_toConsumableArray(prev), [{
-            point1: activeCoordinates,
-            matcher: tempMatcher
-          }]);
-        });
-      } else if (isHoldingShiftKey) {
-        setContainerHasFocus(true);
-        var selectionAreaClone = 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
-
-        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;
-  };
-
-  useEffect(function () {
-    contentScrollRef.current.addEventListener('scroll', function (event) {
-      return handleBodyScroll(event);
-    });
-    var contentScrollElementRef = contentScrollRef.current;
-    return function () {
-      contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
-    };
-  });
-  var handleBodyCellHover = 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 = 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 = useCallback(function (index) {
-    return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      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.
-
-  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];
-
-    if (rows && rows.length) {
-      var _cx;
-
-      prepareRow(row);
-      return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
-        style: style
-      }), {
-        className: cx("".concat(blockClass, "__tr")),
-        "data-row-index": index,
-        "aria-rowindex": index + 1,
-        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
-      }), /*#__PURE__*/React.createElement("div", {
-        role: "rowheader",
-        className: "".concat(blockClass, "__td-th--cell-container")
-      }, /*#__PURE__*/React.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: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), 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.createElement("div", _extends({
-          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.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: cx("".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 = useRef();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: spreadsheetBodyRef,
-    className: cx("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps()), /*#__PURE__*/React.createElement(FixedSizeList, {
-    className: cx("".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: getSpreadsheetWidth({
-      scrollBarSizeValue: scrollBarSize,
-      totalVisibleColumns: totalVisibleColumns,
-      defaultColumn: defaultColumn,
-      totalColumnsWidth: totalColumnsWidth,
-      visibleColumns: visibleColumns
-    }),
-    outerRef: contentScrollRef
-  }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
-});
-DataSpreadsheetBody.propTypes = {
-  /**
-   * Object containing the active cell coordinates
-   */
-  activeCellCoordinates: PropTypes.shape({
-    row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-
-  /**
-   * Is the user clicking and holding in the data spreadsheet body
-   */
-  clickAndHoldActive: PropTypes.bool,
-
-  /**
-   * All of the spreadsheet columns
-   */
-  columns: PropTypes.array,
-
-  /**
-   * This represents the id of the current cell selection area
-   */
-  currentMatcher: PropTypes.string,
-
-  /**
-   * Default spreadsheet sizing values
-   */
-  defaultColumn: PropTypes.shape({
-    rowHeight: PropTypes.number,
-    rowHeaderWidth: PropTypes.number,
-    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
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /**
-   * The event handler that is called when the active cell changes
-   */
-  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
-   */
-  onSelectionAreaChange: PropTypes.func,
-
-  /**
-   * Prepare row function from react-table
-   */
-  prepareRow: PropTypes.func,
-
-  /**
-   * All of the spreadsheet row data
-   */
-  rows: PropTypes.arrayOf(PropTypes.object),
-
-  /**
-   * The scrollbar width
-   */
-  scrollBarSize: PropTypes.number,
-
-  /**
-   * Array of selection area data
-   */
-  selectionAreaData: PropTypes.array,
-
-  /**
-   * Array of selection areas
-   */
-  selectionAreas: PropTypes.array,
-
-  /**
-   * Setter fn for activeCellCoordinates state value
-   */
-  setActiveCellCoordinates: PropTypes.func,
-
-  /**
-   * Setter fn for active cell inside of selection area
-   */
-  setActiveCellInsideSelectionArea: PropTypes.func,
-
-  /**
-   * Setter fn for clickAndHold state value
-   */
-  setClickAndHoldActive: PropTypes.func,
-
-  /**
-   * Setter fn for column ordering, provided from react-table
-   */
-  setColumnOrder: PropTypes.func,
-
-  /**
-   * Setter fn for containerHasFocus state value
-   */
-  setContainerHasFocus: PropTypes.func,
-
-  /**
-   * Setter fn for currentMatcher state value
-   */
-  setCurrentMatcher: PropTypes.func,
-
-  /**
-   * Setter fn for header cell hold active value
-   */
-  setHeaderCellHoldActive: PropTypes.func,
-
-  /**
-   * Setter fn for selectionAreaData state value
-   */
-  setSelectionAreaData: PropTypes.func,
-
-  /**
-   * Setter fn for selectionAreas state value
-   */
-  setSelectionAreas: PropTypes.func,
-
-  /**
-   * The total columns width
-   */
-  totalColumnsWidth: PropTypes.number,
-
-  /**
-   * The total number of columns to be initially visible, additional columns will be rendered and
-   * visible via horizontal scrollbar
-   */
-  totalVisibleColumns: PropTypes.number,
-
-  /**
-   * Prop from react-table used to reorder columns
-   */
-  visibleColumns: PropTypes.array
-};