@carbon/ibm-products 1.34.1 → 1.35.0

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

@@ -4,37 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpreadsheetMouseMove = void 0;
-
 var _react = require("react");
-
 var _layout = require("@carbon/layout");
-
 var _settings = require("../../../settings");
-
 var _moveColumnIndicatorLine = require("../utils/moveColumnIndicatorLine");
-
 /**
  * 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.
  */
+
 // Used specifically for reordering columns, will move the position of the
 // cloned selection area to follow the position of the cursor
 var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
   var ref = _ref.ref,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      headerCellHoldActive = _ref.headerCellHoldActive,
-      defaultColumn = _ref.defaultColumn;
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    headerCellHoldActive = _ref.headerCellHoldActive,
+    defaultColumn = _ref.defaultColumn;
   (0, _react.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;
@@ -50,26 +44,21 @@ 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 = (0, _layout.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);
     };
   });
 };
-
 exports.useSpreadsheetMouseMove = useSpreadsheetMouseMove;

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js

@@ -1,57 +1,45 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpreadsheetMouseUp = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = require("react");
-
 var _layout = require("@carbon/layout");
-
 var _settings = require("../../../settings");
-
 var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
-
 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) { (0, _defineProperty2.default)(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; }
-
 var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
   var currentMatcher = _ref.currentMatcher,
-      setSelectionAreas = _ref.setSelectionAreas,
-      setClickAndHoldActive = _ref.setClickAndHoldActive,
-      setValidStartingPoint = _ref.setValidStartingPoint,
-      validStartingPoint = _ref.validStartingPoint,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      ref = _ref.ref,
-      setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-      setColumnOrder = _ref.setColumnOrder,
-      visibleColumns = _ref.visibleColumns,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      rows = _ref.rows,
-      defaultColumn = _ref.defaultColumn,
-      selectionAreas = _ref.selectionAreas;
+    setSelectionAreas = _ref.setSelectionAreas,
+    setClickAndHoldActive = _ref.setClickAndHoldActive,
+    setValidStartingPoint = _ref.setValidStartingPoint,
+    validStartingPoint = _ref.validStartingPoint,
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    ref = _ref.ref,
+    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
+    setColumnOrder = _ref.setColumnOrder,
+    visibleColumns = _ref.visibleColumns,
+    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+    activeCellCoordinates = _ref.activeCellCoordinates,
+    rows = _ref.rows,
+    defaultColumn = _ref.defaultColumn,
+    selectionAreas = _ref.selectionAreas;
   (0, _react.useEffect)(function () {
     var handleMouseUp = function handleMouseUp(event) {
       // Remove the cloned selection area on mouse up
       if (!validStartingPoint) {
         setHeaderCellHoldActive(false);
         var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
-
         if (!selectionAreaCloneElement) {
           return;
-        } // Mouse up while a cloned selection area exists/a column is being reordered
-
-
+        }
+        // Mouse up while a cloned selection area exists/a column is being reordered
         if (selectionAreaCloneElement) {
           var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
           var newColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index'));
@@ -60,12 +48,11 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
             return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
           });
           var selectionAreaIndexArray = selectionAreaToClone[0].header.selectedIndexList;
-          var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
-
+          var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]"));
+          // Mouse up element was not part of the spreadsheet component
           if (!columnToMoveToElement) {
             return;
           }
-
           var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
           var spreadsheetPosition = ref.current.getBoundingClientRect();
           var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
@@ -75,19 +62,15 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
           var differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
           setSelectionAreas(function (prev) {
             var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
-
             if (originalColumnIndex === newColumnIndex) {
               return prev;
             }
-
             var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
               return item.matcher === currentMatcher;
             });
-
             if (indexOfItemToUpdate === -1) {
               return prev;
             }
-
             if (!selectionAreaIndexArray.includes(newColumnIndex)) {
               // We need to not add just the newColumnIndex, but an array of indexes
               // if there are multiple columns
@@ -100,13 +83,12 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
               selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min.apply(Math, (0, _toConsumableArray2.default)(newIndexArray));
               selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max.apply(Math, (0, _toConsumableArray2.default)(newIndexArray));
             }
-
             return selectionAreaClone;
-          }); // Only reorder columns if the new index is _not_ part of the
+          });
+          // Only reorder columns if the new index is _not_ part of the
           // selectionAreaIndexArray, meaning the new placement is outside
           // of the current selection area. Similarly, the active cell position
           // should only be changed under the same condition.
-
           if (!selectionAreaIndexArray.includes(newColumnIndex)) {
             var deleteCount = selectionAreaIndexArray.length;
             var startIndex = Math.min.apply(Math, (0, _toConsumableArray2.default)(selectionAreaIndexArray));
@@ -114,52 +96,45 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
               return column.id;
             });
             var columnIdArrayClone = (0, _toConsumableArray2.default)(columnIdArray);
