@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.9

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

@@ -22,11 +22,43 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
   var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
+  var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+  var scrollSpeed = 10; // Scrolling speed
+  var leftEdgeThreshold = 120; // Distance from the left edge to start scrolling
+  var rightEdgeThreshold = 100; // Distance from the right edge to start scrolling
+
+  var _event = event,
+    clientX = _event.clientX;
+  var _listContainer$getBou = listContainer.getBoundingClientRect(),
+    left = _listContainer$getBou.left,
+    right = _listContainer$getBou.right;
+
+  // Is near left side of viewport
+  if (clientX < leftEdgeThreshold) {
+    window.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right side of viewport
+  if (clientX > window.innerWidth - rightEdgeThreshold) {
+    window.scrollBy(scrollSpeed, 0);
+  }
+
+  // Is near left edge of table
+  if (clientX > left && clientX < left + leftEdgeThreshold) {
+    listContainer.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right edge of table
+  if (clientX < right && clientX > right - rightEdgeThreshold) {
+    listContainer.scrollBy(scrollSpeed, 0);
+  }
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
+    var leftPosition = closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount;
+    indicatorLineElement.style.left = px(leftPosition);
   }
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
+    var _leftPosition = closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount;
+    indicatorLineElement.style.left = px(_leftPosition);
   }
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {
     indicatorLineElement.style.left = selectionAreaOrigin.style.left;

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -705,9 +705,11 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       updateData: updateData
     }),
     onChange: function onChange(event) {
-      setCellEditorValue(event.target.value);
-      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
-        cellEditorRulerRef.current.textContent = event.target.value;
+      if (previousState.isEditing) {
+        setCellEditorValue(event.target.value);
+        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+          cellEditorRulerRef.current.textContent = event.target.value;
+        }
       }
     },
     ref: cellEditorRef,

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

@@ -44,9 +44,12 @@ var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
       var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
       var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
       var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
+      var leftPosition = totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth;
       // Moves the position of the cloned selection area to follow mouse, and
       // add the amount horizontally scrolled
-      clonedSelectionElement.style.left = layout.px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
+      if (leftPosition < spreadsheetCoords.right - 40) {
+        clonedSelectionElement.style.left = layout.px(leftPosition);
+      }
     };
     if (headerCellHoldActive) {
       ref.current.addEventListener('mousemove', handleMouseMove);

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

@@ -26,11 +26,43 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
   var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
+  var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+  var scrollSpeed = 10; // Scrolling speed
+  var leftEdgeThreshold = 120; // Distance from the left edge to start scrolling
+  var rightEdgeThreshold = 100; // Distance from the right edge to start scrolling
+
+  var _event = event,
+    clientX = _event.clientX;
+  var _listContainer$getBou = listContainer.getBoundingClientRect(),
+    left = _listContainer$getBou.left,
+    right = _listContainer$getBou.right;
+
+  // Is near left side of viewport
+  if (clientX < leftEdgeThreshold) {
+    window.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right side of viewport
+  if (clientX > window.innerWidth - rightEdgeThreshold) {
+    window.scrollBy(scrollSpeed, 0);
+  }
+
+  // Is near left edge of table
+  if (clientX > left && clientX < left + leftEdgeThreshold) {
+    listContainer.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right edge of table
+  if (clientX < right && clientX > right - rightEdgeThreshold) {
+    listContainer.scrollBy(scrollSpeed, 0);
+  }
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
+    var leftPosition = closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount;
+    indicatorLineElement.style.left = layout.px(leftPosition);
   }
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
+    var _leftPosition = closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount;
+    indicatorLineElement.style.left = layout.px(_leftPosition);
   }
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {
     indicatorLineElement.style.left = selectionAreaOrigin.style.left;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.7+b2a413a06",
+  "version": "2.43.2-canary.9+8a0d1a48a",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,7 +95,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.19+8a0d1a48a",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +119,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b2a413a067c999839c9481e3fa7d1fd8b1e3d2ff"
+  "gitHead": "8a0d1a48aca63b9f5111c7c10abf0e385151a1ad"
 }

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

@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
     position: sticky;
     z-index: 4;
     left: 0;
+    background-color: $background;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');