@carbon/ibm-products 2.65.0-rc.0 → 2.66.0-rc.0

package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var settings = require('../../../settings.js');
 var checkForHoldingKey = require('./checkForHoldingKey.js');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
@@ -19,62 +18,46 @@ var handleActiveCellInSelectionEnter = require('./handleActiveCellInSelectionEnt
 var handleActiveCellInSelectionTab = require('./handleActiveCellInSelectionTab.js');
 var handleCellDeletion = require('./handleCellDeletion.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
+const blockClass = `${settings.pkg.prefix}--data-spreadsheet`;
 
 // onClick fn for each cell in the data spreadsheet body,
 // adds the active cell highlight
 
-var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event) {
+const handleBodyCellClick = function (cell, columnIndex, event) {
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
-  var currentMatcher = rest[0],
-    activeCellCoordinates = rest[1],
-    selectionAreas = rest[2],
-    setActiveCellCoordinates = rest[3],
-    setSelectionAreas = rest[4],
-    setContainerHasFocus = rest[5],
-    setClickAndHoldActive = rest[6],
-    setCurrentMatcher = rest[7],
-    ref = rest[8],
-    setSelectionAreaData = rest[9],
-    setActiveCellInsideSelectionArea = rest[10],
-    activeCellRef = rest[11],
-    setValidStartingPoint = rest[12];
+  const [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint] = rest;
   event.preventDefault();
-  var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
-  var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
+  const closestBodyCell = event.target.closest(`.${blockClass}__body--td`);
+  const isValidSelectionAreaStart = closestBodyCell.classList.contains(`${blockClass}__body--td`);
   setValidStartingPoint(isValidSelectionAreaStart);
-  var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
+  const isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+  const isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
   setContainerHasFocus(true);
-  var activeCoordinates = {
+  const activeCoordinates = {
     row: cell.row.index,
     column: columnIndex
   };
-  var tempMatcher = uuidv4.default();
+  const tempMatcher = uuidv4.default();
   setClickAndHoldActive(true);
 
   // prevent multiple selections unless cmd key is held
   // meaning that selectionAreas should only have one item by default
   if (isHoldingCommandKey) {
-    var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    const activeCellElement = ref.current.querySelector(`.${blockClass}__active-cell--highlight`);
     activeCellElement.setAttribute('data-selection-id', tempMatcher);
     setActiveCellInsideSelectionArea(true);
     setActiveCellCoordinates(activeCoordinates);
     setCurrentMatcher(tempMatcher);
-    setSelectionAreas(function (prev) {
-      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [{
-        point1: activeCoordinates,
-        matcher: tempMatcher
-      }]);
-    });
+    setSelectionAreas(prev => [...prev, {
+      point1: activeCoordinates,
+      matcher: tempMatcher
+    }]);
   } else if (isHoldingShiftKey) {
     setContainerHasFocus(true);
-    var selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
-    var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-      return item.matcher === currentMatcher;
-    });
+    const selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
+    const indexOfItemToUpdate = selectionAreaClone.findIndex(item => 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
@@ -105,30 +88,25 @@ var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event)
     setSelectionAreaData([]);
   }
 };
-var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
+const handleBodyCellHover = function (cell, columnIndex) {
   for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
     rest[_key2 - 2] = arguments[_key2];
   }
