@carbon/ibm-products 1.15.0 → 1.16.0

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -41,6 +41,8 @@ var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
 
 var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
 
+var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -74,7 +76,9 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       currentMatcher = _ref.currentMatcher,
       setCurrentMatcher = _ref.setCurrentMatcher,
       onSelectionAreaChange = _ref.onSelectionAreaChange,
-      setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea;
+      setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
+      totalVisibleColumns = _ref.totalVisibleColumns;
+  var contentScrollRef = (0, _react.useRef)();
   var previousState = (0, _hooks.usePreviousValue)({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive
@@ -271,6 +275,21 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       }
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
+
+  var handleBodyScroll = function handleBodyScroll() {
+    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
+    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
+  };
+
+  (0, _react.useEffect)(function () {
+    contentScrollRef.current.addEventListener('scroll', function (event) {
+      return handleBodyScroll(event);
+    });
+    var contentScrollElementRef = contentScrollRef.current;
+    return function () {
+      contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
+    };
+  });
   var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
     return function () {
       if (clickAndHoldActive) {
@@ -361,7 +380,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
         "data-row-index": index,
         "aria-rowindex": index + 1
       }), /*#__PURE__*/_react.default.createElement("div", {
-        role: "rowheader"
+        role: "rowheader",
+        className: "".concat(blockClass, "__td-th--cell-container")
       }, /*#__PURE__*/_react.default.createElement("button", {
         id: "".concat(blockClass, "__cell--").concat(index, "--header"),
         tabIndex: -1,
@@ -371,7 +391,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
         onClick: handleRowHeaderClick(index),
         className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row'))),
         style: {
-          width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
         }
       }, index + 1)), row.cells.map(function (cell, index) {
         return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -380,7 +400,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
         }, cell.getCellProps(), {
           role: "gridcell",
           style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
-            display: 'grid'
+            display: 'grid',
+            minWidth: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
           })
         }), /*#__PURE__*/_react.default.createElement("button", {
           id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
@@ -395,7 +416,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);
+  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
   var spreadsheetBodyRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: spreadsheetBodyRef,
@@ -405,7 +426,13 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     height: 400,
     itemCount: rows.length || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
-    width: totalColumnsWidth + scrollBarSize
+    width: (0, _getSpreadsheetWidth.getSpreadsheetWidth)({
+      scrollBarSizeValue: scrollBarSize,
+      totalVisibleColumns: totalVisibleColumns,
+      defaultColumn: defaultColumn,
+      totalColumnsWidth: totalColumnsWidth
+    }),
+    outerRef: contentScrollRef
   }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
 });
 exports.DataSpreadsheetBody = DataSpreadsheetBody;
@@ -540,5 +567,11 @@ DataSpreadsheetBody.propTypes = {
   /**
    * The total columns width
    */
-  totalColumnsWidth: _propTypes.default.number
+  totalColumnsWidth: _propTypes.default.number,
+
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: _propTypes.default.number
 };

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -21,8 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _layout = require("@carbon/layout");
-
 var _settings = require("../../settings");
 
 var _hooks = require("../../global/js/hooks");
@@ -33,6 +31,8 @@ var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
 
 var _selectAllCells = require("./utils/selectAllCells");
 
+var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -55,6 +55,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       setSelectionAreas = _ref.setSelectionAreas,
       setSelectionAreaData = _ref.setSelectionAreaData,
       rows = _ref.rows,
+      totalVisibleColumns = _ref.totalVisibleColumns,
       updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
 
   var _useState = (0, _react.useState)(0),
