@carbon/ibm-products 2.59.0 → 2.60.0-rc.0

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -49,37 +49,35 @@ var defaults = {
   onDataUpdate: Object.freeze(function () {}),
   onColDrag: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
-  onSelectionAreaChange: Object.freeze(function () {}),
-  theme: 'light'
-};
+  onSelectionAreaChange: Object.freeze(function () {})};
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$cellSize = _ref.cellSize,
-    cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
+    cellSize = _ref$cellSize === undefined ? 'sm' : _ref$cellSize,
     className = _ref.className,
     _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
+    columns = _ref$columns === undefined ? defaults.columns : _ref$columns,
     _ref$data = _ref.data,
-    data = _ref$data === void 0 ? defaults.data : _ref$data,
+    data = _ref$data === undefined ? defaults.data : _ref$data,
     _ref$defaultEmptyRowC = _ref.defaultEmptyRowCount,
-    defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
+    defaultEmptyRowCount = _ref$defaultEmptyRowC === undefined ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
     _ref$onDataUpdate = _ref.onDataUpdate,
-    onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
+    onDataUpdate = _ref$onDataUpdate === undefined ? defaults.onDataUpdate : _ref$onDataUpdate,
     _ref$onColDrag = _ref.onColDrag,
-    onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
+    onColDrag = _ref$onColDrag === undefined ? defaults.onColDrag : _ref$onColDrag,
     id = _ref.id,
     _ref$onActiveCellChan = _ref.onActiveCellChange,
-    onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
+    onActiveCellChange = _ref$onActiveCellChan === undefined ? defaults.onActiveCellChange : _ref$onActiveCellChan,
     _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
-    onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+    onSelectionAreaChange = _ref$onSelectionAreaC === undefined ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
     renderRowHeader = _ref.renderRowHeader,
     renderRowHeaderDirection = _ref.renderRowHeaderDirection,
     _ref$disableColumnSwa = _ref.disableColumnSwapping,
-    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
+    disableColumnSwapping = _ref$disableColumnSwa === undefined ? false : _ref$disableColumnSwa,
     _ref$readOnlyTable = _ref.readOnlyTable,
