@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -26,85 +26,83 @@ var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
 var _div;
-var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
-var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var activeCellRef = _ref.activeCellRef,
-    columns = _ref.columns,
-    activeCellCoordinates = _ref.activeCellCoordinates,
-    defaultColumn = _ref.defaultColumn,
-    defaultEmptyRowCount = _ref.defaultEmptyRowCount,
-    getTableBodyProps = _ref.getTableBodyProps,
-    headerGroups = _ref.headerGroups,
-    setCurrentColumns = _ref.setCurrentColumns,
-    id = _ref.id,
-    onDataUpdate = _ref.onDataUpdate,
-    renderRowHeader = _ref.renderRowHeader,
-    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
-    hasCustomRowHeader = _ref.hasCustomRowHeader,
-    prepareRow = _ref.prepareRow,
-    rows = _ref.rows,
-    selectionAreaData = _ref.selectionAreaData,
-    setSelectionAreaData = _ref.setSelectionAreaData,
-    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-    selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
-    setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
-    selectionAreas = _ref.selectionAreas,
-    setContainerHasFocus = _ref.setContainerHasFocus,
-    setSelectionAreas = _ref.setSelectionAreas,
-    scrollBarSize = _ref.scrollBarSize,
-    totalColumnsWidth = _ref.totalColumnsWidth,
-    clickAndHoldActive = _ref.clickAndHoldActive,
-    setClickAndHoldActive = _ref.setClickAndHoldActive,
-    currentMatcher = _ref.currentMatcher,
-    setCurrentMatcher = _ref.setCurrentMatcher,
-    onSelectionAreaChange = _ref.onSelectionAreaChange,
-    setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-    setColumnOrder = _ref.setColumnOrder,
-    visibleColumns = _ref.visibleColumns;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    validStartingPoint = _useState2[0],
-    setValidStartingPoint = _useState2[1];
-  var contentScrollRef = React.useRef(undefined);
-  var previousState = usePreviousValue.usePreviousValue({
-    selectionAreaData: selectionAreaData,
-    clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+const blockClass = `${settings.pkg.prefix}--data-spreadsheet`;
+const DataSpreadsheetBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeCellRef,
+    columns,
+    activeCellCoordinates,
+    defaultColumn,
+    defaultEmptyRowCount,
+    getTableBodyProps,
+    headerGroups,
+    setCurrentColumns,
+    id,
+    onDataUpdate,
+    renderRowHeader,
+    renderRowHeaderDirection,
+    hasCustomRowHeader,
+    prepareRow,
+    rows,
+    selectionAreaData,
+    setSelectionAreaData,
+    setActiveCellCoordinates,
+    selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive,
+    selectionAreas,
+    setContainerHasFocus,
+    setSelectionAreas,
+    scrollBarSize,
+    totalColumnsWidth,
+    clickAndHoldActive,
+    setClickAndHoldActive,
+    currentMatcher,
+    setCurrentMatcher,
+    onSelectionAreaChange,
+    setActiveCellInsideSelectionArea,
+    totalVisibleColumns,
+    setHeaderCellHoldActive,
+    setColumnOrder,
+    visibleColumns
+  } = _ref;
+  const [validStartingPoint, setValidStartingPoint] = React.useState(false);
+  const contentScrollRef = React.useRef(undefined);
+  const previousState = usePreviousValue.usePreviousValue({
+    selectionAreaData,
+    clickAndHoldActive,
+    rowHeight: 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)));
+  React.useEffect(() => {
+    ref?.current.style.setProperty(`--${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) {
-      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)) {
+  React.useEffect(() => {
+    if (selectionAreaData?.length) {
+      let selectionChanged = false;
+      if (previousState?.selectionAreaData?.length !== selectionAreaData?.length || selectionAreaData?.[0]?.cells.length !== previousState?.selectionAreaData?.[0]?.cells.length) {
         selectionChanged = true;
       }
-      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || selectionChanged) {
-        onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
+      if (!clickAndHoldActive && previousState?.clickAndHoldActive || selectionChanged) {
+        onSelectionAreaChange?.(selectionAreaData);
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
+  }, [previousState?.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState?.clickAndHoldActive]);
 
   // Create cell selection areas based on selectionAreas array
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (selectionAreas && selectionAreas.length) {
-      selectionAreas.map(function (area) {
+      selectionAreas.map(area => {
         // Setup selection area data that will be sent back to consumer via onSelectionAreaChange prop
         if (area.areaCreated) {
-          var rowStart = Math.min(area.point1.row, area.point2.row);
-          var rowEnd = Math.max(area.point1.row, area.point2.row);
-          var columnStart = Math.min(area.point1.column, area.point2.column);
-          var columnEnd = Math.max(area.point1.column, area.point2.column);
-          var selectionData = {
+          const rowStart = Math.min(area.point1.row, area.point2.row);
+          const rowEnd = Math.max(area.point1.row, area.point2.row);
+          const columnStart = Math.min(area.point1.column, area.point2.column);
+          const columnEnd = Math.max(area.point1.column, area.point2.column);
+          const selectionData = {
             rows: {
               start: rowStart,
               end: rowEnd
@@ -114,124 +112,124 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               end: columnEnd
             },
             cells: populateSelectionAreaCellData({
-              rowStart: rowStart,
-              rowEnd: rowEnd,
-              columnStart: columnStart,
-              columnEnd: columnEnd
+              rowStart,
+              rowEnd,
+              columnStart,
+              columnEnd
             }),
             selectionId: area.matcher
           };
-          setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
-            var prevValues = deepCloneObject.deepCloneObject(prev);
-            var newAreaData = prevValues.filter(function (item) {
-              return item.selectionId !== area.matcher;
-            });
-            return [].concat(_rollupPluginBabelHelpers.toConsumableArray(newAreaData), [selectionData]);
+          setSelectionAreaData?.(prev => {
+            const prevValues = deepCloneObject.deepCloneObject(prev);
+            const newAreaData = prevValues.filter(item => item.selectionId !== area.matcher);
+            return [...newAreaData, selectionData];
           });
         }
         if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
           createCellSelectionArea.createCellSelectionArea({
-            ref: ref,
-            area: area,
-            blockClass: blockClass,
-            defaultColumn: defaultColumn,
-            selectionAreas: selectionAreas,
-            setSelectionAreas: setSelectionAreas,
-            setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
-            visibleColumns: visibleColumns
+            ref,
+            area,
+            blockClass,
+            defaultColumn,
+            selectionAreas,
+            setSelectionAreas,
+            setActiveCellInsideSelectionArea,
+            visibleColumns
           });
         }
         return;
       });
     }
   }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns, hasCustomRowHeader]);
-  var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
-    var rowStart = _ref2.rowStart,
-      rowEnd = _ref2.rowEnd,
-      columnStart = _ref2.columnStart,
-      columnEnd = _ref2.columnEnd;
-    var cellContainer = [];
-    for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
-      for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
-        cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
+  const populateSelectionAreaCellData = _ref2 => {
+    let {
+      rowStart,
+      rowEnd,
+      columnStart,
+      columnEnd
+    } = _ref2;
+    const cellContainer = [];
+    for (let rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
+      for (let columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
+        cellContainer.push([rowIndex, columnIndex, `${blockClass}__cell--${rowIndex}--${columnIndex}`]);
       }
     }
     return cellContainer;
   };
   useSpreadsheetMouseUp.useSpreadsheetMouseUp({
-    currentMatcher: currentMatcher,
-    setClickAndHoldActive: setClickAndHoldActive,
-    setSelectionAreas: setSelectionAreas,
-    setValidStartingPoint: setValidStartingPoint,
-    selectedHeaderReorderActive: selectedHeaderReorderActive,
-    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
-    validStartingPoint: validStartingPoint,
-    ref: ref,
-    setHeaderCellHoldActive: setHeaderCellHoldActive,
-    setColumnOrder: setColumnOrder,
-    visibleColumns: visibleColumns,
-    setActiveCellCoordinates: setActiveCellCoordinates,
-    rows: rows,
-    activeCellCoordinates: activeCellCoordinates,
-    defaultColumn: defaultColumn,
-    selectionAreas: selectionAreas
+    currentMatcher,
+    setClickAndHoldActive,
+    setSelectionAreas,
+    setValidStartingPoint,
+    selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive,
+    validStartingPoint,
+    ref,
+    setHeaderCellHoldActive,
+    setColumnOrder,
+    visibleColumns,
+    setActiveCellCoordinates,
+    rows,
+    activeCellCoordinates,
+    defaultColumn,
+    selectionAreas
   });
 
   // Make sure that if the cellSize prop changes, the active
   // cell also gets updated with the new size and new top placement
   // value. All of the cell selections will be updated as well
-  React.useEffect(function () {
-    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"));
+  React.useEffect(() => {
+    let listContainer;
+    let activeCellButton;
+    if (spreadsheetBodyRef?.current) {
+      listContainer = spreadsheetBodyRef?.current;
+      activeCellButton = listContainer?.querySelector(`.${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?.rowHeight !== previousState.rowHeight) {
+      activeCellButton.style.height = `${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 newActiveCellTopPosition;
-        if (activeTargetElement && _listContainer2) {
-          newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === void 0 ? void 0 : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
+        const activeTargetElement = ref?.current.querySelector(`[data-row-index="${activeCellCoordinates.row}"][data-column-index="${activeCellCoordinates.column}"]`);
+        const listContainer = ref?.current.querySelector(`.${blockClass}__list--container`);
+        let newActiveCellTopPosition;
+        if (activeTargetElement && listContainer) {
+          newActiveCellTopPosition = activeTargetElement?.getBoundingClientRect().top - listContainer.getBoundingClientRect().top;
         }
         activeCellButton.style.top = layout.px(newActiveCellTopPosition);
         removeCellSelections.removeCellSelections({
           matcher: undefined,
           spreadsheetRef: ref
         });
-        selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
+        selectionAreas?.map(area => {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
             return createCellSelectionArea.createCellSelectionArea({
-              ref: ref,
-              area: area,
-              blockClass: blockClass,
-              defaultColumn: defaultColumn,
-              selectionAreas: selectionAreas,
-              setSelectionAreas: setSelectionAreas,
-              setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
-              visibleColumns: visibleColumns
+              ref,
+              area,
+              blockClass,
+              defaultColumn,
+              selectionAreas,
+              setSelectionAreas,
+              setActiveCellInsideSelectionArea,
+              visibleColumns
             });
           }
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
+  }, [defaultColumn, ref, activeCellCoordinates, 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 = [],
+  const removeDuplicateSelections = React.useCallback(() => {
+    const uniqueAttrArray = [],
       removedSelectionAreaMatcherArr = [];
-    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
+    ref?.current.querySelectorAll(`.${blockClass}__selection-area--element`).forEach(selectorEl => {
+      const {
+        top,
+        left,
+        height,
+        width
+      } = selectorEl.style;
+      const uniqueAttrStr = `${top}${left}${height}${width}`; // eg: 20px30px70px90px
       if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
         uniqueAttrArray.push(uniqueAttrStr);
       } else {
@@ -242,163 +240,165 @@ 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) {
-        var prevValues = deepCloneObject.deepCloneObject(prev);
-        return prevValues.filter(function (item) {
-          return !removedSelectionAreaMatcherArr.includes(item.matcher);
-        });
+      setSelectionAreas?.(prev => {
+        const prevValues = deepCloneObject.deepCloneObject(prev);
+        return prevValues.filter(item => !removedSelectionAreaMatcherArr.includes(item.matcher));
       });
-      setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
-        var prevValues = deepCloneObject.deepCloneObject(prev);
-        return prevValues.filter(function (item) {
-          return !removedSelectionAreaMatcherArr.includes(item.selectionId);
-        });
+      setSelectionAreaData?.(prev => {
+        const prevValues = deepCloneObject.deepCloneObject(prev);
+        return prevValues.filter(item => !removedSelectionAreaMatcherArr.includes(item.selectionId));
       });
     }
   }, [ref, setSelectionAreas, setSelectionAreaData]);
 
   //selectionAreas will be set when ever a selection area is made.
-  React.useEffect(function () {
+  React.useEffect(() => {
     removeDuplicateSelections();
   }, [selectionAreas, removeDuplicateSelections]);
 
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
 
-  var handleBodyCellClickEvent = React.useCallback(function (cell, columnIndex) {
-    return function (event) {
+  const handleBodyCellClickEvent = React.useCallback((cell, columnIndex) => {
+    return event => {
       commonEventHandlers.handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
     };
   }, [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;
+  const handleBodyScroll = () => {
+    const headerRowElement = ref.current.querySelector(`
+        .${blockClass}__header--container .${blockClass}__tr`) || new HTMLDivElement();
+    headerRowElement.scrollLeft = contentScrollRef?.current.scrollLeft;
   };
-  React.useEffect(function () {
-    contentScrollRef.current.addEventListener('scroll', function () {
-      return handleBodyScroll();
-    });
-    var contentScrollElementRef = contentScrollRef.current || new HTMLElement();
-    return function () {
+  React.useEffect(() => {
+    contentScrollRef.current.addEventListener('scroll', () => handleBodyScroll());
+    const contentScrollElementRef = contentScrollRef.current || new HTMLElement();
+    return () => {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
   });
-  var handleBodyCellHoverEvent = React.useCallback(function (cell, columnIndex) {
-    return function () {
+  const handleBodyCellHoverEvent = React.useCallback((cell, columnIndex) => {
+    return () => {
       commonEventHandlers.handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
     };
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClickEvent = React.useCallback(function (index) {
-    return function (event) {
+  const handleRowHeaderClickEvent = React.useCallback(index => {
+    return event => {
       commonEventHandlers.handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
     };
   }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
 
   // Builds the empty rows and calls `onDataUpdate` to set the new empty rows
   // using defaultEmptyRowCount to determine how many empty rows are created.
-  React.useEffect(function () {
-    if (!(rows !== null && rows !== void 0 && 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) {
+  React.useEffect(() => {
+    if (!rows?.length) {
+      const buildEmptyRows = () => {
+        const emptyRowData = [];
+        [...Array(defaultEmptyRowCount)].map(() => {
+          const emptyCell = {};
+          headerGroups?.[0]?.headers.map(header => {
             emptyCell[header.id] = null;
           });
           emptyRowData.push(emptyCell);
         });
-        onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
+        onDataUpdate?.(emptyRowData);
       };
       buildEmptyRows();
     }
-    if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
-      var headers = headerGroups[0].headers;
+    if (headerGroups?.[0] && typeof setCurrentColumns === 'function') {
+      const headers = headerGroups[0].headers;
       setCurrentColumns(headers);
     }
   }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
-  var RenderEmptyRows = function RenderEmptyRows() {
+  const RenderEmptyRows = () => {
     return _div || (_div = /*#__PURE__*/React.createElement("div", null));
   };
 
   // Renders each row/cell in the spreadsheet body
-  var RenderRow = React.useCallback(function (_ref3) {
-    var index = _ref3.index,
-      style = _ref3.style;
-    var row = rows === null || rows === void 0 ? void 0 : rows[index];
+  const RenderRow = React.useCallback(_ref3 => {
+    let {
+      index,
+      style
+    } = _ref3;
+    const row = rows?.[index];
     if (rows && rows.length) {
-      prepareRow === null || prepareRow === void 0 || prepareRow(row);
-      var rowProps = propsHelper.prepareProps(row.getRowProps({
-        style: style
+      prepareRow?.(row);
+      const rowProps = propsHelper.prepareProps(row.getRowProps({
+        style
       }), 'key');
       return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-        key: _rollupPluginBabelHelpers.objectSpread2({}, row.getRowProps().key)
+        key: {
+          ...row.getRowProps().key
+        }
       }, rowProps, {
-        className: cx("".concat(blockClass, "__tr")),
+        className: cx(`${blockClass}__tr`),
         "data-row-index": index,
         "aria-rowindex": index + 1,
-        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
+        "aria-owns": `${blockClass}__cell-editor-text-area`
       }), /*#__PURE__*/React.createElement("div", {
         role: "rowheader",
-        className: "".concat(blockClass, "__td-th--cell-container")
+        className: `${blockClass}__td-th--cell-container`
       }, /*#__PURE__*/React.createElement("button", {
-        id: "".concat(blockClass, "__cell--").concat(index, "--header"),
+        id: `${blockClass}__cell--${index}--header`,
         tabIndex: -1,
         "data-row-index": index,
         "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(`${blockClass}__td`, `${blockClass}__td-th`, `${blockClass}--interactive-cell-element`, {
+          [`${blockClass}__td_custom`]: hasCustomRowHeader ? true : false,
+          [`${blockClass}__td-th--active-header`]: !hasCustomRowHeader && (activeCellCoordinates?.row === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')),
+          [`${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?.rowHeaderWidth,
           flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
-      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
-        var _cell$column;
-        var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
+      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map((cell, index) => {
+        const cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-          key: "cell_".concat(index),
+          key: `cell_${index}`,
           "aria-colindex": index + 1
         }, cellProps, {
           role: "gridcell",
-          style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
+          style: {
+            ...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?.column?.width || defaultColumn?.width
+          }
         }), /*#__PURE__*/React.createElement("button", {
-          id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
+          id: `${blockClass}__cell--${cell.row.index}--${index}`,
           tabIndex: -1,
           "data-row-index": cell.row.index,
           "data-column-index": index,
-          className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
+          className: cx(`${blockClass}__td`, `${blockClass}__body--td`, `${blockClass}--interactive-cell-element`),
           onMouseDown: handleBodyCellClickEvent(cell, index),
           onMouseOver: handleBodyCellHoverEvent(cell, index),
-          onFocus: function onFocus() {},
+          onFocus: () => {},
           type: "button"
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, renderRowHeader, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, columns, defaultColumn, renderRowHeaderDirection]);
-  var spreadsheetBodyRef = React.useRef(undefined);
+  }, [prepareRow, renderRowHeader, rows, hasCustomRowHeader, activeCellCoordinates?.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, columns, defaultColumn, renderRowHeaderDirection]);
+  const 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, {
-    className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
+    className: cx(`${blockClass}__body--container`)
+  }, getTableBodyProps?.()), /*#__PURE__*/React.createElement(reactWindow.FixedSizeList, {
+    className: cx(`${blockClass}__list--container`, `${blockClass}__list--container--${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?.length || defaultEmptyRowCount,
+    itemSize: defaultColumn?.rowHeight,
     width: getSpreadsheetWidth.getSpreadsheetWidth({
       headerGroup: undefined,
       type: undefined,
       scrollBarSizeValue: scrollBarSize,
-      totalVisibleColumns: totalVisibleColumns,
-      defaultColumn: defaultColumn,
-      totalColumnsWidth: totalColumnsWidth,
-      visibleColumns: visibleColumns
+      totalVisibleColumns,
+      defaultColumn,
+      totalColumnsWidth,
+      visibleColumns
     }),
     outerRef: contentScrollRef
-  }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
+  }, rows?.length ? RenderRow : RenderEmptyRows));
 });
 DataSpreadsheetBody.propTypes = {
   /**