@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -35,178 +35,124 @@ var useSpreadsheetOutsideClick = require('./hooks/useSpreadsheetOutsideClick.js'
 var useMoveActiveCell = require('./hooks/useMoveActiveCell.js');
 var useSpreadsheetEdit = require('./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(settings.pkg.prefix, "--data-spreadsheet");
-var componentName = 'DataSpreadsheet';
+const blockClass = `${settings.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.
  */
-exports.DataSpreadsheet = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var multiKeyTrackingRef = React.useRef(null);
-  var localRef = React.useRef(undefined);
-  var spreadsheetRef = ref || localRef;
-  var focusedElement = useActiveElement.useActiveElement();
-  var _useState = React.useState(columns),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    currentColumns = _useState2[0],
-    setCurrentColumns = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    pastColumns = _useState4[0],
-    setPastColumns = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    containerHasFocus = _useState6[0],
-    setContainerHasFocus = _useState6[1];
-  var _useState7 = React.useState(null),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    activeCellCoordinates = _useState8[0],
-    setActiveCellCoordinates = _useState8[1];
-  var _useState9 = React.useState([]),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    selectionAreas = _useState10[0],
-    setSelectionAreas = _useState10[1];
-  var _useState11 = React.useState([]),
-    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    selectionAreaData = _useState12[0],
-    setSelectionAreaData = _useState12[1];
-  var _useState13 = React.useState(false),
-    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-    clickAndHoldActive = _useState14[0],
-    setClickAndHoldActive = _useState14[1];
-  var _useState15 = React.useState(''),
-    _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
-    currentMatcher = _useState16[0],
-    setCurrentMatcher = _useState16[1];
-  var _useState17 = React.useState(false),
-    _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
-    isEditing = _useState18[0],
-    setIsEditing = _useState18[1];
-  var _useState19 = React.useState(''),
-    _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    cellEditorValue = _useState20[0],
-    setCellEditorValue = _useState20[1];
-  var _useState21 = React.useState(false),
-    _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    headerCellHoldActive = _useState22[0],
-    setHeaderCellHoldActive = _useState22[1];
-  var _useState23 = React.useState(false),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    selectedHeaderReorderActive = _useState24[0],
-    setSelectedHeaderReorderActive = _useState24[1];
-  var isBlurSpreadsheet = React.useRef(false);
-  var _useState25 = React.useState(false),
-    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
-    isActiveHeaderCellChanged = _useState26[0],
-    setIsActiveHeaderCellChanged = _useState26[1];
-  var _useState27 = React.useState(false),
-    _useState28 = _rollupPluginBabelHelpers.slicedToArray(_useState27, 2),
-    activeCellInsideSelectionArea = _useState28[0],
-    setActiveCellInsideSelectionArea = _useState28[1];
-  var previousState = usePreviousValue.usePreviousValue({
-    activeCellCoordinates: activeCellCoordinates,
-    isEditing: isEditing,
-    cellEditorValue: cellEditorValue,
-    selectedHeaderReorderActive: selectedHeaderReorderActive
+exports.DataSpreadsheet = /*#__PURE__*/React.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 = React.useRef(null);
+  const localRef = React.useRef(undefined);
+  const spreadsheetRef = ref || localRef;
+  const focusedElement = useActiveElement.useActiveElement();
+  const [currentColumns, setCurrentColumns] = React.useState(columns);
+  const [pastColumns, setPastColumns] = React.useState([]);
+  const [containerHasFocus, setContainerHasFocus] = React.useState(false);
+  const [activeCellCoordinates, setActiveCellCoordinates] = React.useState(null);
+  const [selectionAreas, setSelectionAreas] = React.useState([]);
+  const [selectionAreaData, setSelectionAreaData] = React.useState([]);
+  const [clickAndHoldActive, setClickAndHoldActive] = React.useState(false);
+  const [currentMatcher, setCurrentMatcher] = React.useState('');
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [cellEditorValue, setCellEditorValue] = React.useState('');
+  const [headerCellHoldActive, setHeaderCellHoldActive] = React.useState(false);
+  const [selectedHeaderReorderActive, setSelectedHeaderReorderActive] = React.useState(false);
+  const isBlurSpreadsheet = React.useRef(false);
+  const [isActiveHeaderCellChanged, setIsActiveHeaderCellChanged] = React.useState(false);
+  const [activeCellInsideSelectionArea, setActiveCellInsideSelectionArea] = React.useState(false);
+  const previousState = usePreviousValue.usePreviousValue({
+    activeCellCoordinates,
+    isEditing,
+    cellEditorValue,
+    selectedHeaderReorderActive
   }) || {};
-  var cellSizeValue = getCellSize.getCellSize(cellSize);
-  var cellEditorRef = React.useRef(undefined);
-  var _useState29 = React.useState(),
-    _useState30 = _rollupPluginBabelHelpers.slicedToArray(_useState29, 2),
-    activeCellContent = _useState30[0],
-    setActiveCellContent = _useState30[1];
-  var activeCellRef = React.useRef(undefined);
-  var cellEditorRulerRef = React.useRef(undefined);
-  var hasCustomRowHeader = typeof renderRowHeader === 'function';
-  var maxNumRowsCount = data.length.toString().length;
-  var defaultColumn = React.useMemo(function () {
-    return {
-      width: 150,
-      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
-      rowHeight: cellSizeValue
-    };
-  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
-  var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
-      ref: multiKeyTrackingRef,
-      containerHasFocus: containerHasFocus,
-      isEditing: isEditing
-    }),
-    keysPressedList = _useMultipleKeyTracki.keysPressedList,
-    usingMac = _useMultipleKeyTracki.usingMac;
-  var scrollBarSize = React.useMemo(function () {
-    return getScrollbarWidth.getScrollbarWidth();
-  }, []);
-  var _ref2 = reactTable.useTable({
-      columns: columns,
-      data: data,
-      defaultColumn: defaultColumn
-    }, reactTable.useBlockLayout, reactTable.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.getCellSize(cellSize);
+  const cellEditorRef = React.useRef(undefined);
+  const [activeCellContent, setActiveCellContent] = React.useState();
+  const activeCellRef = React.useRef(undefined);
+  const cellEditorRulerRef = React.useRef(undefined);
+  const hasCustomRowHeader = typeof renderRowHeader === 'function';
+  const maxNumRowsCount = data.length.toString().length;
+  const defaultColumn = React.useMemo(() => ({
+    width: 150,
+    rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
+    rowHeight: cellSizeValue
+  }), [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
+  const {
+    keysPressedList,
+    usingMac
+  } = useMultipleKeyTracking.useMultipleKeyTracking({
+    ref: multiKeyTrackingRef,
+    containerHasFocus,
+    isEditing
+  });
+  const scrollBarSize = React.useMemo(() => getScrollbarWidth.getScrollbarWidth(), []);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    totalColumnsWidth,
+    prepareRow,
+    setColumnOrder,
+    visibleColumns
+  } = reactTable.useTable({
+    columns,
+    data,
+    defaultColumn
+  }, reactTable.useBlockLayout, reactTable.useColumnOrder);
 
   // Update the spreadsheet data after editing a cell
-  var updateData = React.useCallback(function (rowIndex, columnId, newValue) {
-    onDataUpdate(function (prev) {
-      return prev.map(function (row, index) {
-        if (index === rowIndex) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev[rowIndex]), {}, _rollupPluginBabelHelpers.defineProperty({}, columnId, cellEditorValue || newValue));
-        }
-        return row;
-      });
-    });
+  const updateData = React.useCallback((rowIndex, columnId, newValue) => {
+    onDataUpdate(prev => prev.map((row, index) => {
+      if (index === rowIndex) {
+        return {
+          ...prev[rowIndex],
+          [columnId]: cellEditorValue || newValue
+        };
+      }
+      return row;
+    }));
   }, [cellEditorValue, onDataUpdate]);
-  React.useEffect(function () {
-    var currentHeaders = [];
+  React.useEffect(() => {
+    const currentHeaders = [];
     if (Object.keys(currentColumns).length > 0) {
-      Object.keys(currentColumns).forEach(function (itemIndex) {
-        if (_rollupPluginBabelHelpers.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 {
@@ -229,50 +175,47 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         setPastColumns([]);
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
+  }, [previousState?.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
 
   // Removes the active cell element
-  var removeActiveCell = React.useCallback(function () {
-    var _current;
-    var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === void 0 || (_current = spreadsheetRef.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+  const removeActiveCell = React.useCallback(() => {
+    const activeCellHighlight = spreadsheetRef?.current?.querySelector(`.${blockClass}__active-cell--highlight`);
     if (activeCellHighlight) {
       activeCellHighlight.style.display = 'none';
     }
   }, [spreadsheetRef]);
-  var removeCellEditor = React.useCallback(function () {
+  const removeCellEditor = React.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
-  React.useEffect(function () {
-    var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
-    if (((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) && isEditing) {
-      var cellProps = rows[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row)].cells[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column)];
+  React.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
@@ -281,50 +224,51 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isBlurSpreadsheet.current = false;
       removeCellEditor();
     }
-  }, [isBlurSpreadsheet, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
-  var createActiveCell = React.useCallback(function (_ref3) {
-    var placementElement = _ref3.placementElement,
-      coords = _ref3.coords,
-      _ref3$addToHeader = _ref3.addToHeader,
-      addToHeader = _ref3$addToHeader === void 0 ? false : _ref3$addToHeader;
-    var activeCellFullData = typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? rows[coords === null || coords === void 0 ? void 0 : coords.row].cells[coords === null || coords === void 0 ? void 0 : coords.column] : null;
-    var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === void 0 ? void 0 : coords.column] : null;
+  }, [isBlurSpreadsheet, activeCellCoordinates, previousState?.activeCellCoordinates, previousState?.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
+  const createActiveCell = React.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.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.useResetSpreadsheetFocus({
-    focusedElement: focusedElement,
-    removeActiveCell: removeActiveCell,
-    setContainerHasFocus: setContainerHasFocus
+    focusedElement,
+    removeActiveCell,
+    setContainerHasFocus
   });
   useSpreadsheetOutsideClick.useSpreadsheetOutsideClick({
-    isBlurSpreadsheet: isBlurSpreadsheet,
-    spreadsheetRef: spreadsheetRef,
-    setActiveCellCoordinates: setActiveCellCoordinates,
-    setSelectionAreas: setSelectionAreas,
-    removeActiveCell: removeActiveCell,
-    setContainerHasFocus: setContainerHasFocus,
-    removeCellEditor: removeCellEditor
+    isBlurSpreadsheet,
+    spreadsheetRef,
+    setActiveCellCoordinates,
+    setSelectionAreas,
+    removeActiveCell,
+    setContainerHasFocus,
+    removeCellEditor
   });
   useMoveActiveCell.useMoveActiveCell({
-    spreadsheetRef: spreadsheetRef,
-    activeCellCoordinates: activeCellCoordinates,
-    containerHasFocus: containerHasFocus,
-    createActiveCell: createActiveCell,
-    activeCellContent: activeCellContent,
-    isActiveHeaderCellChanged: isActiveHeaderCellChanged
+    spreadsheetRef,
+    activeCellCoordinates,
+    containerHasFocus,
+    createActiveCell,
+    activeCellContent,
+    isActiveHeaderCellChanged
   });
-  var handleInitialArrowPress = React.useCallback(function () {
+  const handleInitialArrowPress = React.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);
@@ -336,20 +280,25 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     return;
   }, [activeCellCoordinates]);
-  var updateActiveCellCoordinates = React.useCallback(function (_ref4) {
-    var _ref4$coords = _ref4.coords,
-      coords = _ref4$coords === void 0 ? _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates) : _ref4$coords,
-      updatedValue = _ref4.updatedValue,
-      _ref4$optOutOfSelecti = _ref4.optOutOfSelectionAreaUpdate,
-      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === void 0 ? false : _ref4$optOutOfSelecti;
-    var newActiveCell = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, coords), updatedValue);
+  const updateActiveCellCoordinates = React.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.default();
+      const tempMatcher = uuidv4.default();
       setSelectionAreas([{
         point1: newActiveCell,
         matcher: tempMatcher
@@ -357,9 +306,13 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setCurrentMatcher(tempMatcher);
     }
   }, [activeCellCoordinates]);
-  var handleHomeEndKey = React.useCallback(function (_ref5) {
-    var type = _ref5.type;
-    var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
+  const handleHomeEndKey = React.useCallback(_ref4 => {
+    let {
+      type
+    } = _ref4;
+    const coordinatesClone = {
+      ...activeCellCoordinates
+    };
     updateActiveCellCoordinates({
       coords: coordinatesClone,
       updatedValue: {
@@ -368,18 +321,19 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     removeCellSelections.removeCellSelections({
       matcher: undefined,
-      spreadsheetRef: spreadsheetRef
+      spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
-  var checkForReturnCondition = React.useCallback(function (key) {
+  const checkForReturnCondition = React.useCallback(key => {
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
-  var handleArrowKeyPress = React.useCallback(function (arrowKey) {
-    var _event;
-    (_event = event) === null || _event === void 0 || _event.preventDefault();
+  const handleArrowKeyPress = React.useCallback(arrowKey => {
+    event?.preventDefault();
     handleInitialArrowPress();
-    var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
-    var updatedValue;
+    const coordinatesClone = {
+      ...activeCellCoordinates
+    };
+    let updatedValue;
     switch (arrowKey) {
       // Left
       case 'ArrowLeft':
@@ -468,42 +422,39 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (updatedValue) {
       updateActiveCellCoordinates({
         coords: coordinatesClone,
-        updatedValue: updatedValue
+        updatedValue
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPressEvent = React.useCallback(function (event) {
+  const handleKeyPressEvent = React.useCallback(event => {
     commonEventHandlers.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
-  React.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();
+  React.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({
@@ -515,18 +466,18 @@ exports.DataSpreadsheet = /*#__PURE__*/React.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.default();
+  const handleActiveCellMouseDown = () => {
+    if (activeCellCoordinates?.row !== 'header' || activeCellCoordinates?.column !== 'header') {
+      const tempMatcher = uuidv4.default();
       setClickAndHoldActive(true);
       removeCellSelections.removeCellSelections({
         matcher: null,
-        spreadsheetRef: spreadsheetRef
+        spreadsheetRef
       });
       setSelectionAreas([{
         point1: activeCellCoordinates,
@@ -540,105 +491,108 @@ exports.DataSpreadsheet = /*#__PURE__*/React.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.handleHeaderCellSelection(_rollupPluginBabelHelpers.objectSpread2({
-        type: 'column'
-      }, handleHeaderCellProps));
+    if (activeCellCoordinates?.row === 'header' && activeCellCoordinates?.column !== 'header') {
+      handleHeaderCellSelection.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.handleHeaderCellSelection(_rollupPluginBabelHelpers.objectSpread2({
-        type: 'row'
-      }, handleHeaderCellProps));
+    if (activeCellCoordinates?.column === 'header' && activeCellCoordinates?.row !== 'header') {
+      handleHeaderCellSelection.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.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.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 = React.useCallback(function (areas, clickHold) {
+  const handleActiveCellMouseEnterCallback = React.useCallback((areas, clickHold) => {
     if (!currentMatcher) {
       return;
     }
     if (areas && areas.length && clickHold && currentMatcher) {
-      setSelectionAreas(function (prev) {
-        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);
         if (indexOfItemToUpdate === -1) {
           return prev;
         }
-        if (_rollupPluginBabelHelpers.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.removeCellSelections({
             matcher: currentMatcher,
-            spreadsheetRef: spreadsheetRef
+            spreadsheetRef
           });
           return selectionAreaClone;
         }
@@ -646,22 +600,23 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
   }, [spreadsheetRef, currentMatcher]);
-  var handleActiveCellMouseEnter = React.useCallback(function () {
+  const handleActiveCellMouseEnter = React.useCallback(() => {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   // cspell:words rowcount colcount
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
-    className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement("div", {
     ref: multiKeyTrackingRef
   }, /*#__PURE__*/React.createElement(DataSpreadsheetHeader.DataSpreadsheetHeader, {
@@ -732,44 +687,46 @@ exports.DataSpreadsheet = /*#__PURE__*/React.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"), _rollupPluginBabelHelpers.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.createElement("textarea", {
-    id: "".concat(blockClass, "__cell-editor-text-area"),
+    id: `${blockClass}__cell-editor-text-area`,
     value: cellEditorValue,
     onKeyDown: handleEditSubmit.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), _rollupPluginBabelHelpers.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.createElement("pre", {
     "aria-hidden": true,
     ref: cellEditorRulerRef,
-    className: "".concat(blockClass, "__cell-editor-ruler")
+    className: `${blockClass}__cell-editor-ruler`
   })));
 });