@carbon/ibm-products 2.38.0 → 2.40.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -33,14 +33,12 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
 
 // Default values for props
 var defaults = {
-  cellSize: 'sm',
   columns: Object.freeze([]),
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
@@ -49,13 +47,12 @@ var defaults = {
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
 };
-
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$cellSize = _ref.cellSize,
-    cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
+    cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
     className = _ref.className,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
@@ -75,7 +72,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     theme = _ref.theme,
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var multiKeyTrackingRef = useRef();
+  var multiKeyTrackingRef = useRef(null);
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
@@ -115,7 +112,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     _useState18 = _slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = useState(null),
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
     isActiveHeaderCellChanged = _useState20[0],
     setIsActiveHeaderCellChanged = _useState20[1];
@@ -126,10 +123,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing
-  });
+  }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState23 = useState(),
+  var _useState23 = useState(null),
     _useState24 = _slicedToArray(_useState23, 2),
     activeCellContent = _useState24[0],
     setActiveCellContent = _useState24[1];
@@ -180,13 +177,18 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 
   // Removes the active cell element
   var removeActiveCell = useCallback(function () {
-    var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    activeCellHighlight.style.display = 'none';
+    var _current;
+    var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === void 0 || (_current = spreadsheetRef.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    if (activeCellHighlight) {
+      activeCellHighlight.style.display = 'none';
+    }
   }, [spreadsheetRef]);
   var removeCellEditor = useCallback(function () {
     setCellEditorValue('');
     setIsEditing(false);
-    cellEditorRef.current.style.display = 'none';
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
+      cellEditorRef.current.style.display = 'none';
+    }
   }, []);
 
   // Remove cell editor if the active cell coordinates change and save with new cell data, this will
@@ -196,13 +198,16 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     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)) && isEditing) {
       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 = '';
+      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        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)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
+        var _activeCellFullData$r;
         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;
-        setActiveCellContent(activeCellFullData.render('Cell'));
+        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
@@ -242,7 +247,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,
     removeActiveCell: removeActiveCell,
-    removeCellSelections: removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
     removeCellEditor: removeCellEditor
   });
@@ -297,6 +301,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
     });
     removeCellSelections({
+      matcher: undefined,
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
@@ -304,7 +309,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
   var handleArrowKeyPress = useCallback(function (arrowKey) {
-    event.preventDefault();
+    var _event;
+    (_event = event) === null || _event === void 0 || _event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
     var updatedValue;
@@ -407,18 +413,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setIsEditing(true);
     setClickAndHoldActive(false);
     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 ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : null;
+    var activeCellValue;
+    if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
+      var _activeCellFullData$r2;
+      activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
+    }
     setCellEditorValue(activeCellValue || '');
-    cellEditorRulerRef.current.textContent = activeCellValue;
-    cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
+    if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+      cellEditorRulerRef.current.textContent = activeCellValue;
+    }
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
+      var _activeCellRef$curren;
+      cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === void 0 || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === void 0 ? void 0 : _activeCellRef$curren.width;
+    }
   };
 
   // Sets the initial placement of the cell editor cursor at the end of the text area
   // this is not done for us by default in Safari
   useEffect(function () {
     if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
-      cellEditorRef.current.setSelectionRange(cellEditorRulerRef.current.textContent.length, cellEditorRulerRef.current.textContent.length);
-      cellEditorRef.current.focus();
+      var _cellEditorRef$curren, _cellEditorRulerRef$c, _cellEditorRulerRef$c2, _cellEditorRef$curren2;
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 || _cellEditorRef$curren.setSelectionRange(Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c === void 0 || (_cellEditorRulerRef$c = _cellEditorRulerRef$c.textContent) === null || _cellEditorRulerRef$c === void 0 ? void 0 : _cellEditorRulerRef$c.length), Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c2 = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c2 === void 0 || (_cellEditorRulerRef$c2 = _cellEditorRulerRef$c2.textContent) === null || _cellEditorRulerRef$c2 === void 0 ? void 0 : _cellEditorRulerRef$c2.length));
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren2 = cellEditorRef.current) === null || _cellEditorRef$curren2 === void 0 || _cellEditorRef$curren2.focus();
     }
   }, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
   var handleActiveCellClick = function handleActiveCellClick() {
@@ -429,7 +445,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
       handleRowColumnHeaderClick({
         isKeyboard: false,
-        index: indexValue
+        index: Number(indexValue)
       });
     }
     return;
