@carbon/ibm-products 1.18.1 → 1.18.2

package/es/components/DataSpreadsheet/utils/getCellSize.js

@@ -4,7 +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.
  */
-import { baseFontSize, sizeXSmall as compact, sizeSmall as standard, sizeMedium as medium, sizeLarge as large } from '@carbon/layout';
+import { baseFontSize, sizeXSmall as xs, sizeSmall as sm, sizeMedium as md, sizeLarge as lg } from '@carbon/layout';
 
 var getSizeInPixels = function getSizeInPixels(carbonSize) {
   return Number(carbonSize.replace('rem', '') * baseFontSize);
@@ -12,19 +12,19 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
 
 export var getCellSize = function getCellSize(cellSize) {
   switch (cellSize) {
-    case 'compact':
-      return getSizeInPixels(compact);
+    case 'xs':
+      return getSizeInPixels(xs);
 
-    case 'standard':
-      return getSizeInPixels(standard);
+    case 'sm':
+      return getSizeInPixels(sm);
 
-    case 'medium':
-      return getSizeInPixels(medium);
+    case 'md':
+      return getSizeInPixels(md);
 
-    case 'large':
-      return getSizeInPixels(large);
+    case 'lg':
+      return getSizeInPixels(lg);
 
     default:
-      return getSizeInPixels(standard);
+      return getSizeInPixels(sm);
   }
 };

package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -11,7 +11,8 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
       blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
       clonedSelectionElement = _ref.clonedSelectionElement,
       ref = _ref.ref,
-      spreadsheetCoords = _ref.spreadsheetCoords;
+      spreadsheetCoords = _ref.spreadsheetCoords,
+      leftScrollAmount = _ref.leftScrollAmount;
   var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
   var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
   var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
@@ -21,11 +22,11 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
 
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
+    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left);
+    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {

package/es/components/ExportModal/ExportModal.js

@@ -79,7 +79,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
     setName(filename);
     setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
-  }, [filename, preformattedExtensions]);
+  }, [filename, preformattedExtensions, open]);
 
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -81,7 +81,7 @@ var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet'; // Default values for props
 
 var defaults = {
-  cellSize: 'standard',
+  cellSize: 'sm',
   columns: Object.freeze([]),
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
@@ -900,7 +900,7 @@ DataSpreadsheet.propTypes = {
   /**
    * Specifies the cell height
    */
-  cellSize: _propTypes.default.oneOf(['compact', 'standard', 'medium', 'large']),
+  cellSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
   /**
    * Provide an optional class to be applied to the containing node.

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -96,7 +96,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   var contentScrollRef = (0, _react.useRef)();
   var previousState = (0, _hooks.usePreviousValue)({
     selectionAreaData: selectionAreaData,
-    clickAndHoldActive: clickAndHoldActive
+    clickAndHoldActive: clickAndHoldActive,
+    rowHeight: defaultColumn.rowHeight
   }); // Set custom css property containing the spreadsheet total width
 
   (0, _react.useEffect)(function () {
@@ -176,7 +177,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
 
     for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
       for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
-        cellContainer.push([rowIndex, columnIndex]);
+        cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
       }
     }
 
@@ -198,16 +199,44 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     activeCellCoordinates: activeCellCoordinates,
     defaultColumn: defaultColumn
   }); // Make sure that if the cellSize prop changes, the active
-  // cell also gets updated with the new size
+  // cell also gets updated with the new size and new top placement
+  // value. All of the cell selections will be updated as well
 
   (0, _react.useEffect)(function () {
     var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
     var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
 
-    if (activeCellButton) {
+    if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
       activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
+
+      if (activeCellCoordinates) {
+        var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
+
+        var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+
+        var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
+
+        activeCellButton.style.top = (0, _layout.px)(newActiveCellTopPosition);
+        (0, _removeCellSelections.removeCellSelections)({
+          spreadsheetRef: ref
+        });
+        selectionAreas.map(function (area) {
+          if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
+            return (0, _createCellSelectionArea.createCellSelectionArea)({
+              ref: ref,
+              area: area,
+              blockClass: blockClass,
+              defaultColumn: defaultColumn,
+              selectionAreas: selectionAreas,
+              setSelectionAreas: setSelectionAreas,
+              setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
+              visibleColumns: visibleColumns
+            });
+          }
+        });
+      }
     }
-  }, [defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight]); // onClick fn for each cell in the data spreadsheet body,
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]); // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
 
   var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -230,7 +230,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Specifies the cell height
    */
-  cellSize: _propTypes.default.oneOf(['compact', 'standard', 'medium', 'large']),
+  cellSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
   /**
    * All of the spreadsheet columns

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

@@ -38,21 +38,25 @@ var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
       }
 
       var spreadsheetCoords = ref.current.getBoundingClientRect();
+      var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+      var scrollAmount = listContainer.scrollLeft;
       (0, _moveColumnIndicatorLine.moveColumnIndicatorLine)({
         clonedSelectionElement: clonedSelectionElement,
         ref: ref,
-        spreadsheetCoords: spreadsheetCoords
+        spreadsheetCoords: spreadsheetCoords,
+        leftScrollAmount: scrollAmount
       });
       var scrollbarWidth = (0, _getScrollbarWidth.getScrollbarWidth)();
       var spreadsheetWrapperElement = ref.current;
       spreadsheetWrapperElement.getBoundingClientRect();
       var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
       var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
-      var totalSpreadsheetWidth = ref.current.offsetWidth;
+      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
+      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)(totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement : totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth);
+      clonedSelectionElement.style.left = (0, _layout.px)(totalSpreadsheetScrollingWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth - scrollbarWidth);
     };
 
     if (headerCellHoldActive) {

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

@@ -64,7 +64,9 @@ var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
           var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
           var spreadsheetPosition = ref.current.getBoundingClientRect();
           var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
-          var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left;
+          var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+          var leftScrollAmount = listContainer.scrollLeft;
+          var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left + leftScrollAmount;
           var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
           var columnsWidthUpToNewIndex = 0;
           var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;

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

@@ -19,16 +19,16 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
 
 var getCellSize = function getCellSize(cellSize) {
   switch (cellSize) {
-    case 'compact':
+    case 'xs':
       return getSizeInPixels(_layout.sizeXSmall);
 
-    case 'standard':
+    case 'sm':
       return getSizeInPixels(_layout.sizeSmall);
 
-    case 'medium':
+    case 'md':
       return getSizeInPixels(_layout.sizeMedium);
 
-    case 'large':
+    case 'lg':
       return getSizeInPixels(_layout.sizeLarge);
 
     default:

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

@@ -20,7 +20,8 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
       blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
       clonedSelectionElement = _ref.clonedSelectionElement,
       ref = _ref.ref,
-      spreadsheetCoords = _ref.spreadsheetCoords;
+      spreadsheetCoords = _ref.spreadsheetCoords,
+      leftScrollAmount = _ref.leftScrollAmount;
   var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
   var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
   var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
@@ -30,11 +31,11 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
 
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
+    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left);
+    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {

package/lib/components/ExportModal/ExportModal.js

@@ -100,7 +100,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
     setName(filename);
     setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
-  }, [filename, preformattedExtensions]);
+  }, [filename, preformattedExtensions, open]);
 
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "af43f7248a6bf9c65da17758b2345aad9808c317"
+  "gitHead": "70599ae0b945e59183b28a57c44b50119e89ae9d"
 }

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -12,6 +12,10 @@
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin set-header-borders {
+  border-right: 1px solid $active-ui;
+  border-bottom: 1px solid $active-ui;
+}
+@mixin set-active-header-borders {
   border-right: 1px solid $text-03;
   border-bottom: 1px solid $text-03;
 }
@@ -214,6 +218,8 @@
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
+      @include set-active-header-borders();
+
       background-color: $hover-selected-ui;
     }
     .#{$block-class}__th--selected-header,