@carbon/ibm-products 1.34.1 → 1.35.0

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Copyright IBM Corp. 2022, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -27,49 +25,44 @@ import { useSpreadsheetMouseMove } from './hooks';
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var activeCellCoordinates = _ref.activeCellCoordinates,
-      cellSize = _ref.cellSize,
-      columns = _ref.columns,
-      currentMatcher = _ref.currentMatcher,
-      defaultColumn = _ref.defaultColumn,
-      headerGroups = _ref.headerGroups,
-      scrollBarSize = _ref.scrollBarSize,
-      selectionAreas = _ref.selectionAreas,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      setCurrentMatcher = _ref.setCurrentMatcher,
-      setSelectionAreas = _ref.setSelectionAreas,
-      setSelectionAreaData = _ref.setSelectionAreaData,
-      rows = _ref.rows,
-      totalVisibleColumns = _ref.totalVisibleColumns,
-      updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
-      setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-      headerCellHoldActive = _ref.headerCellHoldActive,
-      selectAllAriaLabel = _ref.selectAllAriaLabel,
-      visibleColumns = _ref.visibleColumns;
-
+    cellSize = _ref.cellSize,
+    columns = _ref.columns,
+    currentMatcher = _ref.currentMatcher,
+    defaultColumn = _ref.defaultColumn,
+    headerGroups = _ref.headerGroups,
+    scrollBarSize = _ref.scrollBarSize,
+    selectionAreas = _ref.selectionAreas,
+    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+    setCurrentMatcher = _ref.setCurrentMatcher,
+    setSelectionAreas = _ref.setSelectionAreas,
+    setSelectionAreaData = _ref.setSelectionAreaData,
+    rows = _ref.rows,
+    totalVisibleColumns = _ref.totalVisibleColumns,
+    updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
+    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
+    headerCellHoldActive = _ref.headerCellHoldActive,
+    selectAllAriaLabel = _ref.selectAllAriaLabel,
+    visibleColumns = _ref.visibleColumns;
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      scrollBarSizeValue = _useState2[0],
-      setScrollBarSizeValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollBarSizeValue = _useState2[0],
+    setScrollBarSizeValue = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedHeaderReorderActive = _useState4[0],
-      setSelectedHeaderReorderActive = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedHeaderReorderActive = _useState4[0],
+    setSelectedHeaderReorderActive = _useState4[1];
   var previousState = usePreviousValue({
     cellSize: cellSize
   });
   useEffect(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
       var _ref$current;
-
       var scrollContainer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
       var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
       var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
       setScrollBarSizeValue(scrollBarValue);
     }
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
-
   var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
     return function (event) {
       var isHoldingCommandKey = event.metaKey || event.ctrlKey;
@@ -91,7 +84,6 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       });
     };
   };
-
   var handleSelectAllClick = function handleSelectAllClick() {
     selectAllCells({
       ref: ref,
@@ -103,16 +95,13 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       updateActiveCellCoordinates: updateActiveCellCoordinates
     });
   };