@@ -446,6 +462,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       var tempMatcher = uuidv4();
       setClickAndHoldActive(true);
       removeCellSelections({
+        matcher: null,
         spreadsheetRef: spreadsheetRef
       });
       setSelectionAreas([{
@@ -476,19 +493,21 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref5) {
     var isKeyboard = _ref5.isKeyboard,
       _ref5$index = _ref5.index,
-      index = _ref5$index === void 0 ? null : _ref5$index;
+      index = _ref5$index === void 0 ? -1 : _ref5$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,
       columns: columns,
+      currentMatcher: currentMatcher,
       setActiveCellCoordinates: setActiveCellCoordinates,
       setCurrentMatcher: setCurrentMatcher,
       setSelectionAreas: setSelectionAreas,
       spreadsheetRef: spreadsheetRef,
+      index: index,
       isKeyboard: isKeyboard,
       setSelectionAreaData: setSelectionAreaData,
-      index: index,
-      currentMatcher: currentMatcher
+      isHoldingCommandKey: null,
+      isHoldingShiftKey: null
     };
     // Select an entire column
     if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
@@ -612,7 +631,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setContainerHasFocus: setContainerHasFocus,
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
-    cellSize: cellSize,
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
@@ -662,10 +680,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }),
     onChange: function onChange(event) {
       setCellEditorValue(event.target.value);
-      cellEditorRulerRef.current.textContent = event.target.value;
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        cellEditorRulerRef.current.textContent = event.target.value;
+      }
     },
     ref: cellEditorRef,
-    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
+    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : '',
     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__default.createElement("pre", {
     "aria-hidden": true,
@@ -696,6 +716,7 @@ DataSpreadsheet.propTypes = {
   /**
    * The data that will build the column headers
    */
+  /**@ts-ignore */
   columns: PropTypes.arrayOf(PropTypes.shape({
     Header: PropTypes.string,
     accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -704,6 +725,7 @@ DataSpreadsheet.propTypes = {
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
    */
+  /**@ts-ignore */
   data: PropTypes.arrayOf(PropTypes.shape),
   /**
    * Sets the number of empty rows to be created when there is no data provided

package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -1,2 +1,139 @@
-export const DataSpreadsheetBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * 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, { Dispatch, SetStateAction, MutableRefObject } from 'react';
+import { ActiveCellCoordinates, Column } from './types';
+interface DataSpreadsheetBodyProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     *This is the ref of the button input, which is the active cell element
+     */
+    activeCellRef?: MutableRefObject<HTMLElement | undefined>;
+    /**
+     * Is the user clicking and holding in the data spreadsheet body
+     */
+    clickAndHoldActive?: boolean;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * This represents the id of the current cell selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * Function to set table body prop values
+     */
+    getTableBodyProps?: () => {
+        data: any;
+    };
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The event handler that is called to set the rows for the empty spreadsheet
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection areas change
+     */
+    onSelectionAreaChange?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * Prepare row function from react-table
+     */
+    prepareRow?: (...args: any[]) => void;
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: any[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * Array of selection area data
+     */
+    selectionAreaData?: object[];
+    /**
+     * Array of selection areas
+     */
+    selectionAreas?: any[];
+    /**
+     * Setter fn for activeCellCoordinates state value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for active cell inside of selection area
+     */
+    setActiveCellInsideSelectionArea?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for clickAndHold state value
+     */
+    setClickAndHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for column ordering, provided from react-table
+     */
+    setColumnOrder?: () => void;
+    /**
+     * Setter fn for containerHasFocus state value
+     */
+    setContainerHasFocus?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for currentMatcher state value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas state value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total columns width
+     */
+    totalColumnsWidth?: number;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Prop from react-table used to reorder columns
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetBody: React.ForwardRefExoticComponent<DataSpreadsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -63,21 +63,21 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn.rowHeight
-  });
+    rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+  }) || {};
 
   // Set custom css property containing the spreadsheet total width
   useEffect(function () {
-    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px(totalColumnsWidth + scrollBarSize));
+    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
   }, [ref, scrollBarSize, totalColumnsWidth]);
 
   // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
   useEffect(function () {
-    if (selectionAreaData.length) {
+    if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
       var _previousState$select;
       if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === 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);
+        onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
       }
     }
   }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
@@ -109,7 +109,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
             }),
             selectionId: area.matcher
           };
