@carbon/ibm-products 2.43.2-canary.266 → 2.43.2-canary.267

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -24,6 +24,7 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var _gridRef$current;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -42,7 +43,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     onVirtualScroll = datagridState.onVirtualScroll;
   var headWrapRef = useRef(null);
   var innerRef = useRef(null);
-
+  var gridWidth = gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth;
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
@@ -70,35 +71,43 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   useEffect(function () {
     var _document;
     var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
-    var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
-    if (headEle) {
-      headEle.style.display = 'flex';
-    } // scrollbar width to header column to fix header alignment
 
-    function handleScroll(event) {
+    // Syncs header scroll position when virtual body is scrolled
+    function handleVirtualScrollX(event) {
       var virtualBody = event.target;
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
       }
     }
+
+    // Syncs virtual body scroll position when header is scrolled
+    function handleHeaderScrollX(event) {
+      var header = event.target;
+      if (testRef && testRef.current) {
+        testRef.current.scrollLeft = header === null || header === void 0 ? void 0 : header.scrollLeft;
+        // this prevents the scroll bar from over exceeding the vertical scroll bar compensation in the right
+        header.scrollLeft = testRef.current.scrollLeft;
+      }
+    }
     var testRefValue = testRef === null || testRef === void 0 ? void 0 : testRef.current;
-    testRefValue === null || testRefValue === void 0 || testRefValue.addEventListener('scroll', handleScroll);
+    testRefValue === null || testRefValue === void 0 || testRefValue.addEventListener('scroll', handleVirtualScrollX);
+    headWrapEl === null || headWrapEl === void 0 || headWrapEl.addEventListener('scroll', handleHeaderScrollX);
     return function () {
-      testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
+      testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleVirtualScrollX);
+      headWrapEl === null || headWrapEl === void 0 || headWrapEl.removeEventListener('scroll', handleHeaderScrollX);
     };
   });
   useIsomorphicEffect(function () {
     if (headWrapRef.current && headWrapRef.current.style) {
-      var _gridRef$current;
-      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
+      headWrapRef.current.style.width = "".concat(gridWidth, "px");
+      headWrapRef.current.style.overflow = "auto";
     }
-  }, [headWrapRef, gridRef]);
+  }, [headWrapRef, gridWidth]);
   useIsomorphicEffect(function () {
     if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
-      var _gridRef$current2;
-      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
+      testRef.current.style.width = "".concat(gridWidth, "px");
     }
-  }, [testRef, gridRef]);
+  }, [testRef, gridWidth]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
     ref: headWrapRef

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -165,7 +165,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return h.id === cell.column.id;
     });
     var lastVisibleIndex = withActionsColumn ? 2 : 1;
-    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 0 auto' : '0 0 auto';
     if (style) {
       style.flex = lastVisibleFlexStyle;
     }

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -28,6 +28,7 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var _gridRef$current;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -46,7 +47,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     onVirtualScroll = datagridState.onVirtualScroll;
   var headWrapRef = React.useRef(null);
   var innerRef = React.useRef(null);
-
+  var gridWidth = gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth;
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
@@ -74,35 +75,43 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   React.useEffect(function () {
     var _document;
     var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
-    var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
-    if (headEle) {
-      headEle.style.display = 'flex';
-    } // scrollbar width to header column to fix header alignment
 
-    function handleScroll(event) {
+    // Syncs header scroll position when virtual body is scrolled
+    function handleVirtualScrollX(event) {
       var virtualBody = event.target;
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
       }
     }
+
+    // Syncs virtual body scroll position when header is scrolled
+    function handleHeaderScrollX(event) {
+      var header = event.target;
+      if (testRef && testRef.current) {
+        testRef.current.scrollLeft = header === null || header === void 0 ? void 0 : header.scrollLeft;
+        // this prevents the scroll bar from over exceeding the vertical scroll bar compensation in the right
+        header.scrollLeft = testRef.current.scrollLeft;
+      }
+    }
     var testRefValue = testRef === null || testRef === void 0 ? void 0 : testRef.current;
-    testRefValue === null || testRefValue === void 0 || testRefValue.addEventListener('scroll', handleScroll);
+    testRefValue === null || testRefValue === void 0 || testRefValue.addEventListener('scroll', handleVirtualScrollX);
+    headWrapEl === null || headWrapEl === void 0 || headWrapEl.addEventListener('scroll', handleHeaderScrollX);
     return function () {
-      testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
+      testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleVirtualScrollX);
+      headWrapEl === null || headWrapEl === void 0 || headWrapEl.removeEventListener('scroll', handleHeaderScrollX);
     };
   });
   useIsomorphicEffect.useIsomorphicEffect(function () {
     if (headWrapRef.current && headWrapRef.current.style) {
-      var _gridRef$current;
-      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
+      headWrapRef.current.style.width = "".concat(gridWidth, "px");
+      headWrapRef.current.style.overflow = "auto";
     }
-  }, [headWrapRef, gridRef]);
+  }, [headWrapRef, gridWidth]);
   useIsomorphicEffect.useIsomorphicEffect(function () {
     if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
-      var _gridRef$current2;
-      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
+      testRef.current.style.width = "".concat(gridWidth, "px");
     }
-  }, [testRef, gridRef]);
+  }, [testRef, gridWidth]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
     ref: headWrapRef

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.266+831a0bc7d",
+  "version": "2.43.2-canary.267+9d60c0cd0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.276+831a0bc7d",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.277+9d60c0cd0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "831a0bc7da65e65c09228cf2b292cbb879484d3a"
+  "gitHead": "9d60c0cd0f0ab98ba87915eb50a9de2a55dff5a1"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -735,6 +735,10 @@
 
 .#{$block-class}__virtualScrollContainer {
   width: 100%;
+  .#{c4p-settings.$carbon-prefix}--data-table-content {
+    // overrides default scroll overflow as we handle overflow in thead and tbody separately for virtualScrollContainer variant
+    overflow-x: hidden;
+  }
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
@@ -781,6 +785,13 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   overflow: hidden;
   background-color: $layer-accent;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap::-webkit-scrollbar {
+  display: none;
 }
 
 .#{$block-class}