-
   var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
     return function (event) {
       var _selectionAreaToClone;
-
       if (event.shiftKey) {
         // Remove columns, need to call handleHeaderCellSelection
         return;
       }
-
       setSelectedHeaderReorderActive(true);
       var selectionAreaToClone = selectionAreas.filter(function (item) {
         return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
@@ -138,7 +127,6 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       setHeaderCellHoldActive(true);
     };
   };
-
   useSpreadsheetMouseMove({
     ref: ref,
     headerCellHoldActive: headerCellHoldActive,
@@ -181,7 +169,6 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
       var _cx2;
-
       var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React.createElement("div", _extends({
         key: "column_".concat(index),
@@ -215,22 +202,18 @@ DataSpreadsheetHeader.propTypes = {
     row: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     column: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
-
   /**
    * Specifies the cell height
    */
   cellSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * All of the spreadsheet columns
    */
   columns: PropTypes.array,
-
   /**
    * uuid that corresponds to the current selection area
    */
   currentMatcher: PropTypes.string,
-
   /**
    * Default spreadsheet sizing values
    */
@@ -239,73 +222,59 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: PropTypes.number,
     width: PropTypes.number
   }),
-
   /**
    * Whether or not a click/hold is active on a header cell
    */
   headerCellHoldActive: PropTypes.bool,
-
   /**
    * Headers provided from useTable hook
    */
   headerGroups: PropTypes.arrayOf(PropTypes.object),
-
   /**
    * All of the spreadsheet row data
    */
   rows: PropTypes.arrayOf(PropTypes.object),
-
   /**
    * The scrollbar width
    */
   scrollBarSize: PropTypes.number,
-
   /**
    * The aria label applied to the Select all button
    */
   selectAllAriaLabel: PropTypes.string.isRequired,
-
   /**
    * All of the cell selection area items
    */
   selectionAreas: PropTypes.arrayOf(PropTypes.object),
-
   /**
    * Setter fn for activeCellCoordinates value
    */
   setActiveCellCoordinates: PropTypes.func,
-
   /**
    * Setter fn for currentMatcher value
    */
   setCurrentMatcher: PropTypes.func,
-
   /**
    * Setter fn for header cell hold active value
    */
   setHeaderCellHoldActive: PropTypes.func,
-
   /**
    * Setter fn for selectionAreaData state value
    */
   setSelectionAreaData: PropTypes.func,
-
   /**
    * Setter fn for selectionAreas value
    */
   setSelectionAreas: PropTypes.func,
-
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
   totalVisibleColumns: PropTypes.number,
-
   /**
    * Function used to update the active cell coordinates
    */
   updateActiveCellCoordinates: PropTypes.func,
-
   /**
    * Array of visible columns provided by react-table useTable hook
    */

package/es/components/DataSpreadsheet/hooks/index.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { useMoveActiveCell } from './useMoveActiveCell';
 export { useMultipleKeyTracking } from './useMultipleKeyTracking';
 export { useResetSpreadsheetFocus } from './useResetSpreadsheetFocus';

package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -4,18 +4,19 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useEffect } from 'react'; // Moves the placement of the active cell
 
+import { useEffect } from 'react';
+
+// Moves the placement of the active cell
 export var useMoveActiveCell = function useMoveActiveCell(_ref) {
   var spreadsheetRef = _ref.spreadsheetRef,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      containerHasFocus = _ref.containerHasFocus,
-      createActiveCell = _ref.createActiveCell;
+    activeCellCoordinates = _ref.activeCellCoordinates,
+    containerHasFocus = _ref.containerHasFocus,
+    createActiveCell = _ref.createActiveCell;
   useEffect(function () {
     var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
     var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
     var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
-
     if (containerHasFocus) {
       createActiveCell({
         placementElement: activeCellCoordinates ? activeCellPlacementElement : selectAllElement,

package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -1,66 +1,56 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
  * Copyright IBM Corp. 2022, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { useEffect, useState } from 'react';
 import { usePreviousValue } from '../../../global/js/hooks';
 import { includesResourceKey } from '../utils/handleMultipleKeys';
-
 var hasFocus = function hasFocus() {
   return typeof document !== 'undefined' && document.hasFocus();
 };
-
 export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
   var ref = _ref.ref,
-      containerHasFocus = _ref.containerHasFocus,
-      isEditing = _ref.isEditing;
-
+    containerHasFocus = _ref.containerHasFocus,
+    isEditing = _ref.isEditing;
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      usingMac = _useState2[0],
-      setUsingMac = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    usingMac = _useState2[0],
+    setUsingMac = _useState2[1];
   var _useState3 = useState(hasFocus),
-      _useState4 = _slicedToArray(_useState3, 2),
-      windowFocused = _useState4[0],
-      setWindowFocused = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowFocused = _useState4[0],
+    setWindowFocused = _useState4[1];
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      keysPressedList = _useState6[0],
-      setKeysPressedList = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    keysPressedList = _useState6[0],
+    setKeysPressedList = _useState6[1];
   var previousState = usePreviousValue({
     isEditing: isEditing,
     windowFocused: windowFocused,
     containerHasFocus: containerHasFocus
-  }); // useEffect to check for window focus, if window loses focus
-  // we need to clear out the keysPressedList
+  });
 
+  // useEffect to check for window focus, if window loses focus
+  // we need to clear out the keysPressedList
   useEffect(function () {
     var userAgentString = window.navigator.userAgent;
-
     if (userAgentString.includes('Macintosh')) {
       setUsingMac(true);
     } else {
       setUsingMac(false);
     }
-
     setWindowFocused(hasFocus());
-
     var onWindowFocus = function onWindowFocus() {
       return setWindowFocused(true);
     };
-
     var onWindowBlur = function onWindowBlur() {
       return setWindowFocused(false);
     };
-
     window.addEventListener('focus', onWindowFocus);
     window.addEventListener('blur', onWindowBlur);
     return function () {
@@ -76,57 +66,46 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
           // Prevent multiple keys of the same type being added to our keysPressedList array
           if (keysPressedList.includes(event.code)) {
             return;
-          } // Because keyup events are lost when using the Command key
+          }
+          // Because keyup events are lost when using the Command key
           // we need to remove the previously pressed keys so that we
           // do not have keys in the pressed list that should not be
-
-
           if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.length > 1) {
             var clonedKeys = _toConsumableArray(keysPressedList);
-
             var filteredClonedKeys = clonedKeys.filter(function (item) {
               return item === 'MetaLeft' || item === 'MetaRight';
             });
             filteredClonedKeys.push(event.code);
             return setKeysPressedList(_toConsumableArray(new Set(filteredClonedKeys)));
           }
-
           var tempKeys = _toConsumableArray(keysPressedList);
-
           tempKeys.push(event.code);
           setKeysPressedList(_toConsumableArray(new Set(tempKeys)));
-        } // If keyup, we will remove the key from the keysPressedList array
-
-
+        }
+        // If keyup, we will remove the key from the keysPressedList array
         if (event.type === 'keyup') {
           var _tempKeys = _toConsumableArray(keysPressedList);
-
           var filteredClone = _tempKeys.filter(function (item) {
             return item !== event.code;
-          }); // Keyup events are lost on all other keys if a Meta key is used
+          });
+          // Keyup events are lost on all other keys if a Meta key is used
           // so to work around this behavior, we empty out all other keys
           // from the keysPressedList array if we detect a Meta keyup event
-
-
           if (event.code === 'MetaLeft' || event.code === 'MetaRight') {
             return setKeysPressedList([]);
           }
-
           setKeysPressedList(_toConsumableArray(new Set(filteredClone)));
         }
       };
     }
-
     if (previousState !== null && previousState !== void 0 && previousState.windowFocused && !windowFocused) {
       setKeysPressedList([]);
-    } // Remove handlers if the spreadsheet container loses focus
+    }
+    // Remove handlers if the spreadsheet container loses focus
     // or is currently in edit mode
-
-
     if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
-
       if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
         setKeysPressedList([]);
       }

package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js

@@ -4,21 +4,21 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { useEffect } from 'react';
 import { pkg } from '../../../settings';
 export var useResetSpreadsheetFocus = function useResetSpreadsheetFocus(_ref) {
   var _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      focusedElement = _ref.focusedElement,
-      removeActiveCell = _ref.removeActiveCell,
-      setContainerHasFocus = _ref.setContainerHasFocus;
+    blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    focusedElement = _ref.focusedElement,
+    removeActiveCell = _ref.removeActiveCell,
+    setContainerHasFocus = _ref.setContainerHasFocus;
   // Reset everything when spreadsheet loses focus
   useEffect(function () {
     if (!focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
       setContainerHasFocus(false);
       removeActiveCell();
     }
-
     if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
       setContainerHasFocus(true);
     }

package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js

@@ -1,33 +1,31 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
  * Copyright IBM Corp. 2022, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { useEffect, useState } from 'react';
 import { px } from '@carbon/layout';
 import { pkg } from '../../../settings';
 import { usePreviousValue } from '../../../global/js/hooks';
 export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
   var isEditing = _ref.isEditing,
-      rows = _ref.rows,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      activeCellRef = _ref.activeCellRef,
-      cellEditorRef = _ref.cellEditorRef,
-      cellEditorRulerRef = _ref.cellEditorRulerRef,
-      visibleColumns = _ref.visibleColumns,
-      defaultColumn = _ref.defaultColumn,
-      cellEditorValue = _ref.cellEditorValue,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
-
+    rows = _ref.rows,
+    activeCellCoordinates = _ref.activeCellCoordinates,
+    activeCellRef = _ref.activeCellRef,
+    cellEditorRef = _ref.cellEditorRef,
+    cellEditorRulerRef = _ref.cellEditorRulerRef,
+    visibleColumns = _ref.visibleColumns,
+    defaultColumn = _ref.defaultColumn,
+    cellEditorValue = _ref.cellEditorValue,
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      nextIndex = _useState2[0],
-      setNextIndex = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    nextIndex = _useState2[0],
+    setNextIndex = _useState2[1];
   var previousState = usePreviousValue({
     nextIndex: nextIndex
   });
@@ -39,10 +37,8 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
   useEffect(function () {
     var rulerWidth = cellEditorRulerRef.current.offsetWidth;
     var cellEditorCurrentWidth = parseInt(cellEditorRef.current.style.width);
-
     if (isEditing) {
       var _rows$activeCellCoord, _cellProps$column, _cellEditorRef$curren;
-
       var cellProps = (_rows$activeCellCoord = rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row]) === null || _rows$activeCellCoord === void 0 ? void 0 : _rows$activeCellCoord.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column];
       var activeCellLeftPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.left;
       var activeCellTopPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.top;
@@ -51,36 +47,30 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
       cellEditorRef.current.style.display = 'block';
       cellEditorRef.current.style.height = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height;
       cellEditorRef.current.style.paddingTop = "".concat((parseInt(activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height) - 16) / 2 - 1, "px"); // calculate paddingTop based on cellHeight which could be variable depending on the cellSize prop
-
       cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
       (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
-
       if (rulerWidth < cellEditorCurrentWidth) {
         var _visibleColumns$nextI;
-
-        var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width); // If the contents of the cell editor is deleted past the point of the next column
-
+        var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
+        // If the contents of the cell editor is deleted past the point of the next column
         if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
           cellEditorRef.current.style.width = px(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
           setNextIndex(function (prev) {
             if (prev === 0) {
               return prev;
             }
-
             return prev - 1;
           });
-        } // Decrease cell editor width by increment of current column width
-
+        }
+        // Decrease cell editor width by increment of current column width
       }
 
       if (rulerWidth >= cellEditorCurrentWidth) {
         var _visibleColumns;
-
         setNextIndex(function (prev) {
           if (prev === visibleColumns.length - 1) {
             return prev;
           }
-
           return prev + 1;
         });
         var onLastColumnIndex = nextIndex + 1 === visibleColumns.length;
@@ -94,7 +84,6 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
         // Cell editor has reached max height, we need to add the scrolling back.
         // We also need to subtract 1 to account for the fact that the cell editor
         // is placed one pixel below the cell being edited to account for the border
-
         if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
           cellEditorRef.current.style.overflow = 'auto';
         } else {
@@ -102,7 +91,6 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
         }
       }
     }
-
     if (!isEditing) {
       cellEditorRef.current.style.overflow = 'hidden';
       cellEditorRef.current.style.display = 'none';

package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js

@@ -4,26 +4,26 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { useEffect } from 'react';
 import { px } from '@carbon/layout';
 import { pkg } from '../../../settings';
-import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
-// cloned selection area to follow the position of the cursor
+import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine';
 
+// Used specifically for reordering columns, will move the position of the
+// cloned selection area to follow the position of the cursor
 export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
   var ref = _ref.ref,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      headerCellHoldActive = _ref.headerCellHoldActive,
-      defaultColumn = _ref.defaultColumn;
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    headerCellHoldActive = _ref.headerCellHoldActive,
+    defaultColumn = _ref.defaultColumn;
   useEffect(function () {
     var handleMouseMove = function handleMouseMove(event) {
       var clonedSelectionElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
-
       if (clonedSelectionElement) {
         ref.current.addEventListener('mousemove', handleMouseMove);
       }
-
       var spreadsheetCoords = ref.current.getBoundingClientRect();
       var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
       var scrollAmount = listContainer.scrollLeft;
@@ -39,22 +39,18 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
       var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
       var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
       var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
-      var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse, and
+      var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
+      // Moves the position of the cloned selection area to follow mouse, and
       // add the amount horizontally scrolled
-
       clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
     };
-
     if (headerCellHoldActive) {
       ref.current.addEventListener('mousemove', handleMouseMove);
     }
-
     var spreadsheetRef = ref.current;
-
     if (!headerCellHoldActive) {
       spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
     }
-
     return function () {
       spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
     };