-    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
+    readOnlyTable = _ref$readOnlyTable === undefined ? false : _ref$readOnlyTable,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -231,12 +229,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         setPastColumns([]);
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
+  }, [previousState === null || previousState === undefined ? undefined : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
 
   // Removes the active cell element
   var removeActiveCell = React.useCallback(function () {
     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"));
+    var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === undefined || (_current = spreadsheetRef.current) === null || _current === undefined ? undefined : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
     if (activeCellHighlight) {
       activeCellHighlight.style.display = 'none';
     }
@@ -244,7 +242,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var removeCellEditor = React.useCallback(function () {
     setCellEditorValue('');
     setIsEditing(false);
-    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
+    if (cellEditorRef !== null && cellEditorRef !== undefined && cellEditorRef.current) {
       cellEditorRef.current.style.display = 'none';
     }
   }, []);
@@ -252,25 +250,25 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // 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
   React.useEffect(function () {
-    var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
-    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[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row)].cells[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column)];
+    var prevCoords = previousState === null || previousState === undefined ? undefined : previousState.activeCellCoordinates;
+    if (((prevCoords === null || prevCoords === undefined ? undefined : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) || (prevCoords === null || prevCoords === undefined ? undefined : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column)) && isEditing) {
+      var cellProps = rows[Number(prevCoords === null || prevCoords === undefined ? undefined : prevCoords.row)].cells[Number(prevCoords === null || prevCoords === undefined ? undefined : prevCoords.column)];
       removeCellEditor();
-      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
-      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+      updateData(prevCoords === null || prevCoords === undefined ? undefined : prevCoords.row, cellProps.column.id, undefined);
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== undefined && 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 = 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;
+    if ((prevCoords === null || prevCoords === undefined ? undefined : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) || (prevCoords === null || prevCoords === undefined ? undefined : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column)) {
+      if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) !== 'header') {
+        var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column] : null;
         if (activeCellFullData) {
           setActiveCellContent(activeCellFullData.render('Cell'));
         } else {
           setActiveCellContent(null);
         }
       }
-      if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
+      if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
         setIsActiveHeaderCellChanged(function (prev) {
           return !prev;
@@ -283,14 +281,14 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isBlurSpreadsheet.current = false;
       removeCellEditor();
     }
-  }, [isBlurSpreadsheet, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
+  }, [isBlurSpreadsheet, activeCellCoordinates, previousState === null || previousState === undefined ? undefined : previousState.activeCellCoordinates, previousState === null || previousState === undefined ? undefined : previousState.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
   var createActiveCell = React.useCallback(function (_ref3) {
     var placementElement = _ref3.placementElement,
       coords = _ref3.coords,
       _ref3$addToHeader = _ref3.addToHeader,
-      addToHeader = _ref3$addToHeader === void 0 ? false : _ref3$addToHeader;
-    var activeCellFullData = typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? rows[coords === null || coords === void 0 ? void 0 : coords.row].cells[coords === null || coords === void 0 ? void 0 : coords.column] : null;
-    var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === void 0 ? void 0 : coords.column] : null;
+      addToHeader = _ref3$addToHeader === undefined ? false : _ref3$addToHeader;
+    var activeCellFullData = typeof (coords === null || coords === undefined ? undefined : coords.column) === 'number' && typeof (coords === null || coords === undefined ? undefined : coords.row) === 'number' ? rows[coords === null || coords === undefined ? undefined : coords.row].cells[coords === null || coords === undefined ? undefined : coords.column] : null;
+    var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === undefined ? undefined : coords.column] : null;
     createActiveCellFn.createActiveCellFn({
       placementElement: placementElement,
       coords: coords,
@@ -340,10 +338,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [activeCellCoordinates]);
   var updateActiveCellCoordinates = React.useCallback(function (_ref4) {
     var _ref4$coords = _ref4.coords,
-      coords = _ref4$coords === void 0 ? _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates) : _ref4$coords,
+      coords = _ref4$coords === undefined ? _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates) : _ref4$coords,
       updatedValue = _ref4.updatedValue,
       _ref4$optOutOfSelecti = _ref4.optOutOfSelectionAreaUpdate,
-      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === void 0 ? false : _ref4$optOutOfSelecti;
+      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === undefined ? false : _ref4$optOutOfSelecti;
     var newActiveCell = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, coords), updatedValue);
     setActiveCellCoordinates(newActiveCell);
     // Only run if the active cell is _not_ a header cell. This will add a point1 object
@@ -378,7 +376,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [isEditing]);
   var handleArrowKeyPress = React.useCallback(function (arrowKey) {
     var _event;
-    (_event = event) === null || _event === void 0 || _event.preventDefault();
+    (_event = event) === null || _event === undefined || _event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
     var updatedValue;
@@ -481,31 +479,31 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _activeCellFullData$r;
     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 === null || activeCellFullData === void 0 || (_activeCellFullData$r = activeCellFullData.row) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[Number(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value;
+    var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column] : null;
+    var activeCellValue = activeCellFullData === null || activeCellFullData === undefined || (_activeCellFullData$r = activeCellFullData.row) === null || _activeCellFullData$r === undefined || (_activeCellFullData$r = _activeCellFullData$r.cells) === null || _activeCellFullData$r === undefined || (_activeCellFullData$r = _activeCellFullData$r[Number(activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column)]) === null || _activeCellFullData$r === undefined ? undefined : _activeCellFullData$r.value;
     setCellEditorValue(activeCellValue || '');
-    if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+    if (cellEditorRulerRef !== null && cellEditorRulerRef !== undefined && cellEditorRulerRef.current) {
       cellEditorRulerRef.current.textContent = activeCellValue;
     }
-    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
+    if (cellEditorRef !== null && cellEditorRef !== undefined && cellEditorRef.current && activeCellRef !== null && activeCellRef !== undefined && 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;
+      cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === undefined || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === undefined || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === undefined ? undefined : _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
   React.useEffect(function () {
-    if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
+    if (isEditing && !(previousState !== null && previousState !== undefined && previousState.isEditing)) {
       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();
+      cellEditorRef === null || cellEditorRef === undefined || (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === undefined || _cellEditorRef$curren.setSelectionRange(Number(cellEditorRulerRef === null || cellEditorRulerRef === undefined || (_cellEditorRulerRef$c = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c === undefined || (_cellEditorRulerRef$c = _cellEditorRulerRef$c.textContent) === null || _cellEditorRulerRef$c === undefined ? undefined : _cellEditorRulerRef$c.length), Number(cellEditorRulerRef === null || cellEditorRulerRef === undefined || (_cellEditorRulerRef$c2 = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c2 === undefined || (_cellEditorRulerRef$c2 = _cellEditorRulerRef$c2.textContent) === null || _cellEditorRulerRef$c2 === undefined ? undefined : _cellEditorRulerRef$c2.length));
+      cellEditorRef === null || cellEditorRef === undefined || (_cellEditorRef$curren2 = cellEditorRef.current) === null || _cellEditorRef$curren2 === undefined || _cellEditorRef$curren2.focus();
     }
-  }, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
+  }, [isEditing, previousState === null || previousState === undefined ? undefined : previousState.isEditing]);
   var handleActiveCellClick = function handleActiveCellClick() {
-    if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
-      var indexValue = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
-      if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
+    if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header') {
+      var indexValue = (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' ? activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column : activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row;
+      if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header') {
         return;
       }
       handleRowColumnHeaderClick({
@@ -523,7 +521,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // Mouse down on active cell
   var handleActiveCellMouseDown = function handleActiveCellMouseDown() {
-    if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
+    if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) !== 'header' || (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) !== 'header') {
       var tempMatcher = uuidv4.default();
       setClickAndHoldActive(true);
       removeCellSelections.removeCellSelections({
@@ -545,10 +543,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
     var key = event.key;
     if (key === 'Enter' && !activeCellInsideSelectionArea && !readOnlyTable) {
-      if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
+      if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) !== 'header') {
         startEditMode();
       }
-      if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
+      if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header') {
         handleRowColumnHeaderClick({
           isKeyboard: true
         });
@@ -558,7 +556,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref6) {
     var isKeyboard = _ref6.isKeyboard,
       _ref6$index = _ref6.index,
-      index = _ref6$index === void 0 ? -1 : _ref6$index;
+      index = _ref6$index === undefined ? -1 : _ref6$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,
@@ -575,18 +573,18 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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') {
+    if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) !== 'header') {
       handleHeaderCellSelection.handleHeaderCellSelection(_rollupPluginBabelHelpers.objectSpread2({
         type: 'column'
       }, handleHeaderCellProps));
     }
     // Select an entire row
-    if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
+    if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) !== 'header') {
       handleHeaderCellSelection.handleHeaderCellSelection(_rollupPluginBabelHelpers.objectSpread2({
         type: 'row'
       }, handleHeaderCellProps));
     }
-    if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header') {
+    if ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === 'header') {
       selectAllCells.selectAllCells({
         ref: spreadsheetRef,
         setCurrentMatcher: setCurrentMatcher,
@@ -657,8 +655,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
-    "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
-    "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
+    "aria-rowcount": (rows === null || rows === undefined ? undefined : rows.length) || 0,
+    "aria-colcount": (columns === null || columns === undefined ? undefined : columns.length) || 0,
     "aria-label": spreadsheetAriaLabel,
     onKeyDown: handleKeyPressEvent,
     onFocus: function onFocus() {
@@ -760,13 +758,13 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: function onChange(event) {
       if (previousState.isEditing) {
         setCellEditorValue(event.target.value);
-        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        if (cellEditorRulerRef !== null && cellEditorRulerRef !== undefined && 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) : '',
+    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.column) : '',
     className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React.createElement("pre", {
     "aria-hidden": true,

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -71,28 +71,28 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var previousState = usePreviousValue.usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+    rowHeight: defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.rowHeight
   }) || {};
 
   // Set custom css property containing the spreadsheet total width
   React.useEffect(function () {
-    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
+    ref === null || ref === undefined || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), layout.px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
   }, [ref, scrollBarSize, totalColumnsWidth]);
 
   // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
   React.useEffect(function () {
-    if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
+    if (selectionAreaData !== null && selectionAreaData !== undefined && selectionAreaData.length) {
       var _previousState$select, _selectionAreaData$, _previousState$select2;
       var selectionChanged = false;
-      if ((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) || (selectionAreaData === null || selectionAreaData === void 0 || (_selectionAreaData$ = selectionAreaData[0]) === null || _selectionAreaData$ === void 0 ? void 0 : _selectionAreaData$.cells.length) !== (previousState === null || previousState === void 0 || (_previousState$select2 = previousState.selectionAreaData) === null || _previousState$select2 === void 0 || (_previousState$select2 = _previousState$select2[0]) === null || _previousState$select2 === void 0 ? void 0 : _previousState$select2.cells.length)) {
+      if ((previousState === null || previousState === undefined || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === undefined ? undefined : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === undefined ? undefined : selectionAreaData.length) || (selectionAreaData === null || selectionAreaData === undefined || (_selectionAreaData$ = selectionAreaData[0]) === null || _selectionAreaData$ === undefined ? undefined : _selectionAreaData$.cells.length) !== (previousState === null || previousState === undefined || (_previousState$select2 = previousState.selectionAreaData) === null || _previousState$select2 === undefined || (_previousState$select2 = _previousState$select2[0]) === null || _previousState$select2 === undefined ? undefined : _previousState$select2.cells.length)) {
         selectionChanged = true;
       }
-      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || selectionChanged) {
-        onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
+      if (!clickAndHoldActive && previousState !== null && previousState !== undefined && previousState.clickAndHoldActive || selectionChanged) {
+        onSelectionAreaChange === null || onSelectionAreaChange === undefined || onSelectionAreaChange(selectionAreaData);
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
+  }, [previousState === null || previousState === undefined ? undefined : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === undefined ? undefined : previousState.clickAndHoldActive]);
 
   // Create cell selection areas based on selectionAreas array
   React.useEffect(function () {
@@ -121,7 +121,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             }),
             selectionId: area.matcher
           };
-          setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
+          setSelectionAreaData === null || setSelectionAreaData === undefined || setSelectionAreaData(function (prev) {
             var prevValues = deepCloneObject.deepCloneObject(prev);
             var newAreaData = prevValues.filter(function (item) {
               return item.selectionId !== area.matcher;
@@ -183,26 +183,26 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     var listContainer;
     var activeCellButton;
-    if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== void 0 && spreadsheetBodyRef.current) {
+    if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== undefined && 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"));
+      listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === undefined ? undefined : spreadsheetBodyRef.current;
+      activeCellButton = (_listContainer = listContainer) === null || _listContainer === undefined ? undefined : _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 (activeCellButton && (defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.rowHeight) !== previousState.rowHeight) {
+      activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.rowHeight, "px");
       if (activeCellCoordinates) {
-        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 activeTargetElement = ref === null || ref === undefined ? undefined : ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
+        var _listContainer2 = ref === null || ref === undefined ? undefined : 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;
+          newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === undefined ? undefined : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
         }
         activeCellButton.style.top = layout.px(newActiveCellTopPosition);
         removeCellSelections.removeCellSelections({
           matcher: undefined,
           spreadsheetRef: ref
         });
-        selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
+        selectionAreas === null || selectionAreas === undefined || selectionAreas.map(function (area) {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
             return createCellSelectionArea.createCellSelectionArea({
               ref: ref,
@@ -218,14 +218,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === undefined ? undefined : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
   var removeDuplicateSelections = React.useCallback(function () {
     var uniqueAttrArray = [],
       removedSelectionAreaMatcherArr = [];
-    ref === null || ref === void 0 || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
+    ref === null || ref === undefined || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
       var _style = selectorEl.style,
         top = _style.top,
         left = _style.left,
@@ -242,13 +242,13 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     //clean the duplicate selectionAreaData and selectionArea
     if (removedSelectionAreaMatcherArr.length) {
-      setSelectionAreas === null || setSelectionAreas === void 0 || setSelectionAreas(function (prev) {
+      setSelectionAreas === null || setSelectionAreas === undefined || setSelectionAreas(function (prev) {
         var prevValues = deepCloneObject.deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.matcher);
         });
       });
-      setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
+      setSelectionAreaData === null || setSelectionAreaData === undefined || setSelectionAreaData(function (prev) {
         var prevValues = deepCloneObject.deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.selectionId);
@@ -272,7 +272,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.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")) || new HTMLDivElement();
-    headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === void 0 ? void 0 : contentScrollRef.current.scrollLeft;
+    headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === undefined ? undefined : contentScrollRef.current.scrollLeft;
   };
   React.useEffect(function () {
     contentScrollRef.current.addEventListener('scroll', function () {
@@ -297,22 +297,22 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // Builds the empty rows and calls `onDataUpdate` to set the new empty rows
   // using defaultEmptyRowCount to determine how many empty rows are created.
   React.useEffect(function () {
-    if (!(rows !== null && rows !== void 0 && rows.length)) {
+    if (!(rows !== null && rows !== undefined && rows.length)) {
       var buildEmptyRows = function buildEmptyRows() {
         var emptyRowData = [];
         _rollupPluginBabelHelpers.toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
           var _headerGroups$;
           var emptyCell = {};
-          headerGroups === null || headerGroups === void 0 || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
+          headerGroups === null || headerGroups === undefined || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === undefined || _headerGroups$.headers.map(function (header) {
             emptyCell[header.id] = null;
           });
           emptyRowData.push(emptyCell);
         });
-        onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
+        onDataUpdate === null || onDataUpdate === undefined || onDataUpdate(emptyRowData);
       };
       buildEmptyRows();
     }
-    if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
+    if (headerGroups !== null && headerGroups !== undefined && headerGroups[0] && typeof setCurrentColumns === 'function') {
       var headers = headerGroups[0].headers;
       setCurrentColumns(headers);
     }
@@ -325,9 +325,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var RenderRow = React.useCallback(function (_ref3) {
     var index = _ref3.index,
       style = _ref3.style;
-    var row = rows === null || rows === void 0 ? void 0 : rows[index];
+    var row = rows === null || rows === undefined ? undefined : rows[index];
     if (rows && rows.length) {
-      prepareRow === null || prepareRow === void 0 || prepareRow(row);
+      prepareRow === null || prepareRow === undefined || prepareRow(row);
       var rowProps = propsHelper.prepareProps(row.getRowProps({
         style: style
       }), 'key');
@@ -348,9 +348,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+          width: defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.rowHeaderWidth,
           flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
       }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
@@ -363,7 +363,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           role: "gridcell",
           style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
             display: 'grid',
-            minWidth: (cell === null || cell === 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)
+            minWidth: (cell === null || cell === undefined || (_cell$column = cell.column) === null || _cell$column === undefined ? undefined : _cell$column.width) || (defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.width)
           })
         }), /*#__PURE__*/React.createElement("button", {
           id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
@@ -378,16 +378,16 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, renderRowHeader, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, columns, defaultColumn, renderRowHeaderDirection]);
+  }, [prepareRow, renderRowHeader, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === undefined ? undefined : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, columns, defaultColumn, renderRowHeaderDirection]);
   var spreadsheetBodyRef = React.useRef(undefined);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React.createElement(reactWindow.FixedSizeList, {
+  }, getTableBodyProps === null || getTableBodyProps === undefined ? undefined : getTableBodyProps()), /*#__PURE__*/React.createElement(reactWindow.FixedSizeList, {
     className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
-    itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
-    itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
+    itemCount: (rows === null || rows === undefined ? undefined : rows.length) || defaultEmptyRowCount,
+    itemSize: defaultColumn === null || defaultColumn === undefined ? undefined : defaultColumn.rowHeight,
     width: getSpreadsheetWidth.getSpreadsheetWidth({
       headerGroup: undefined,
       type: undefined,
@@ -398,7 +398,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       visibleColumns: visibleColumns
     }),
     outerRef: contentScrollRef
-  }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
+  }, rows !== null && rows !== undefined && rows.length ? RenderRow : RenderEmptyRows));
 });
 DataSpreadsheetBody.propTypes = {
   /**