@carbon/ibm-products 1.72.0 → 1.72.2

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,10 +15,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
-      var _event$target, _event$target$parentN;
+      var _event$target;
       /* istanbul ignore else */
-      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$parentN = _event$target.parentNode) !== null && _event$target$parentN !== void 0 && _event$target$parentN.previousElementSibling) {
-        var parentNode = event.target.parentNode.previousElementSibling;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
+        var parentNode = event.target.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
         } else {

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -99,6 +99,8 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
+  var _row$getRowProps = row.getRowProps(),
+    className = _row$getRowProps.className;
   var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
@@ -110,11 +112,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: key
-  }, /*#__PURE__*/React.createElement(TableRow, _extends({
-    className: rowClassNames
-  }, row.getRowProps({
+  }, /*#__PURE__*/React.createElement(TableRow, _extends({}, row.getRowProps({
     role: undefined
   }), {
+    className: cx(rowClassNames, className),
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
@@ -122,7 +123,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
   }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
-    var _cell$column;
+    var _cell$column, _cx2;
     var cellProps = cell.getCellProps({
       role: undefined
     });
@@ -136,7 +137,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     return /*#__PURE__*/React.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+      className: cx("".concat(blockClass, "__cell"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), _defineProperty(_cx2, "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), _cx2))
     }, restProps, {
       key: cell.column.id
     }), content);

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -11,7 +11,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { isColumnVisible } from './common';
 import Columns from './Columns';
 import Actions from './Actions';
 import { pkg } from '../../../../../settings';
@@ -54,19 +53,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = useState(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = isColumnVisible(defA);
-      var isVisibleB = isColumnVisible(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = useState(columnDefinitions),
     _useState8 = _slicedToArray(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -89,13 +89,20 @@ export var stateReducer = function stateReducer(newState, action) {
           getRowId = _ref3.getRowId,
           indeterminate = _ref3.indeterminate,
           isChecked = _ref3.isChecked;
+        var newSelectedRowIds = {};
         if (rows) {
           var newSelectedRowData = {};
           rows.forEach(function (row) {
+            var props = row.getRowProps();
+            if (props && props.disabled) {
+              return;
+            }
+            newSelectedRowIds[getRowId(row.original, row.index)] = true;
             newSelectedRowData[getRowId(row.original, row.index)] = row.original;
           });
           return _objectSpread(_objectSpread({}, newState), {}, {
-            selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
+            selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData,
+            selectedRowIds: newSelectedRowIds
           });
         }
         return _objectSpread({}, newState);

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -100,7 +100,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
-      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit && 'grid',
       tabIndex: withInlineEdit && 0,
       onKeyDown: /* istanbul ignore next */

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _settings = require("../../../settings");
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,10 +22,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
-      var _event$target, _event$target$parentN;
+      var _event$target;
       /* istanbul ignore else */
-      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$parentN = _event$target.parentNode) !== null && _event$target$parentN !== void 0 && _event$target$parentN.previousElementSibling) {
-        var parentNode = event.target.parentNode.previousElementSibling;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
+        var parentNode = event.target.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
         } else {

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

@@ -99,6 +99,8 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
+  var _row$getRowProps = row.getRowProps(),
+    className = _row$getRowProps.className;
   var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
@@ -110,11 +112,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
     key: key
-  }, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: rowClassNames
-  }, row.getRowProps({
+  }, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, row.getRowProps({
     role: undefined
   }), {
+    className: (0, _classnames.default)(rowClassNames, className),
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
@@ -122,7 +123,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
   }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
-    var _cell$column;
+    var _cell$column, _cx2;
     var cellProps = cell.getCellProps({
       role: undefined
     });
@@ -136,7 +137,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
-      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), _cx2))
     }, restProps, {
       key: cell.column.id
     }), content);

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _common = require("./common");
 var _Columns = _interopRequireDefault(require("./Columns"));
 var _Actions = _interopRequireDefault(require("./Actions"));
 var _settings = require("../../../../../settings");
@@ -56,19 +55,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = (0, _react.useState)(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = (0, _common.isColumnVisible)(defA);
-      var isVisibleB = (0, _common.isColumnVisible)(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = (0, _react.useState)(columnDefinitions),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -93,13 +93,20 @@ var stateReducer = function stateReducer(newState, action) {
           getRowId = _ref3.getRowId,
           indeterminate = _ref3.indeterminate,
           isChecked = _ref3.isChecked;
+        var newSelectedRowIds = {};
         if (rows) {
           var newSelectedRowData = {};
           rows.forEach(function (row) {
+            var props = row.getRowProps();
+            if (props && props.disabled) {
+              return;
+            }
+            newSelectedRowIds[getRowId(row.original, row.index)] = true;
             newSelectedRowData[getRowId(row.original, row.index)] = row.original;
           });
           return _objectSpread(_objectSpread({}, newState), {}, {
-            selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
+            selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData,
+            selectedRowIds: newSelectedRowIds
           });
         }
         return _objectSpread({}, newState);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.72.0",
+  "version": "1.72.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -98,5 +98,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "56038c1f0af3f39489f7345600699857090d31c6"
+  "gitHead": "dbeace4701acf2c447254772500aa40bdd6630cb"
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -61,9 +61,17 @@
   + .#{$block-class}__expanded-row,
 .#{$block-class} .#{$block-class}__expanded-row:hover,
 .#{$block-class} .#{$block-class}__expandable-row--hover td {
+  border-top: none;
   background: $layer-hover;
 }
 
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-expandable
+  td {
+  border-top: none;
+}
+
 .#{$block-class}
   .#{$carbon-prefix}--data-table
   tbody
@@ -79,6 +87,23 @@
   border: none;
 }
 
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-expanded:hover
+  td:not(.#{$block-class}__expandable-row-cell) {
+  border-bottom: 1px solid $border-subtle;
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-expanded:hover
+  + .#{$block-class}__expanded-row
+  .#{$block-class}__expanded-row-content,
+.#{$block-class}__expanded-row:hover .#{$block-class}__expanded-row-content {
+  background-color: $layer-hover;
+  transition: background-color $duration--fast-01 motion(entrance, productive);
+}
+
 .#{$block-class}
   .#{$carbon-prefix}--data-table
   td.#{$block-class}__expanded-row-cell-wrapper {

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -30,7 +30,10 @@
   border-bottom: none;
 }
 
-.#{$block-class} .#{$block-class}__carbon-row-expandable {
+.#{$block-class} .#{$block-class}__carbon-row-expandable,
+.#{$block-class}
+  tr.#{$block-class}__carbon-nested-row
+  td.#{$block-class}__cell:not(.#{$block-class}__expandable-row-cell) {
   position: relative;
 }
 
@@ -58,6 +61,64 @@
   padding-left: $spacing-03;
 }
 
+.#{$carbon-prefix}--data-table td.#{$block-class}__expandable-row-cell + td,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2) {
+  position: relative;
+}
+
+.#{$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td.#{$block-class}__checkbox-cell__checkbox-cell {
+  border-top: none;
+}
+
+.#{$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2)::before,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__expandable-row-cell
+  + td::before {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  bottom: -1px;
+  left: 0;
+  width: 1rem;
+  height: 1px;
+  background-color: $ui-01;
+  content: '';
+  transition: background-color $duration--fast-01 motion(entrance, productive);
+}
+
+.#{$carbon-prefix}--data-table
+  tr:hover
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__expandable-row--hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2)::before {
+  background-color: $layer-hover;
+}
+
 .#{$block-class}__carbon-row-expanded {
   .#{$block-class}__expandable-row-cell {
     border-bottom: none;