npm - @carbon/ibm-products - Versions diffs - 2.65.0 → 2.66.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (777) hide show

package/es/components/DataSpreadsheet/DataSpreadsheet.js CHANGED Viewed

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useTable, useBlockLayout, useColumnOrder } from 'react-table';
 import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { DataSpreadsheetBody } from './DataSpreadsheetBody.js';
@@ -13,13 +13,13 @@ import { DataSpreadsheetHeader } from './DataSpreadsheetHeader.js';
 import PropTypes from '../../_virtual/index.js';
 import { createActiveCellFn } from './utils/createActiveCellFn.js';
 import cx from 'classnames';
-import { deepCloneObject as _deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
+import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
 import { getCellSize } from './utils/getCellSize.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
 import { handleEditSubmit } from './utils/handleEditSubmit.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
-import { getNodeTextContent as _getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { handleKeyPress } from './utils/commonEventHandlers.js';
 import { pkg } from '../../settings.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
@@ -33,182 +33,128 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
 import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
-var componentName = 'DataSpreadsheet';
+const blockClass = `${pkg.prefix}--data-spreadsheet`;
+const componentName = 'DataSpreadsheet';
 // Default values for props
-var defaults = {
+const defaults = {
   columns: Object.freeze([]),
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
-  onDataUpdate: Object.freeze(function () {}),
-  onColDrag: Object.freeze(function () {}),
-  onActiveCellChange: Object.freeze(function () {}),
-  onSelectionAreaChange: Object.freeze(function () {})};
+  onDataUpdate: Object.freeze(() => {}),
+  onColDrag: Object.freeze(() => {}),
+  onActiveCellChange: Object.freeze(() => {}),
+  onSelectionAreaChange: Object.freeze(() => {})};
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
-var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref$cellSize = _ref.cellSize,
-    cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
-    className = _ref.className,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? defaults.data : _ref$data,
-    _ref$defaultEmptyRowC = _ref.defaultEmptyRowCount,
-    defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
-    _ref$onDataUpdate = _ref.onDataUpdate,
-    onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
-    _ref$onColDrag = _ref.onColDrag,
-    onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
-    id = _ref.id,
-    _ref$onActiveCellChan = _ref.onActiveCellChange,
-    onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
-    _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
-    onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
-    renderRowHeader = _ref.renderRowHeader,
-    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
-    _ref$disableColumnSwa = _ref.disableColumnSwapping,
-    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
-    _ref$readOnlyTable = _ref.readOnlyTable,
-    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
-    selectAllAriaLabel = _ref.selectAllAriaLabel,
-    spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
-    theme = _ref.theme,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var multiKeyTrackingRef = useRef(null);
-  var localRef = useRef(undefined);
-  var spreadsheetRef = ref || localRef;
-  var focusedElement = useActiveElement();
-  var _useState = useState(columns),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentColumns = _useState2[0],
-    setCurrentColumns = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    pastColumns = _useState4[0],
-    setPastColumns = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    containerHasFocus = _useState6[0],
-    setContainerHasFocus = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    activeCellCoordinates = _useState8[0],
-    setActiveCellCoordinates = _useState8[1];
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    selectionAreas = _useState10[0],
-    setSelectionAreas = _useState10[1];
-  var _useState11 = useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectionAreaData = _useState12[0],
-    setSelectionAreaData = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    clickAndHoldActive = _useState14[0],
-    setClickAndHoldActive = _useState14[1];
-  var _useState15 = useState(''),
-    _useState16 = _slicedToArray(_useState15, 2),
-    currentMatcher = _useState16[0],
-    setCurrentMatcher = _useState16[1];
-  var _useState17 = useState(false),
-    _useState18 = _slicedToArray(_useState17, 2),
-    isEditing = _useState18[0],
-    setIsEditing = _useState18[1];
-  var _useState19 = useState(''),
-    _useState20 = _slicedToArray(_useState19, 2),
-    cellEditorValue = _useState20[0],
-    setCellEditorValue = _useState20[1];
-  var _useState21 = useState(false),
-    _useState22 = _slicedToArray(_useState21, 2),
-    headerCellHoldActive = _useState22[0],
-    setHeaderCellHoldActive = _useState22[1];
-  var _useState23 = useState(false),
-    _useState24 = _slicedToArray(_useState23, 2),
-    selectedHeaderReorderActive = _useState24[0],
-    setSelectedHeaderReorderActive = _useState24[1];
-  var isBlurSpreadsheet = useRef(false);
-  var _useState25 = useState(false),
-    _useState26 = _slicedToArray(_useState25, 2),
-    isActiveHeaderCellChanged = _useState26[0],
-    setIsActiveHeaderCellChanged = _useState26[1];
-  var _useState27 = useState(false),
-    _useState28 = _slicedToArray(_useState27, 2),
-    activeCellInsideSelectionArea = _useState28[0],
-    setActiveCellInsideSelectionArea = _useState28[1];
-  var previousState = usePreviousValue({
-    activeCellCoordinates: activeCellCoordinates,
-    isEditing: isEditing,
-    cellEditorValue: cellEditorValue,
-    selectedHeaderReorderActive: selectedHeaderReorderActive
+let DataSpreadsheet = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    cellSize = 'sm',
+    className,
+    columns = defaults.columns,
+    data = defaults.data,
+    defaultEmptyRowCount = defaults.defaultEmptyRowCount,
+    onDataUpdate = defaults.onDataUpdate,
+    onColDrag = defaults.onColDrag,
+    id,
+    onActiveCellChange = defaults.onActiveCellChange,
+    onSelectionAreaChange = defaults.onSelectionAreaChange,
+    renderRowHeader,
+    renderRowHeaderDirection,
+    disableColumnSwapping = false,
+    readOnlyTable = false,
+    selectAllAriaLabel,
+    spreadsheetAriaLabel,
+    theme,
+    totalVisibleColumns,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const multiKeyTrackingRef = useRef(null);
+  const localRef = useRef(undefined);
+  const spreadsheetRef = ref || localRef;
+  const focusedElement = useActiveElement();
+  const [currentColumns, setCurrentColumns] = useState(columns);
+  const [pastColumns, setPastColumns] = useState([]);
+  const [containerHasFocus, setContainerHasFocus] = useState(false);
+  const [activeCellCoordinates, setActiveCellCoordinates] = useState(null);
+  const [selectionAreas, setSelectionAreas] = useState([]);
+  const [selectionAreaData, setSelectionAreaData] = useState([]);
+  const [clickAndHoldActive, setClickAndHoldActive] = useState(false);
+  const [currentMatcher, setCurrentMatcher] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+  const [cellEditorValue, setCellEditorValue] = useState('');
+  const [headerCellHoldActive, setHeaderCellHoldActive] = useState(false);
+  const [selectedHeaderReorderActive, setSelectedHeaderReorderActive] = useState(false);
+  const isBlurSpreadsheet = useRef(false);
+  const [isActiveHeaderCellChanged, setIsActiveHeaderCellChanged] = useState(false);
+  const [activeCellInsideSelectionArea, setActiveCellInsideSelectionArea] = useState(false);
+  const previousState = usePreviousValue({
+    activeCellCoordinates,
+    isEditing,
+    cellEditorValue,
+    selectedHeaderReorderActive
   }) || {};
-  var cellSizeValue = getCellSize(cellSize);
-  var cellEditorRef = useRef(undefined);
-  var _useState29 = useState(),
-    _useState30 = _slicedToArray(_useState29, 2),
-    activeCellContent = _useState30[0],
-    setActiveCellContent = _useState30[1];
-  var activeCellRef = useRef(undefined);
-  var cellEditorRulerRef = useRef(undefined);
-  var hasCustomRowHeader = typeof renderRowHeader === 'function';
-  var maxNumRowsCount = data.length.toString().length;
-  var defaultColumn = useMemo(function () {
-    return {
-      width: 150,
-      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
-      rowHeight: cellSizeValue
-    };
-  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
-  var _useMultipleKeyTracki = useMultipleKeyTracking({
-      ref: multiKeyTrackingRef,
-      containerHasFocus: containerHasFocus,
-      isEditing: isEditing
-    }),
-    keysPressedList = _useMultipleKeyTracki.keysPressedList,
-    usingMac = _useMultipleKeyTracki.usingMac;
-  var scrollBarSize = useMemo(function () {
-    return getScrollbarWidth();
-  }, []);
-  var _ref2 = useTable({
-      columns: columns,
-      data: data,
-      defaultColumn: defaultColumn
-    }, useBlockLayout, useColumnOrder),
-    getTableProps = _ref2.getTableProps,
-    getTableBodyProps = _ref2.getTableBodyProps,
-    headerGroups = _ref2.headerGroups,
-    rows = _ref2.rows,
-    totalColumnsWidth = _ref2.totalColumnsWidth,
-    prepareRow = _ref2.prepareRow,
-    setColumnOrder = _ref2.setColumnOrder,
-    visibleColumns = _ref2.visibleColumns;
+  const cellSizeValue = getCellSize(cellSize);
+  const cellEditorRef = useRef(undefined);
+  const [activeCellContent, setActiveCellContent] = useState();
+  const activeCellRef = useRef(undefined);
+  const cellEditorRulerRef = useRef(undefined);
+  const hasCustomRowHeader = typeof renderRowHeader === 'function';
+  const maxNumRowsCount = data.length.toString().length;
+  const defaultColumn = useMemo(() => ({
+    width: 150,
+    rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
+    rowHeight: cellSizeValue
+  }), [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
+  const {
+    keysPressedList,
+    usingMac
+  } = useMultipleKeyTracking({
+    ref: multiKeyTrackingRef,
+    containerHasFocus,
+    isEditing
+  });
+  const scrollBarSize = useMemo(() => getScrollbarWidth(), []);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    totalColumnsWidth,
+    prepareRow,
+    setColumnOrder,
+    visibleColumns
+  } = useTable({
+    columns,
+    data,
+    defaultColumn
+  }, useBlockLayout, useColumnOrder);
   // Update the spreadsheet data after editing a cell
-  var updateData = useCallback(function (rowIndex, columnId, newValue) {
-    onDataUpdate(function (prev) {
-      return prev.map(function (row, index) {
-        if (index === rowIndex) {
-          return _objectSpread2(_objectSpread2({}, prev[rowIndex]), {}, _defineProperty({}, columnId, cellEditorValue || newValue));
-        }
-        return row;
-      });
-    });
+  const updateData = useCallback((rowIndex, columnId, newValue) => {
+    onDataUpdate(prev => prev.map((row, index) => {
+      if (index === rowIndex) {
+        return {
+          ...prev[rowIndex],
+          [columnId]: cellEditorValue || newValue
+        };
+      }
+      return row;
+    }));
   }, [cellEditorValue, onDataUpdate]);
-  useEffect(function () {
-    var currentHeaders = [];
+  useEffect(() => {
+    const currentHeaders = [];
     if (Object.keys(currentColumns).length > 0) {
-      Object.keys(currentColumns).forEach(function (itemIndex) {
-        if (_typeof(currentColumns[itemIndex].Header) === 'object') {
+      Object.keys(currentColumns).forEach(itemIndex => {
+        if (typeof currentColumns[itemIndex].Header === 'object') {
           if (currentColumns[itemIndex].column_name) {
             currentHeaders.push(currentColumns[itemIndex].column_name);
           } else {
-            currentHeaders.push(_getNodeTextContent(currentColumns[itemIndex].Header));
+            currentHeaders.push(getNodeTextContent(currentColumns[itemIndex].Header));
           }
         } else if (currentColumns[itemIndex].Header) {
           currentHeaders.push(currentColumns[itemIndex].Header);
@@ -227,50 +173,47 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
         setPastColumns([]);
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
+  }, [previousState?.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
   // Removes the active cell element
-  var removeActiveCell = 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"));
+  const removeActiveCell = useCallback(() => {
+    const activeCellHighlight = spreadsheetRef?.current?.querySelector(`.${blockClass}__active-cell--highlight`);
     if (activeCellHighlight) {
       activeCellHighlight.style.display = 'none';
     }
   }, [spreadsheetRef]);
-  var removeCellEditor = useCallback(function () {
+  const removeCellEditor = useCallback(() => {
     setCellEditorValue('');
     setIsEditing(false);
-    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
+    if (cellEditorRef?.current) {
       cellEditorRef.current.style.display = 'none';
     }
   }, []);
   // 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
-  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)];
+  useEffect(() => {
+    const prevCoords = previousState?.activeCellCoordinates;
+    if ((prevCoords?.row !== activeCellCoordinates?.row || prevCoords?.column !== activeCellCoordinates?.column) && isEditing) {
+      const cellProps = rows[Number(prevCoords?.row)].cells[Number(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?.row, cellProps.column.id, undefined);
+      if (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?.row !== activeCellCoordinates?.row || prevCoords?.column !== activeCellCoordinates?.column) {
+      if (activeCellCoordinates && activeCellCoordinates?.row !== 'header' && activeCellCoordinates?.column !== 'header') {
+        const activeCellFullData = typeof activeCellCoordinates?.column === 'number' && typeof activeCellCoordinates?.row === 'number' ? rows[activeCellCoordinates?.row].cells[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?.row === 'header' || activeCellCoordinates?.column === 'header') {
         setActiveCellContent(null);
-        setIsActiveHeaderCellChanged(function (prev) {
-          return !prev;
-        });
+        setIsActiveHeaderCellChanged(prev => !prev);
       }
     }
     // For when we edit and focus out of data spreadsheet
@@ -279,50 +222,51 @@ var DataSpreadsheet = /*#__PURE__*/React__default.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]);
-  var createActiveCell = 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;
+  }, [isBlurSpreadsheet, activeCellCoordinates, previousState?.activeCellCoordinates, previousState?.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
+  const createActiveCell = useCallback(_ref2 => {
+    let {
+      placementElement,
+      coords,
+      addToHeader = false
+    } = _ref2;
+    const activeCellFullData = typeof coords?.column === 'number' && typeof coords?.row === 'number' ? rows[coords?.row].cells[coords?.column] : null;
+    const activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords?.column] : null;
     createActiveCellFn({
-      placementElement: placementElement,
-      coords: coords,
-      addToHeader: addToHeader,
+      placementElement,
+      coords,
+      addToHeader,
       contextRef: spreadsheetRef,
-      blockClass: blockClass,
-      onActiveCellChange: onActiveCellChange,
-      activeCellValue: activeCellValue,
-      activeCellRef: activeCellRef,
-      cellEditorRef: cellEditorRef,
-      defaultColumn: defaultColumn
+      blockClass,
+      onActiveCellChange,
+      activeCellValue,
+      activeCellRef,
+      cellEditorRef,
+      defaultColumn
     });
   }, [spreadsheetRef, rows, onActiveCellChange, defaultColumn]);
   useResetSpreadsheetFocus({
-    focusedElement: focusedElement,
-    removeActiveCell: removeActiveCell,
-    setContainerHasFocus: setContainerHasFocus
+    focusedElement,
+    removeActiveCell,
+    setContainerHasFocus
   });
   useSpreadsheetOutsideClick({
-    isBlurSpreadsheet: isBlurSpreadsheet,
-    spreadsheetRef: spreadsheetRef,
-    setActiveCellCoordinates: setActiveCellCoordinates,
-    setSelectionAreas: setSelectionAreas,
-    removeActiveCell: removeActiveCell,
-    setContainerHasFocus: setContainerHasFocus,
-    removeCellEditor: removeCellEditor
+    isBlurSpreadsheet,
+    spreadsheetRef,
+    setActiveCellCoordinates,
+    setSelectionAreas,
+    removeActiveCell,
+    setContainerHasFocus,
+    removeCellEditor
   });
   useMoveActiveCell({
-    spreadsheetRef: spreadsheetRef,
-    activeCellCoordinates: activeCellCoordinates,
-    containerHasFocus: containerHasFocus,
-    createActiveCell: createActiveCell,
-    activeCellContent: activeCellContent,
-    isActiveHeaderCellChanged: isActiveHeaderCellChanged
+    spreadsheetRef,
+    activeCellCoordinates,
+    containerHasFocus,
+    createActiveCell,
+    activeCellContent,
+    isActiveHeaderCellChanged
   });
-  var handleInitialArrowPress = useCallback(function () {
+  const handleInitialArrowPress = useCallback(() => {
     // If activeCellCoordinates is null then we need to set an initial value
     // which will place the activeCell on the select all cell/button
     setActiveCellInsideSelectionArea(false);
@@ -334,20 +278,25 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
     return;
   }, [activeCellCoordinates]);
-  var updateActiveCellCoordinates = useCallback(function (_ref4) {
-    var _ref4$coords = _ref4.coords,
-      coords = _ref4$coords === void 0 ? _objectSpread2({}, activeCellCoordinates) : _ref4$coords,
-      updatedValue = _ref4.updatedValue,
-      _ref4$optOutOfSelecti = _ref4.optOutOfSelectionAreaUpdate,
-      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === void 0 ? false : _ref4$optOutOfSelecti;
-    var newActiveCell = _objectSpread2(_objectSpread2({}, coords), updatedValue);
+  const updateActiveCellCoordinates = useCallback(_ref3 => {
+    let {
+      coords = {
+        ...activeCellCoordinates
+      },
+      updatedValue,
+      optOutOfSelectionAreaUpdate = false
+    } = _ref3;
+    const newActiveCell = {
+      ...coords,
+      ...updatedValue
+    };
     setActiveCellCoordinates(newActiveCell);
     // Only run if the active cell is _not_ a header cell. This will add a point1 object
     // to selectionAreas every time the active cell changes, allowing us to create cell
     // selections using keyboard. Opting out of the selection area updates here means
     // that the active cell is being moved within a selection area
     if (newActiveCell.row !== 'header' && newActiveCell.column !== 'header' && !optOutOfSelectionAreaUpdate) {
-      var tempMatcher = uuidv4();
+      const tempMatcher = uuidv4();
       setSelectionAreas([{
         point1: newActiveCell,
         matcher: tempMatcher
@@ -355,9 +304,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       setCurrentMatcher(tempMatcher);
     }
   }, [activeCellCoordinates]);
-  var handleHomeEndKey = useCallback(function (_ref5) {
-    var type = _ref5.type;
-    var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
+  const handleHomeEndKey = useCallback(_ref4 => {
+    let {
+      type
+    } = _ref4;
+    const coordinatesClone = {
+      ...activeCellCoordinates
+    };
     updateActiveCellCoordinates({
       coords: coordinatesClone,
       updatedValue: {
@@ -366,18 +319,19 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     });
     removeCellSelections({
       matcher: undefined,
-      spreadsheetRef: spreadsheetRef
+      spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
-  var checkForReturnCondition = useCallback(function (key) {
+  const checkForReturnCondition = useCallback(key => {
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
-  var handleArrowKeyPress = useCallback(function (arrowKey) {
-    var _event;
-    (_event = event) === null || _event === void 0 || _event.preventDefault();
+  const handleArrowKeyPress = useCallback(arrowKey => {
+    event?.preventDefault();
     handleInitialArrowPress();
-    var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
-    var updatedValue;
+    const coordinatesClone = {
+      ...activeCellCoordinates
+    };
+    let updatedValue;
     switch (arrowKey) {
       // Left
       case 'ArrowLeft':
@@ -466,42 +420,39 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     if (updatedValue) {
       updateActiveCellCoordinates({
         coords: coordinatesClone,
-        updatedValue: updatedValue
+        updatedValue
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPressEvent = useCallback(function (event) {
+  const handleKeyPressEvent = useCallback(event => {
     handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent, readOnlyTable);
   }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, readOnlyTable]);
-  var startEditMode = function startEditMode() {
-    var _activeCellFullData$r;
+  const startEditMode = () => {
     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;
+    const activeCellFullData = typeof activeCellCoordinates?.column === 'number' && typeof activeCellCoordinates?.row === 'number' ? rows[activeCellCoordinates?.row].cells[activeCellCoordinates?.column] : null;
+    const activeCellValue = activeCellFullData?.row?.cells?.[Number(activeCellCoordinates?.column)]?.value;
     setCellEditorValue(activeCellValue || '');
-    if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+    if (cellEditorRulerRef?.current) {
       cellEditorRulerRef.current.textContent = activeCellValue;
     }
-    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
-      var _activeCellRef$curren;
-      cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === void 0 || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === void 0 ? void 0 : _activeCellRef$curren.width;
+    if (cellEditorRef?.current && activeCellRef?.current) {
+      cellEditorRef.current.style.width = activeCellRef?.current?.style?.width;
     }
   };
   // Sets the initial placement of the cell editor cursor at the end of the text area
   // this is not done for us by default in Safari
-  useEffect(function () {
-    if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
-      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();
+  useEffect(() => {
+    if (isEditing && !previousState?.isEditing) {
+      cellEditorRef?.current?.setSelectionRange(Number(cellEditorRulerRef?.current?.textContent?.length), Number(cellEditorRulerRef?.current?.textContent?.length));
+      cellEditorRef?.current?.focus();
     }
-  }, [isEditing, previousState === null || previousState === void 0 ? void 0 : 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') {
+  }, [isEditing, previousState?.isEditing]);
+  const handleActiveCellClick = () => {
+    if (activeCellCoordinates?.row === 'header' || activeCellCoordinates?.column === 'header') {
+      const indexValue = activeCellCoordinates?.row === 'header' ? activeCellCoordinates?.column : activeCellCoordinates?.row;
+      if (activeCellCoordinates?.row === 'header' && activeCellCoordinates?.column === 'header') {
         return;
       }
       handleRowColumnHeaderClick({
@@ -513,18 +464,18 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   };
   // Mouse up on active cell
-  var handleActiveCellMouseUp = function handleActiveCellMouseUp() {
+  const handleActiveCellMouseUp = () => {
     setClickAndHoldActive(false);
   };
   // 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') {
-      var tempMatcher = uuidv4();
+  const handleActiveCellMouseDown = () => {
+    if (activeCellCoordinates?.row !== 'header' || activeCellCoordinates?.column !== 'header') {
+      const tempMatcher = uuidv4();
       setClickAndHoldActive(true);
       removeCellSelections({
         matcher: null,
-        spreadsheetRef: spreadsheetRef
+        spreadsheetRef
       });
       setSelectionAreas([{
         point1: activeCellCoordinates,
@@ -538,105 +489,108 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   };
   // Go into edit mode if 'Enter' key is pressed on activeCellRef
-  var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
-    var key = event.key;
+  const handleActiveCellKeyDown = event => {
+    const {
+      key
+    } = event;
     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?.column !== 'header' && 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?.row === 'header' || activeCellCoordinates?.column === 'header') {
         handleRowColumnHeaderClick({
           isKeyboard: true
         });
       }
     }
   };
-  var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref6) {
-    var isKeyboard = _ref6.isKeyboard,
-      _ref6$index = _ref6.index,
-      index = _ref6$index === void 0 ? -1 : _ref6$index;
-    var handleHeaderCellProps = {
-      activeCellCoordinates: activeCellCoordinates,
-      rows: rows,
-      columns: columns,
-      currentMatcher: currentMatcher,
-      setActiveCellCoordinates: setActiveCellCoordinates,
-      setCurrentMatcher: setCurrentMatcher,
-      setSelectionAreas: setSelectionAreas,
-      spreadsheetRef: spreadsheetRef,
-      index: index,
-      isKeyboard: isKeyboard,
-      setSelectionAreaData: setSelectionAreaData,
+  const handleRowColumnHeaderClick = _ref5 => {
+    let {
+      isKeyboard,
+      index = -1
+    } = _ref5;
+    const handleHeaderCellProps = {
+      activeCellCoordinates,
+      rows,
+      columns,
+      currentMatcher,
+      setActiveCellCoordinates,
+      setCurrentMatcher,
+      setSelectionAreas,
+      spreadsheetRef,
+      index,
+      isKeyboard,
+      setSelectionAreaData,
       isHoldingCommandKey: null,
       isHoldingShiftKey: null
     };
     // Select an entire column
-    if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-      handleHeaderCellSelection(_objectSpread2({
-        type: 'column'
-      }, handleHeaderCellProps));
+    if (activeCellCoordinates?.row === 'header' && activeCellCoordinates?.column !== 'header') {
+      handleHeaderCellSelection({
+        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') {
-      handleHeaderCellSelection(_objectSpread2({
-        type: 'row'
-      }, handleHeaderCellProps));
+    if (activeCellCoordinates?.column === 'header' && activeCellCoordinates?.row !== 'header') {
+      handleHeaderCellSelection({
+        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?.column === 'header' && activeCellCoordinates?.row === 'header') {
       selectAllCells({
         ref: spreadsheetRef,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
-        rows: rows,
-        columns: columns,
-        activeCellCoordinates: activeCellCoordinates,
-        updateActiveCellCoordinates: updateActiveCellCoordinates
+        setCurrentMatcher,
+        setSelectionAreas,
+        rows,
+        columns,
+        activeCellCoordinates,
+        updateActiveCellCoordinates
       });
     }
   };
   // Go into edit mode if double click is detected on activeCellRef
-  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick(readOnlyTable) {
+  const handleActiveCellDoubleClick = readOnlyTable => {
     if (!readOnlyTable) {
       startEditMode();
     }
   };
   useSpreadsheetEdit({
-    isEditing: isEditing,
-    rows: rows,
-    activeCellCoordinates: activeCellCoordinates,
-    activeCellRef: activeCellRef,
-    cellEditorRef: cellEditorRef,
-    cellEditorRulerRef: cellEditorRulerRef,
-    visibleColumns: visibleColumns,
-    defaultColumn: defaultColumn,
-    cellEditorValue: cellEditorValue
+    isEditing,
+    rows,
+    activeCellCoordinates,
+    activeCellRef,
+    cellEditorRef,
+    cellEditorRulerRef,
+    visibleColumns,
+    defaultColumn,
+    cellEditorValue
   });
   // Only update if there are cell selection areas
   // Find point object that matches currentMatcher and remove the second point
   // because hovering over the active cell while clicking and holding should
   // remove the previously existing selection area
-  var handleActiveCellMouseEnterCallback = useCallback(function (areas, clickHold) {
+  const handleActiveCellMouseEnterCallback = useCallback((areas, clickHold) => {
     if (!currentMatcher) {
       return;
     }
     if (areas && areas.length && clickHold && currentMatcher) {
-      setSelectionAreas(function (prev) {
-        var selectionAreaClone = _deepCloneObject(prev);
-        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-          return item.matcher === currentMatcher;
-        });
+      setSelectionAreas(prev => {
+        const selectionAreaClone = deepCloneObject(prev);
+        const indexOfItemToUpdate = selectionAreaClone.findIndex(item => item.matcher === currentMatcher);
         if (indexOfItemToUpdate === -1) {
           return prev;
         }
-        if (_typeof(selectionAreaClone[indexOfItemToUpdate].point2) === 'object' && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
+        if (typeof selectionAreaClone[indexOfItemToUpdate].point2 === 'object' && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
           selectionAreaClone[indexOfItemToUpdate].point2 = selectionAreaClone[indexOfItemToUpdate].point1;
           selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
           setActiveCellInsideSelectionArea(false);
           removeCellSelections({
             matcher: currentMatcher,
-            spreadsheetRef: spreadsheetRef
+            spreadsheetRef
           });
           return selectionAreaClone;
         }
@@ -644,22 +598,23 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       });
     }
   }, [spreadsheetRef, currentMatcher]);
-  var handleActiveCellMouseEnter = useCallback(function () {
+  const handleActiveCellMouseEnter = useCallback(() => {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   // cspell:words rowcount colcount
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
-    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
+    className: cx(blockClass, className, `${blockClass}--interactive-cell-element`, {
+      [`${blockClass}__container-has-focus`]: containerHasFocus,
+      [`${blockClass}__${theme}`]: theme === 'dark'
+    }),
     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?.length || 0,
+    "aria-colcount": columns?.length || 0,
     "aria-label": spreadsheetAriaLabel,
     onKeyDown: handleKeyPressEvent,
-    onFocus: function onFocus() {
-      return setContainerHasFocus(true);
-    }
+    onFocus: () => setContainerHasFocus(true)
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: multiKeyTrackingRef
   }, /*#__PURE__*/React__default.createElement(DataSpreadsheetHeader, {
@@ -730,44 +685,46 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: function onDoubleClick() {
-      return handleActiveCellDoubleClick(readOnlyTable);
-    },
+    onDoubleClick: () => handleActiveCellDoubleClick(readOnlyTable),
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
-    className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
+    className: cx(`${blockClass}--interactive-cell-element`, `${blockClass}__active-cell--highlight`, {
+      [`${blockClass}__active-cell--with-selection`]: activeCellInsideSelectionArea
+    }),
     type: "button"
   }, activeCellContent), /*#__PURE__*/React__default.createElement("textarea", {
-    id: "".concat(blockClass, "__cell-editor-text-area"),
+    id: `${blockClass}__cell-editor-text-area`,
     value: cellEditorValue,
     onKeyDown: handleEditSubmit({
-      activeCellCoordinates: activeCellCoordinates,
-      cellEditorRulerRef: cellEditorRulerRef,
-      columns: columns,
-      previousState: previousState,
-      removeCellEditor: removeCellEditor,
-      rows: rows,
-      setActiveCellCoordinates: setActiveCellCoordinates,
-      setCurrentMatcher: setCurrentMatcher,
-      setSelectionAreas: setSelectionAreas,
-      spreadsheetRef: spreadsheetRef,
-      updateData: updateData
+      activeCellCoordinates,
+      cellEditorRulerRef,
+      columns,
+      previousState,
+      removeCellEditor,
+      rows,
+      setActiveCellCoordinates,
+      setCurrentMatcher,
+      setSelectionAreas,
+      spreadsheetRef,
+      updateData
     }),
-    onChange: function onChange(event) {
+    onChange: event => {
       if (previousState.isEditing) {
         setCellEditorValue(event.target.value);
-        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        if (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) : '',
-    className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
+    "aria-labelledby": activeCellCoordinates ? `${blockClass}__cell--${activeCellCoordinates?.row}--${activeCellCoordinates?.column}` : '',
+    className: cx(`${blockClass}__cell-editor`, `${blockClass}--interactive-cell-element`, `${blockClass}__cell-editor--${cellSize}`, {
+      [`${blockClass}__cell-editor--active`]: isEditing
+    })
   }), /*#__PURE__*/React__default.createElement("pre", {
     "aria-hidden": true,
     ref: cellEditorRulerRef,
-    className: "".concat(blockClass, "__cell-editor-ruler")
+    className: `${blockClass}__cell-editor-ruler`
   })));
 });