@@ -115,13 +116,21 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       key: "header_".concat(index)
     }, headerGroup.getHeaderGroupProps(), {
       style: _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps().style), {}, {
-        width: (0, _layout.px)(parseInt(headerGroup.getHeaderGroupProps().style.width) + scrollBarSizeValue)
+        width: (0, _getSpreadsheetWidth.getSpreadsheetWidth)({
+          type: 'header',
+          headerGroup: headerGroup,
+          scrollBarSizeValue: scrollBarSizeValue,
+          totalVisibleColumns: totalVisibleColumns,
+          defaultColumn: defaultColumn
+        }),
+        overflow: 'hidden'
       }),
       className: "".concat(blockClass, "__tr")
     }), /*#__PURE__*/_react.default.createElement("div", {
       role: "columnheader",
+      className: "".concat(blockClass, "__select-all-cell-container"),
       style: {
-        width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4,
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
         height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
       }
     }, /*#__PURE__*/_react.default.createElement("button", {
@@ -144,7 +153,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
         tabIndex: -1,
         onClick: handleColumnHeaderClick(index),
         style: {
-          height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+          height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
         },
         className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column'))),
         type: "button"
@@ -221,6 +231,12 @@ DataSpreadsheetHeader.propTypes = {
    */
   setSelectionAreas: _propTypes.default.func,
 
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: _propTypes.default.number,
+
   /**
    * Function used to update the active cell coordinates
    */

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

@@ -33,28 +33,36 @@ var range = function range(len) {
   return arr;
 };
 
-var newPet = function newPet() {
-  return {
+var newPet = function newPet(extraColumns) {
+  var extraDataProps = extraColumns && {
+    ownerName: petNames[Math.floor(Math.random() * petNames.length)],
+    weight: Math.floor(Math.random() * 40)
+  };
+  var defaultPet = {
     petType: pets[Math.floor(Math.random() * pets.length)],
     firstName: petNames[Math.floor(Math.random() * petNames.length)],
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 40),
     health: Math.floor(Math.random() * 100)
   };
-};
 
-var generateData = function generateData() {
-  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
-    lens[_key] = arguments[_key];
+  if (extraColumns) {
+    return _objectSpread(_objectSpread({}, defaultPet), extraDataProps);
   }
 
+  return defaultPet;
+};
+
+var generateData = function generateData(_ref) {
+  var rows = _ref.rows,
+      extraColumns = _ref.extraColumns;
+
   var makeDataLevel = function makeDataLevel() {
     var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var lens = [rows];
     var len = lens[depth];
     return range(len).map(function () {
-      return _objectSpread(_objectSpread({}, newPet()), {}, {
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
-      });
+      return _objectSpread({}, newPet(extraColumns));
     });
   };
 

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSpreadsheetWidth = void 0;
+
+var _layout = require("@carbon/layout");
+
+/**
+ * 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 getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
+  var type = _ref.type,
+      headerGroup = _ref.headerGroup,
+      scrollBarSizeValue = _ref.scrollBarSizeValue,
+      totalVisibleColumns = _ref.totalVisibleColumns,
+      defaultColumn = _ref.defaultColumn,
+      totalColumnsWidth = _ref.totalColumnsWidth;
+  var additionalWidth = scrollBarSizeValue + defaultColumn.rowHeaderWidth;
+
+  if (!totalVisibleColumns) {
+    if (type === 'header') {
+      return (0, _layout.px)(parseInt(headerGroup.getHeaderGroupProps().style.width) + additionalWidth);
+    }
+
+    if (type !== 'header') {
+      return totalColumnsWidth + additionalWidth;
+    }
+  }
+
+  if (totalVisibleColumns) {
+    return totalVisibleColumns * (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width) + additionalWidth;
+  }
+};
+
+exports.getSpreadsheetWidth = getSpreadsheetWidth;

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

@@ -11,12 +11,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
 var _commonColumnIds = require("../common-column-ids");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _settings = require("../../../settings");
 
 var _excluded = ["children"];
@@ -27,9 +31,17 @@ var TableRow = _carbonComponentsReact.DataTable.TableRow,
 var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row;
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: "".concat(blockClass, "__carbon-row")
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
   }, row.getRowProps(), {
-    key: row.id
+    key: row.id,
+    onMouseEnter: function onMouseEnter(event) {
+      var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+      hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+      hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    }
   }), row.cells.map(function (cell) {
     var cellProps = cell.getCellProps();
     var children = cellProps.children,

package/lib/components/Datagrid/useNestedRows.js

@@ -22,7 +22,7 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useNestedRows = function useNestedRows(hooks) {
   (0, _useRowExpander.default)(hooks);
-  var marginLeft = 32;
+  var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
@@ -36,7 +36,7 @@ var useNestedRows = function useNestedRows(hooks) {
     return [props, {
       style: {
         marginLeft: "".concat(row.depth > 0 ? marginLeft : 0, "px"),
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) : 0, "px"),
+        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft : 0, "px"),
         maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
       }
     }];
@@ -51,7 +51,7 @@ var useNestedRows = function useNestedRows(hooks) {
     }) === 0;
     return [props, {
       style: {
-        marginRight: isFirstCell ? "-".concat(marginLeft * cell.row.depth, "px") : ''
+        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "-".concat(marginLeft * (cell.row.depth + 1), "px") : '')
       }
     }];
   };

package/lib/components/Datagrid/useRowExpander.js

@@ -30,7 +30,7 @@ var useRowExpander = function useRowExpander(hooks) {
         var row = _ref.row;
         return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null));
       },
-      width: 32,
+      width: 48,
       disableResizing: true,
       disableSortBy: true,
       Header: ''

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -57,23 +57,23 @@
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "glob": "^8.0.1",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.15",
+    "jest-config-ibm-cloud-cognitive": "^0.23.16",
     "namor": "^1.1.2",
     "npm-check-updates": "^12.5.9",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.50.0",
+    "sass": "^1.50.1",
     "yargs": "^17.4.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
-    "react-dnd": "^15.1.2",
-    "react-dnd-html5-backend": "^15.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6"
@@ -92,5 +92,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "202e15e26448cefc31d5ea1796b4d4b8b126a246"
+  "gitHead": "c9d83ac8cb5d738772533f2ea93b854a1f4d711f"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -228,6 +228,13 @@
       grid-gap: $spacing-05 2rem;
       grid-template-columns: repeat(2, 1fr);
     }
+
+    &-applied {
+      display: flex;
+      align-items: center;
+      padding: $spacing-03;
+      background: $ui-01;
+    }
   }
 
   .#{$block-class}__global-filter-button-set
@@ -248,7 +255,7 @@
   }
 
   // the influencer sidebar needs to be even with the buttons
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+  .#{$block-class} .#{$tearsheet-class}__influencer {
     max-width: 29rem;
     flex: 0 0 50%;
   }
@@ -257,7 +264,7 @@
     color: $text-02;
   }
 
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__content {
+  .#{$block-class} .#{$tearsheet-class}__content {
     display: flex;
     flex-direction: column;
   }

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

@@ -81,7 +81,13 @@
       }
     }
     .#{$block-class}__th--select-all {
-      min-width: calc(#{$spacing-10} - #{$spacing-02});
+      width: $spacing-10;
+    }
+    .#{$block-class}__td-th--cell-container,
+    .#{$block-class}__select-all-cell-container {
+      position: sticky;
+      z-index: 4;
+      left: 0;
     }
     .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');

package/scss/components/Datagrid/styles/datagrid.scss

@@ -316,3 +316,11 @@
   width: 100%;
   flex-direction: column;
 }
+
+.#{$block-class}__carbon-row-expanded {
+  // Border applied to nested rows only on open chevron hover
+  &.#{$block-class}__carbon-row-expanded-hover-active
+    ~ .#{$block-class}__carbon-nested-row {
+    border-left: 1px solid $interactive-01;
+  }
+}

package/scss/components/Datagrid/styles/useNestedRows.scss

@@ -9,7 +9,7 @@
 @import './variables';
 
 .#{$carbon-prefix}--data-table tr.#{$block-class}__carbon-nested-row {
-  border-left: 2px solid $interactive-01;
+  border-left: 1px solid transparent;
 
   .#{$block-class}__cell {
     border-bottom: 1px solid $ui-03;