-
             var getNewColumnOrder = function getNewColumnOrder() {
               var newColumnList = [];
               selectionAreaIndexArray.map(function (index) {
                 return newColumnList.push(columnIdArray[index]);
               });
               return newColumnList;
-            }; // Remove one element at the original index
-
-
+            };
+            // Remove one element at the original index
             columnIdArrayClone.splice(startIndex, deleteCount);
             var originalPointIndex = selectionAreaIndexArray.findIndex(function (item) {
               return item === originalColumnIndex;
             });
-            var updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex; // Add one element at the new index
-
+            var updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex;
+            // Add one element at the new index
             columnIdArrayClone.splice.apply(columnIdArrayClone, [updatedNewIndexWithNewOrder, 0].concat((0, _toConsumableArray2.default)(getNewColumnOrder())));
             setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
-
             var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
               column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
             });
-
             setActiveCellCoordinates(newCellCoords);
             var firstSelectedHeader = Array.from(ref.current.querySelectorAll(".".concat(blockClass, "__th--selected-header")))[0];
             var firstSelectedHeaderCoords = firstSelectedHeader.getBoundingClientRect();
-            var newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount; // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
-
+            var newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount;
+            // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
             var updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
             selectionAreaToMove.style.left = (0, _layout.px)(updatedSelectionAreaPlacement);
-          } // Remove the cloned column and indicator elements
-
-
+          }
+          // Remove the cloned column and indicator elements
           var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
           indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
           selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.remove();
         }
-      } // Mouse up was on a spreadsheet body cell which is a valid
+      }
+      // Mouse up was on a spreadsheet body cell which is a valid
       // start/end point for creating a selection area
-
-
       if (validStartingPoint) {
         setClickAndHoldActive(false);
         setValidStartingPoint(false);
         var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
-
         if (cellButton) {
           var endCellCoordinates = {
             row: Number(cellButton.getAttribute('data-row-index')),
@@ -169,12 +144,11 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
             var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
             var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
               return item.matcher === currentMatcher;
-            }); // No items in the array have an object that matches the value of currentMatcher
-
+            });
+            // No items in the array have an object that matches the value of currentMatcher
             if (indexOfItemToUpdate === -1) {
               return prev;
             }
-
             selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
             selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
             return selectionAreaClone;
@@ -182,12 +156,10 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
         }
       }
     };
-
     document.addEventListener('mouseup', handleMouseUp);
     return function () {
       document.removeEventListener('mouseup', handleMouseUp);
     };
   }, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
 };
-
 exports.useSpreadsheetMouseUp = useSpreadsheetMouseUp;

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -4,35 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpreadsheetOutsideClick = void 0;
-
 var _react = require("react");
-
 var _settings = require("../../../settings");
-
 var _removeCellSelections = require("../utils/removeCellSelections");
-
 /**
  * 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.
  */
+
 // Click outside useEffect for spreadsheet
 var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
   var spreadsheetRef = _ref.spreadsheetRef,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      setSelectionAreas = _ref.setSelectionAreas,
-      removeActiveCell = _ref.removeActiveCell,
-      setContainerHasFocus = _ref.setContainerHasFocus,
-      removeCellEditor = _ref.removeCellEditor;
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+    setSelectionAreas = _ref.setSelectionAreas,
+    removeActiveCell = _ref.removeActiveCell,
+    setContainerHasFocus = _ref.setContainerHasFocus,
+    removeCellEditor = _ref.removeCellEditor;
   (0, _react.useEffect)(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
       if (!spreadsheetRef.current || spreadsheetRef.current.contains(event.target) || event.target.classList.contains("".concat(blockClass, "__active-cell--highlight")) || event.target.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
         return;
       }
-
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
@@ -42,12 +38,10 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
       setContainerHasFocus(false);
       removeCellEditor();
     };
-
     document.addEventListener('click', handleOutsideClick);
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
 };
-
 exports.useSpreadsheetOutsideClick = useSpreadsheetOutsideClick;

package/lib/components/DataSpreadsheet/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "DataSpreadsheet", {
     return _DataSpreadsheet.DataSpreadsheet;
   }
 });
-
 var _DataSpreadsheet = require("./DataSpreadsheet");

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

@@ -1,22 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkActiveHeaderCell = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
-
 /**
  * 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.
  */
+
 // Determines if a row or column header cell should receive a highlight/active background color
 // Check each object in selectionAreas and see if the headerIndex is between
 // point1.row and point2.row, inclusive