-          setSelectionAreaData(function (prev) {
+          setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
             var prevValues = deepCloneObject(prev);
             var newAreaData = prevValues.filter(function (item) {
               return item.selectionId !== area.matcher;
@@ -167,19 +167,28 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // 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) {
+    var listContainer;
+    var activeCellButton;
+    if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== void 0 && spreadsheetBodyRef.current) {
+      var _listContainer;
+      listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
+      activeCellButton = (_listContainer = listContainer) === null || _listContainer === void 0 ? void 0 : _listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    }
+    if (activeCellButton && (defaultColumn === null || defaultColumn === void 0 ? void 0 : 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;
+        var activeTargetElement = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
+        var _listContainer2 = ref === null || ref === void 0 ? void 0 : ref.current.querySelector(".".concat(blockClass, "__list--container"));
+        var newActiveCellTopPosition;
+        if (activeTargetElement && _listContainer2) {
+          newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === void 0 ? void 0 : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
+        }
         activeCellButton.style.top = px(newActiveCellTopPosition);
         removeCellSelections({
+          matcher: undefined,
           spreadsheetRef: ref
         });
-        selectionAreas.map(function (area) {
+        selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
             return createCellSelectionArea({
               ref: ref,
@@ -202,12 +211,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var removeDuplicateSelections = useCallback(function () {
     var uniqueAttrArray = [],
       removedSelectionAreaMatcherArr = [];
-    ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
-      var _selectorEl$style = selectorEl.style,
-        top = _selectorEl$style.top,
-        left = _selectorEl$style.left,
-        height = _selectorEl$style.height,
-        width = _selectorEl$style.width;
+    ref === null || ref === void 0 || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
+      var _style = selectorEl.style,
+        top = _style.top,
+        left = _style.left,
+        height = _style.height,
+        width = _style.width;
       var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
       if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
         uniqueAttrArray.push(uniqueAttrStr);
@@ -219,13 +228,13 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
     //clean the duplicate selectionAreaData and selectionArea
     if (removedSelectionAreaMatcherArr.length) {
-      setSelectionAreas(function (prev) {
+      setSelectionAreas === null || setSelectionAreas === void 0 || setSelectionAreas(function (prev) {
         var prevValues = deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.matcher);
         });
       });
-      setSelectionAreaData(function (prev) {
+      setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
         var prevValues = deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.selectionId);
@@ -248,14 +257,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
-    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
-    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
+    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr")) || new HTMLDivElement();
+    headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === void 0 ? void 0 : contentScrollRef.current.scrollLeft;
   };
   useEffect(function () {
-    contentScrollRef.current.addEventListener('scroll', function (event) {
+    contentScrollRef.current.addEventListener('scroll', function () {
       return handleBodyScroll();
     });
-    var contentScrollElementRef = contentScrollRef.current;
+    var contentScrollElementRef = contentScrollRef.current || new HTMLElement();
     return function () {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
@@ -280,12 +289,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         _toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
           var _headerGroups$;
           var emptyCell = {};
-          (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
+          headerGroups === null || headerGroups === void 0 || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
             emptyCell[header.id] = null;
           });
           emptyRowData.push(emptyCell);
         });
-        onDataUpdate(emptyRowData);
+        onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
       };
       buildEmptyRows();
     }
@@ -298,9 +307,9 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var RenderRow = useCallback(function (_ref3) {
     var index = _ref3.index,
       style = _ref3.style;
-    var row = rows[index];
+    var row = rows === null || rows === void 0 ? void 0 : rows[index];
     if (rows && rows.length) {
-      prepareRow(row);
+      prepareRow === null || prepareRow === void 0 || prepareRow(row);
       var rowProps = prepareProps(row.getRowProps({
         style: style
       }), 'key');
@@ -355,12 +364,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps()), /*#__PURE__*/React__default.createElement(FixedSizeList, {
+  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React__default.createElement(FixedSizeList, {
     className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
-    itemCount: rows.length || defaultEmptyRowCount,
+    itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
     width: getSpreadsheetWidth({
+      headerGroup: undefined,
+      type: undefined,
       scrollBarSizeValue: scrollBarSize,
       totalVisibleColumns: totalVisibleColumns,
       defaultColumn: defaultColumn,
@@ -374,6 +385,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: PropTypes.shape({
     row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -381,6 +393,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    *This is the ref of the button input, which is the active cell element
    */
+  /**@ts-ignore */
   activeCellRef: PropTypes.object,
   /**
    * Is the user clicking and holding in the data spreadsheet body
@@ -397,6 +410,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: PropTypes.shape({
     rowHeight: PropTypes.number,
     rowHeaderWidth: PropTypes.number,
@@ -498,6 +512,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Prop from react-table used to reorder columns
    */
+  /**@ts-ignore */
   visibleColumns: PropTypes.array
 };