-  var clickAndHoldActive = rest[0],
-    currentMatcher = rest[1],
-    setSelectionAreas = rest[2];
+  const [clickAndHoldActive, currentMatcher, setSelectionAreas] = rest;
   if (clickAndHoldActive) {
-    var cellCoordinates = {
+    const cellCoordinates = {
       row: cell.row.index,
       column: columnIndex
     };
-    setSelectionAreas(function (prev) {
-      var _selectionAreaClone$i, _selectionAreaClone$i2;
-      var selectionAreaClone = deepCloneObject.deepCloneObject(prev);
-      var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-        return item.matcher === currentMatcher;
-      });
+    setSelectionAreas(prev => {
+      const selectionAreaClone = deepCloneObject.deepCloneObject(prev);
+      const indexOfItemToUpdate = selectionAreaClone.findIndex(item => 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) {
+      if (selectionAreaClone[indexOfItemToUpdate].point2?.row === cellCoordinates.row && selectionAreaClone[indexOfItemToUpdate].point2?.column === cellCoordinates.column) {
         return prev;
       }
       selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
@@ -137,61 +115,34 @@ var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
     });
   }
 };
-var handleRowHeaderClick = function handleRowHeaderClick(index, event) {
+const handleRowHeaderClick = function (index, event) {
   for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
     rest[_key3 - 2] = arguments[_key3];
   }
-  var columns = rest[0],
-    ref = rest[1],
-    setSelectionAreas = rest[2],
-    setCurrentMatcher = rest[3],
-    setActiveCellCoordinates = rest[4],
-    activeCellCoordinates = rest[5],
-    rows = rest[6],
-    setSelectionAreaData = rest[7];
-  var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+  const [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData] = rest;
+  const isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
   handleHeaderCellSelection.handleHeaderCellSelection({
     type: 'row',
-    activeCellCoordinates: activeCellCoordinates,
-    rows: rows,
-    columns: columns,
-    setActiveCellCoordinates: setActiveCellCoordinates,
-    setCurrentMatcher: setCurrentMatcher,
-    setSelectionAreas: setSelectionAreas,
+    activeCellCoordinates,
+    rows,
+    columns,
+    setActiveCellCoordinates,
+    setCurrentMatcher,
+    setSelectionAreas,
     spreadsheetRef: ref,
-    index: index,
-    setSelectionAreaData: setSelectionAreaData,
-    isHoldingCommandKey: isHoldingCommandKey
+    index,
+    setSelectionAreaData,
+    isHoldingCommandKey
   });
 };
-var handleKeyPress = function handleKeyPress(event) {
+const handleKeyPress = function (event) {
   for (var _len4 = arguments.length, rest = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
     rest[_key4 - 1] = arguments[_key4];
   }
-  var activeCellInsideSelectionArea = rest[0],
-    updateActiveCellCoordinates = rest[1],
-    activeCellCoordinates = rest[2],
-    removeActiveCell = rest[3],
-    columns = rest[4],
-    rows = rest[5],
-    spreadsheetRef = rest[6],
-    currentMatcher = rest[7],
-    removeCellEditor = rest[8],
-    selectionAreas = rest[9],
-    handleHomeEndKey = rest[10],
-    keysPressedList = rest[11],
-    usingMac = rest[12],
-    updateData = rest[13],
-    checkForReturnCondition = rest[14],
-    handleArrowKeyPress = rest[15],
-    setSelectionAreas = rest[16],
-    setSelectionAreaData = rest[17],
-    setCurrentMatcher = rest[18],
-    activeCellRef = rest[19],
-    setActiveCellCoordinates = rest[20],
-    setContainerHasFocus = rest[21],
-    setActiveCellContent = rest[22];
-  var key = event.key;
+  const [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent] = rest;
+  const {
+    key
+  } = event;
   // Command keys need to be returned as there is default browser behavior with these keys
   // Needs to be returned in editing mode
   if (checkForReturnCondition(key)) {
@@ -200,30 +151,30 @@ var handleKeyPress = function handleKeyPress(event) {
 
   // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
   if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
-    if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
+    if (selectionAreas?.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
       setSelectionAreas([]);
       setSelectionAreaData([]);
       removeCellSelections.removeCellSelections({
-        spreadsheetRef: spreadsheetRef
+        spreadsheetRef
       });
     }
   }
-  if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
+  if (keysPressedList?.length > 1) {
     handleMultipleKeys.handleMultipleKeys({
-      activeCellCoordinates: activeCellCoordinates,
-      event: event,
-      keysPressedList: keysPressedList,
-      selectionAreas: selectionAreas,
-      currentMatcher: currentMatcher,
-      rows: rows,
-      setSelectionAreas: setSelectionAreas,
-      columns: columns,
-      updateActiveCellCoordinates: updateActiveCellCoordinates,
-      spreadsheetRef: spreadsheetRef,
+      activeCellCoordinates,
+      event,
+      keysPressedList,
+      selectionAreas,
+      currentMatcher,
+      rows,
+      setSelectionAreas,
+      columns,
+      updateActiveCellCoordinates,
+      spreadsheetRef,
       removeCellSelections: removeCellSelections.removeCellSelections,
-      blockClass: blockClass,
-      setCurrentMatcher: setCurrentMatcher,
-      usingMac: usingMac
+      blockClass,
+      setCurrentMatcher,
+      usingMac
     });
   }
 
@@ -236,13 +187,13 @@ var handleKeyPress = function handleKeyPress(event) {
       case 'Backspace':
       case 'Delete':
         {
-          var deleteParams = {
-            selectionAreas: selectionAreas,
-            currentMatcher: currentMatcher,
-            rows: rows,
-            setActiveCellContent: setActiveCellContent,
-            updateData: updateData,
-            activeCellCoordinates: activeCellCoordinates
+          const deleteParams = {
+            selectionAreas,
+            currentMatcher,
+            rows,
+            setActiveCellContent,
+            updateData,
+            activeCellCoordinates
           };
           handleCellDeletion.handleCellDeletion(deleteParams);
           break;
@@ -251,11 +202,11 @@ var handleKeyPress = function handleKeyPress(event) {
       case 'Enter':
         {
           handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter({
-            activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-            activeCellCoordinates: activeCellCoordinates,
-            activeCellRef: activeCellRef,
-            selectionAreas: selectionAreas,
-            updateActiveCellCoordinates: updateActiveCellCoordinates
+            activeCellInsideSelectionArea,
+            activeCellCoordinates,
+            activeCellRef,
+            selectionAreas,
+            updateActiveCellCoordinates
           });
           break;
         }
@@ -278,11 +229,11 @@ var handleKeyPress = function handleKeyPress(event) {
           if (activeCellInsideSelectionArea) {
             event.preventDefault();
             return handleActiveCellInSelectionTab.handleActiveCellInSelectionTab({
-              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-              activeCellCoordinates: activeCellCoordinates,
-              activeCellRef: activeCellRef,
-              selectionAreas: selectionAreas,
-              updateActiveCellCoordinates: updateActiveCellCoordinates
+              activeCellInsideSelectionArea,
+              activeCellCoordinates,
+              activeCellRef,
+              selectionAreas,
+              updateActiveCellCoordinates
             });
           }
           setSelectionAreas([]);

package/lib/components/DataSpreadsheet/utils/createActiveCellFn.js

@@ -10,48 +10,48 @@
 var layout = require('@carbon/layout');
 var settings = require('../../../settings.js');
 
-var createActiveCellFn = function createActiveCellFn(_ref) {
-  var placementElement = _ref.placementElement,
-    coords = _ref.coords,
-    _ref$addToHeader = _ref.addToHeader,
-    addToHeader = _ref$addToHeader === void 0 ? false : _ref$addToHeader,
-    contextRef = _ref.contextRef,
-    _ref$blockClass = _ref.blockClass,
-    blockClass = _ref$blockClass === void 0 ? "".concat(settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-    onActiveCellChange = _ref.onActiveCellChange,
-    activeCellValue = _ref.activeCellValue,
-    activeCellRef = _ref.activeCellRef,
-    cellEditorRef = _ref.cellEditorRef,
-    defaultColumn = _ref.defaultColumn;
+const createActiveCellFn = _ref => {
+  let {
+    placementElement,
+    coords,
+    addToHeader = false,
+    contextRef,
+    blockClass = `${settings.pkg.prefix}--data-spreadsheet`,
+    onActiveCellChange,
+    activeCellValue,
+    activeCellRef,
+    cellEditorRef,
+    defaultColumn
+  } = _ref;
   if (!coords) {
     return;
   }
   // If the active cell is in the column header row (very first), we need to append this element
   // to `.${blockClass}__header--container`, otherwise it should be appended to `.${blockClass}__listContainer` firstElementChild
-  var point1Element = document.querySelector("[data-row-index=\"".concat(coords.row, "\"][data-column-index=\"").concat(coords.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
-  var selectionAreaCellWidth = point1Element.offsetWidth;
-  var selectionAreaCellHeight = point1Element.offsetHeight;
-  var activeElementContainer = addToHeader ? contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__header--container")) : contextRef === null || contextRef === void 0 ? void 0 : contextRef.current.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
-  var relativePosition = {
+  const point1Element = document.querySelector(`[data-row-index="${coords.row}"][data-column-index="${coords.column}"]`) || document.querySelector(`.${blockClass}__body--td`); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
+  const selectionAreaCellWidth = point1Element.offsetWidth;
+  const selectionAreaCellHeight = point1Element.offsetHeight;
+  const activeElementContainer = addToHeader ? contextRef?.current.querySelector(`.${blockClass}__header--container`) : contextRef?.current.querySelector(`.${blockClass}__list--container`).firstElementChild;
+  const relativePosition = {
     top: placementElement ? placementElement.getBoundingClientRect().top - activeElementContainer.getBoundingClientRect().top : coords.row === 0 ? 0 : selectionAreaCellHeight * coords.row,
     // calculate top value here if virtualized row is not in DOM
     left: placementElement ? placementElement.getBoundingClientRect().left - activeElementContainer.getBoundingClientRect().left : coords.column === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : selectionAreaCellWidth * coords.column + (defaultColumn.rowHeaderWidth - 4) // calculate left value here if virtualized row is not in DOM, accounting for row header cell width (including borders)
   };
-  var activeCellButton = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current;
-  activeCellButton.style.width = layout.px(placementElement ? placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetWidth : selectionAreaCellWidth);
-  activeCellButton.style.height = layout.px(placementElement ? placementElement === null || placementElement === void 0 ? void 0 : placementElement.offsetHeight : selectionAreaCellHeight);
+  const activeCellButton = activeCellRef?.current;
+  activeCellButton.style.width = layout.px(placementElement ? placementElement?.offsetWidth : selectionAreaCellWidth);
+  activeCellButton.style.height = layout.px(placementElement ? placementElement?.offsetHeight : selectionAreaCellHeight);
   activeCellButton.style.left = layout.px(relativePosition.left);
   activeCellButton.style.top = layout.px(relativePosition.top);
   activeCellButton.style.display = 'block';
-  activeCellButton.setAttribute('data-active-row-index', typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? coords.row : 'header');
-  activeCellButton.setAttribute('data-active-column-index', typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' ? coords.column : 'header');
+  activeCellButton.setAttribute('data-active-row-index', typeof coords?.row === 'number' ? coords.row : 'header');
+  activeCellButton.setAttribute('data-active-column-index', typeof coords?.column === 'number' ? coords.column : 'header');
   activeElementContainer.appendChild(activeCellButton);
   activeCellButton.focus();
   if (!addToHeader) {
     activeElementContainer.appendChild(cellEditorRef.current);
   }
-  if (typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number') {
-    onActiveCellChange === null || onActiveCellChange === void 0 || onActiveCellChange(activeCellValue);
+  if (typeof coords?.column === 'number' && typeof coords?.row === 'number') {
+    onActiveCellChange?.(activeCellValue);
   }
 };
 

package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js

@@ -11,54 +11,55 @@ var layout = require('@carbon/layout');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 var getSelectionAreaPoints = require('./getSelectionAreaPoints.js');
 
-var createCellSelectionArea = function createCellSelectionArea(_ref) {
-  var ref = _ref.ref,
-    area = _ref.area,
-    blockClass = _ref.blockClass,
-    defaultColumn = _ref.defaultColumn,
-    selectionAreas = _ref.selectionAreas,
-    setSelectionAreas = _ref.setSelectionAreas,
-    setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
-    visibleColumns = _ref.visibleColumns;
-  var _getSelectionAreaPoin = getSelectionAreaPoints.getSelectionAreaPoints(area),
-    lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
-    lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
-    greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
-    greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex;
+const createCellSelectionArea = _ref => {
+  let {
+    ref,
+    area,
+    blockClass,
+    defaultColumn,
+    selectionAreas,
+    setSelectionAreas,
+    setActiveCellInsideSelectionArea,
+    visibleColumns
+  } = _ref;
+  const {
+    lowestColumnIndex,
+    lowestRowIndex,
+    greatestColumnIndex,
+    greatestRowIndex
+  } = getSelectionAreaPoints.getSelectionAreaPoints(area);
   if (greatestRowIndex - lowestRowIndex > 0 || greatestColumnIndex - lowestColumnIndex > 0) {
     setActiveCellInsideSelectionArea(true);
-    var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    const activeCellElement = ref.current.querySelector(`.${blockClass}__active-cell--highlight`);
     activeCellElement.setAttribute('data-selection-id', area.matcher);
   }
-  var selectionAreaVariableWidth = 0;
-  visibleColumns.forEach(function (item, index) {
+  let selectionAreaVariableWidth = 0;
+  visibleColumns.forEach((item, index) => {
     if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
-      selectionAreaVariableWidth += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
+      selectionAreaVariableWidth += item?.width || defaultColumn?.width;
     }
   });
-  var point1Element = document.querySelector("[data-row-index=\"".concat(area.point1.row, "\"][data-column-index=\"").concat(area.point1.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height of the first body cell we find
+  const point1Element = document.querySelector(`[data-row-index="${area.point1.row}"][data-column-index="${area.point1.column}"]`) || document.querySelector(`.${blockClass}__body--td`); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height of the first body cell we find
 
-  var selectionAreaCellHeight = point1Element.offsetHeight;
-  var selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRowIndex - lowestRowIndex + 1);
-  var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
-  var placementElement = bodyContainer.querySelector("[data-row-index=\"".concat(lowestRowIndex, "\"][data-column-index=\"").concat(lowestColumnIndex, "\"]"));
-  var relativePosition = {
+  const selectionAreaCellHeight = point1Element.offsetHeight;
+  const selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRowIndex - lowestRowIndex + 1);
+  const bodyContainer = document.querySelector(`.${blockClass}__list--container`).firstElementChild;
+  const placementElement = bodyContainer.querySelector(`[data-row-index="${lowestRowIndex}"][data-column-index="${lowestColumnIndex}"]`);
+  const relativePosition = {
     top: placementElement ? placementElement.getBoundingClientRect().top - bodyContainer.getBoundingClientRect().top : lowestRowIndex === 0 ? 0 : selectionAreaCellHeight * lowestRowIndex,
     // calculate top value here if virtualized row is not in DOM
     left: placementElement ? placementElement.getBoundingClientRect().left - bodyContainer.getBoundingClientRect().left : lowestColumnIndex === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : defaultColumn.width * lowestColumnIndex + (defaultColumn.rowHeaderWidth - 4) // calculate left value here if virtualized row is not in DOM, accounting for row header cell width (including borders)
   };
-  var selectionAreaElement = document.querySelector("[data-matcher-id=\"".concat(area.matcher, "\"]")) || document.createElement('div');
-  selectionAreaElement.classList.add("".concat(blockClass, "__selection-area--element"));
+  const selectionAreaElement = document.querySelector(`[data-matcher-id="${area.matcher}"]`) || document.createElement('div');
+  selectionAreaElement.classList.add(`${blockClass}__selection-area--element`);
   selectionAreaElement.setAttribute('data-matcher-id', area.matcher);
   selectionAreaElement.style.width = layout.px(selectionAreaVariableWidth);
   selectionAreaElement.style.height = layout.px(selectionAreaTotalHeight);
   selectionAreaElement.style.left = layout.px(relativePosition.left);
   selectionAreaElement.style.top = layout.px(relativePosition.top);
   bodyContainer.appendChild(selectionAreaElement);
-  var selectionAreasClone = deepCloneObject.deepCloneObject(selectionAreas);
-  var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
-    return item.matcher === area.matcher;
-  });
+  const selectionAreasClone = deepCloneObject.deepCloneObject(selectionAreas);
+  const indexOfCurrentArea = selectionAreasClone.findIndex(item => item.matcher === area.matcher);
   // We need to add another property to the selectionAreas object array to
   // let us know if an area has been created for each item already, ie createdArea: true
   selectionAreasClone[indexOfCurrentArea].areaCreated = true;

package/lib/components/DataSpreadsheet/utils/getCellSize.js

@@ -9,10 +9,8 @@
 
 var layout = require('@carbon/layout');
 
-var getSizeInPixels = function getSizeInPixels(carbonSize) {
-  return Number(carbonSize.replace('rem', '') * layout.baseFontSize);
-};
-var getCellSize = function getCellSize(cellSize) {
+const getSizeInPixels = carbonSize => Number(carbonSize.replace('rem', '') * layout.baseFontSize);
+const getCellSize = cellSize => {
   switch (cellSize) {
     case 'xs':
       return getSizeInPixels(layout.sizeXSmall);

package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js

@@ -7,16 +7,16 @@
 
 'use strict';
 
-var getSelectionAreaPoints = function getSelectionAreaPoints(area) {
-  var greatestRowIndex = Math.max(area.point1.row, area.point2.row);
-  var greatestColumnIndex = Math.max(area.point1.column, area.point2.column);
-  var lowestRowIndex = Math.min(area.point1.row, area.point2.row);
-  var lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
+const getSelectionAreaPoints = area => {
+  const greatestRowIndex = Math.max(area.point1.row, area.point2.row);
+  const greatestColumnIndex = Math.max(area.point1.column, area.point2.column);
+  const lowestRowIndex = Math.min(area.point1.row, area.point2.row);
+  const lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
   return {
-    greatestRowIndex: greatestRowIndex,
-    greatestColumnIndex: greatestColumnIndex,
-    lowestColumnIndex: lowestColumnIndex,
-    lowestRowIndex: lowestRowIndex
+    greatestRowIndex,
+    greatestColumnIndex,
+    lowestColumnIndex,
+    lowestRowIndex
   };
 };
 

package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js

@@ -9,15 +9,17 @@
 
 var layout = require('@carbon/layout');
 
-var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
-  var type = _ref.type,
-    headerGroup = _ref.headerGroup,
-    scrollBarSizeValue = _ref.scrollBarSizeValue,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    defaultColumn = _ref.defaultColumn,
-    totalColumnsWidth = _ref.totalColumnsWidth,
-    visibleColumns = _ref.visibleColumns;
-  var additionalWidth = scrollBarSizeValue + defaultColumn.rowHeaderWidth;
+const getSpreadsheetWidth = _ref => {
+  let {
+    type,
+    headerGroup,
+    scrollBarSizeValue,
+    totalVisibleColumns,
+    defaultColumn,
+    totalColumnsWidth,
+    visibleColumns
+  } = _ref;
+  const additionalWidth = scrollBarSizeValue + defaultColumn.rowHeaderWidth;
   if (!totalVisibleColumns) {
     if (type === 'header') {
       return layout.px(parseInt(headerGroup.getHeaderGroupProps().style.width) + additionalWidth);
@@ -27,11 +29,7 @@ var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
     }
   }
   if (totalVisibleColumns) {
-    var totalVisibleColumnWidth = visibleColumns.map(function (item, index) {
-      return index <= totalVisibleColumns - 1 && ((item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width));
-    }).reduce(function (prev, curr) {
-      return prev + curr;
-    }, 0);
+    const totalVisibleColumnWidth = visibleColumns.map((item, index) => index <= totalVisibleColumns - 1 && (item?.width || defaultColumn?.width)).reduce((prev, curr) => prev + curr, 0);
     return totalVisibleColumnWidth + additionalWidth;
   }
 };