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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/css/index-full-carbon.css +1 -0
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +1 -0
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +1 -0
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/DataSpreadsheet/DataSpreadsheet.js +22 -12
  14. package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +9 -1
  15. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +18 -2
  16. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  17. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +17 -6
  18. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +4 -1
  19. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +3 -1
  20. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +15 -3
  21. package/es/components/DataSpreadsheet/types/index.d.ts +1 -1
  22. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -2
  23. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +22 -12
  24. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +9 -1
  25. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +18 -2
  26. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  27. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +17 -6
  28. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +4 -1
  29. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +3 -1
  30. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +15 -3
  31. package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
  32. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -2
  33. package/package.json +3 -3
  34. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -0
@@ -26,11 +26,43 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
26
26
  var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
27
27
  var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
28
28
  var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
29
+ var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
30
+ var scrollSpeed = 10; // Scrolling speed
31
+ var leftEdgeThreshold = 120; // Distance from the left edge to start scrolling
32
+ var rightEdgeThreshold = 100; // Distance from the right edge to start scrolling
33
+
34
+ var _event = event,
35
+ clientX = _event.clientX;
36
+ var _listContainer$getBou = listContainer.getBoundingClientRect(),
37
+ left = _listContainer$getBou.left,
38
+ right = _listContainer$getBou.right;
39
+
40
+ // Is near left side of viewport
41
+ if (clientX < leftEdgeThreshold) {
42
+ window.scrollBy(-scrollSpeed, 0);
43
+ }
44
+
45
+ // Is near right side of viewport
46
+ if (clientX > window.innerWidth - rightEdgeThreshold) {
47
+ window.scrollBy(scrollSpeed, 0);
48
+ }
49
+
50
+ // Is near left edge of table
51
+ if (clientX > left && clientX < left + leftEdgeThreshold) {
52
+ listContainer.scrollBy(-scrollSpeed, 0);
53
+ }
54
+
55
+ // Is near right edge of table
56
+ if (clientX < right && clientX > right - rightEdgeThreshold) {
57
+ listContainer.scrollBy(scrollSpeed, 0);
58
+ }
29
59
  if (Number(newColumnIndex) > Number(originalColumnIndex)) {
30
- indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
60
+ var leftPosition = closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount;
61
+ indicatorLineElement.style.left = layout.px(leftPosition);
31
62
  }
32
63
  if (Number(newColumnIndex) < Number(originalColumnIndex)) {
33
- indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
64
+ var _leftPosition = closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount;
65
+ indicatorLineElement.style.left = layout.px(_leftPosition);
34
66
  }
35
67
  if (Number(newColumnIndex) === Number(originalColumnIndex)) {
36
68
  indicatorLineElement.style.left = selectionAreaOrigin.style.left;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.2-canary.4+2bae03491",
4
+ "version": "2.43.2-canary.9+8a0d1a48a",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -95,7 +95,7 @@
95
95
  "dependencies": {
96
96
  "@babel/runtime": "^7.23.9",
97
97
  "@carbon/feature-flags": "^0.20.0",
98
- "@carbon/ibm-products-styles": "^2.39.0",
98
+ "@carbon/ibm-products-styles": "^2.39.1-canary.19+8a0d1a48a",
99
99
  "@carbon/telemetry": "^0.1.0",
100
100
  "@dnd-kit/core": "^6.0.8",
101
101
  "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +119,5 @@
119
119
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
120
120
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
121
121
  },
122
- "gitHead": "2bae03491f67da75b3237ae53368a59b3ff906b0"
122
+ "gitHead": "8a0d1a48aca63b9f5111c7c10abf0e385151a1ad"
123
123
  }
@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
98
98
  position: sticky;
99
99
  z-index: 4;
100
100
  left: 0;
101
+ background-color: $background;
101
102
  }
102
103
  .#{$block-class}__td-th.#{$block-class}__td {
103
104
  @include font-family.font-weight('semibold');