@@ -25,21 +22,16 @@ var checkActiveHeaderCell = function checkActiveHeaderCell(headerIndex, selectio
   var activeRowIndexes = [];
   areasCloned.forEach(function (area) {
     var _area$point, _area$point2, _area$point3, _area$point4;
-
     var greatestRowIndex = Math.max((_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[headerType], (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[headerType]);
     var lowestRowIndex = Math.min((_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[headerType], (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[headerType]);
-
     for (var i = lowestRowIndex; i <= greatestRowIndex; i++) {
       activeRowIndexes.push(i);
     }
   });
   var activeRowIndexesNoDuplicates = (0, _toConsumableArray2.default)(new Set(activeRowIndexes));
-
   if (areasCloned !== null && areasCloned !== void 0 && areasCloned.length && activeRowIndexesNoDuplicates.includes(headerIndex)) {
     return true;
   }
-
   return false;
 };
-
 exports.checkActiveHeaderCell = checkActiveHeaderCell;

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

@@ -4,37 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkSelectedHeaderCell = void 0;
-
 var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
-
 /**
  * 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.
  */
+
 var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
   var areasCloned = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
   var isSelectedHeader = areasCloned.some(function (area) {
     var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
-
     var oppositeType = headerType === 'column' ? 'row' : 'column';
     var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
     var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
     var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
     var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
-    var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
+    var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0;
+    // console.log({minSelection, maxSelection});
     // Iterate over all columns included in the selection area
-
     for (var i = minSelection; i <= maxSelection; i++) {
       if (headerIndex === i && isTrueSelectedState) {
         return true;
       }
     }
-
     return false;
   });
   return isSelectedHeader;
 };
-
 exports.checkSelectedHeaderCell = checkSelectedHeaderCell;

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

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

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

@@ -4,41 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createCellSelectionArea = void 0;
-
 var _layout = require("@carbon/layout");
-
 var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
-
 var _getSelectionAreaPoints = require("./getSelectionAreaPoints");
-
 /**
  * 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.
  */
+
 var createCellSelectionArea = function createCellSelectionArea(_ref) {
   var ref = _ref.ref,
-      area = _ref.area,
-      blockClass = _ref.blockClass,
-      defaultColumn = _ref.defaultColumn,
-      selectionAreas = _ref.selectionAreas,
-      setSelectionAreas = _ref.setSelectionAreas,
-      setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
-      visibleColumns = _ref.visibleColumns;
-
+    area = _ref.area,
+    blockClass = _ref.blockClass,
+    defaultColumn = _ref.defaultColumn,
+    selectionAreas = _ref.selectionAreas,
+    setSelectionAreas = _ref.setSelectionAreas,
+    setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
+    visibleColumns = _ref.visibleColumns;
   var _getSelectionAreaPoin = (0, _getSelectionAreaPoints.getSelectionAreaPoints)(area),
-      lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
-      lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
-      greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
-      greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex;
-
+    lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
+    lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
+    greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
+    greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex;
   if (greatestRowIndex - lowestRowIndex > 0 || greatestColumnIndex - lowestColumnIndex > 0) {
     setActiveCellInsideSelectionArea(true);
     var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
     activeCellElement.setAttribute('data-selection-id', area.matcher);
   }
-
   var selectionAreaVariableWidth = 0;
   visibleColumns.forEach(function (item, index) {
     if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
@@ -55,8 +49,8 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
     top: placementElement ? placementElement.getBoundingClientRect().top - bodyContainer.getBoundingClientRect().top : lowestRowIndex === 0 ? 0 : selectionAreaCellHeight * lowestRowIndex,
     // calculate top value here if virtualized row is not in DOM
     left: placementElement ? placementElement.getBoundingClientRect().left - bodyContainer.getBoundingClientRect().left : lowestColumnIndex === 0 ? 0 + (defaultColumn.rowHeaderWidth - 4) : defaultColumn.width * lowestColumnIndex + (defaultColumn.rowHeaderWidth - 4) // calculate left value here if virtualized row is not in DOM, accounting for row header cell width (including borders)
-
   };
+
   var selectionAreaElement = document.querySelector("[data-matcher-id=\"".concat(area.matcher, "\"]")) || document.createElement('div');
   selectionAreaElement.classList.add("".concat(blockClass, "__selection-area--element"));
   selectionAreaElement.setAttribute('data-matcher-id', area.matcher);
@@ -68,11 +62,10 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
   var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
   var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
     return item.matcher === area.matcher;
-  }); // We need to add another property to the selectionAreas object array to
+  });
+  // We need to add another property to the selectionAreas object array to
   // let us know if an area has been created for each item already, ie createdArea: true
-
   selectionAreasClone[indexOfCurrentArea].areaCreated = true;
   setSelectionAreas(selectionAreasClone);
 };
-
 exports.createCellSelectionArea = createCellSelectionArea;