@carbon/ibm-products 1.60.0 → 1.61.0

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -35,14 +35,12 @@ var InlineEditCell = function InlineEditCell(_ref) {
     tabIndex = _ref.tabIndex,
     value = _ref.value,
     nonEditCell = _ref.nonEditCell,
-    totalInlineEditColumns = _ref.totalInlineEditColumns,
     type = _ref.type;
   var columnId = cell.column.id;
   var columnIndex = instance.columns.findIndex(function (col) {
     return col.id === columnId;
   });
   var cellId = "column-".concat(columnIndex, "-row-").concat(cell.row.index);
-  var totalColumns = instance.columns.length;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
     state = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -445,8 +443,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       tabIndex: tabIndex,
       nonEditCell: nonEditCell,
       columnConfig: cell.column,
-      totalInlineEditColumns: totalInlineEditColumns,
-      totalColumns: totalColumns,
       type: type
     }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
   );
@@ -465,7 +461,6 @@ InlineEditCell.propTypes = {
   nonEditCell: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   tabIndex: _propTypes.default.number,
-  totalInlineEditColumns: _propTypes.default.number,
   type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object])
 };

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -23,13 +23,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__row-size");
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
   var _ref$legendText = _ref.legendText,
-    legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
+    legendText = _ref$legendText === void 0 ? 'Row settings' : _ref$legendText,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var buttonRef = (0, _react.useRef)(null);
+  var radioGroupRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      var radioGroupParentElement = radioGroupRef === null || radioGroupRef === void 0 ? void 0 : radioGroupRef.current;
+      var checkedRadioChild = radioGroupParentElement === null || radioGroupParentElement === void 0 ? void 0 : radioGroupParentElement.querySelector(".".concat(_settings.carbon.prefix, "--radio-button:checked"));
+      checkedRadioChild === null || checkedRadioChild === void 0 ? void 0 : checkedRadioChild.focus();
+    }
+  }, [isOpen]);
   var onCloseHandler = function onCloseHandler() {
     setIsOpen(false);
   };
@@ -39,7 +47,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     }
   };
   var onClickHandler = function onClickHandler() {
-    setIsOpen(!isOpen);
+    setIsOpen(function (prev) {
+      return !prev;
+    });
   };
   var onKeyHandler = function onKeyHandler(e) {
     if (e.key === 'Escape') {
@@ -62,7 +72,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     iconDescription: legendText,
     className: (0, _classnames.default)("".concat(blockClass, "-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-button--open"), isOpen)),
     onClick: onClickHandler
-  }), isOpen && /*#__PURE__*/_react.default.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+  }), isOpen && /*#__PURE__*/_react.default.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({
+    ref: radioGroupRef
+  }, props, {
     legendText: legendText,
     buttonRef: buttonRef
   })));

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _settings = require("../../../../../settings");
+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; }
 /* eslint-disable react/default-props-match-prop-types */
 // @flow
 /*
@@ -21,7 +24,7 @@ var _settings = require("../../../../../settings");
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var rowSizes = _ref.rowSizes,
     selectedOption = _ref.selectedOption,
     datagridName = _ref.datagridName,
@@ -36,6 +39,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       xs: 'Extra small'
     } : _ref$rowSizeLabels;
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
     className: "".concat(blockClass, "__row-size-dropdown"),
     role: "presentation"
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
@@ -58,7 +62,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
     });
   })));
-};
+});
 var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
   // TODO: deprecate this function in next major release (v8) on carbon-components-react
   var rowSizeMap = {

package/lib/components/Datagrid/useInlineEdit.js

@@ -32,14 +32,11 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
     }
   }, [usingEditableCell]);
   var addInlineEdit = function addInlineEdit(props, _ref) {
-    var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
+    var _cell$column, _cell$column$inlineEd;
     var cell = _ref.cell,
       instance = _ref.instance;
     var columnInlineEditConfig = cell.column.inlineEdit;
     var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : (_cell$column$inlineEd = _cell$column.inlineEdit) === null || _cell$column$inlineEd === void 0 ? void 0 : _cell$column$inlineEd.type;
-    var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
-      return item.inlineEdit;
-    })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;
     var renderInlineEditComponent = function renderInlineEditComponent(type) {
       return /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
         config: columnInlineEditConfig,
@@ -47,7 +44,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
         value: cell.value,
         cell: cell,
         instance: instance,
-        totalInlineEditColumns: totalInlineEditColumns,
         type: type
       });
     };
@@ -67,7 +63,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
         instance: instance,
         disabled: true,
         nonEditCell: true,
-        totalInlineEditColumns: totalInlineEditColumns,
         type: "text"
       }))
     }];

package/lib/components/Datagrid/useSortableColumns.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
 var _carbonComponentsReact = require("carbon-components-react");
 var _iconsReact = require("@carbon/icons-react");
+var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -31,13 +32,13 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
     isSorted = _ref2.isSorted,
     isSortedDesc = _ref2.isSortedDesc;
   if (!isSorted) {
-    return defaultSortableLabelText || 'none';
+    return defaultSortableLabelText;
   }
   if (isSorted && !isSortedDesc) {
-    return ascendingSortableLabelText || 'ascending';
+    return ascendingSortableLabelText;
   }
   if (isSorted && isSortedDesc) {
-    return descendingSortableLabelText || 'descending';
+    return descendingSortableLabelText;
   }
 };
 var useSortableColumns = function useSortableColumns(hooks) {
@@ -91,7 +92,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       var Header = function Header(headerProp) {
         var _cx;
-        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+        return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
             descendingSortableLabelText: descendingSortableLabelText,

package/lib/components/FilterSummary/FilterSummary.js

@@ -27,7 +27,9 @@ var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$renderLabel = _ref.renderLabel,
-    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType;
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
@@ -46,7 +48,8 @@ var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
-    tags: tagFilters
+    tags: tagFilters,
+    overflowType: overflowType
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "ghost",
     size: "sm",
@@ -60,6 +63,7 @@ FilterSummary.propTypes = {
   clearFilters: _propTypes.default.func.isRequired,
   clearFiltersText: _propTypes.default.string,
   filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   renderLabel: _propTypes.default.func
 };
 var _default = FilterSummary;

package/lib/components/TagSet/TagSet.js

@@ -21,7 +21,7 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"];
 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); }
@@ -37,7 +37,8 @@ var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
   overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowDirection: 'bottom',
+  overflowType: 'default'
 };
 var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -49,6 +50,8 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
     _ref$overflowDirectio = _ref.overflowDirection,
     overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
     allTagsModalTitle = _ref.allTagsModalTitle,
@@ -144,13 +147,14 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
+      overflowType: overflowType,
       overflowDirection: overflowDirection,
       showAllTagsLabel: showAllTagsLabel,
       key: "displayed-tag-overflow",
       ref: overflowTag
     }));
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
+  }, [displayCount, overflowAlign, overflowType, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -305,6 +309,10 @@ TagSet.propTypes = {
    * overflowDirection from the standard tooltip
    */
   overflowDirection: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *

package/lib/components/TagSet/TagSetOverflow.js

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _settings = require("../../settings");
 var _pconsole = require("../../global/js/utils/pconsole");
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "overflowType", "showAllTagsLabel"];
 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; }
 var componentName = 'TagSetOverflow';
@@ -38,6 +38,7 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     _ref$overflowDirectio = _ref.overflowDirection,
     overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
     overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
@@ -81,12 +82,18 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
+    var _cx2;
+    var tagProps = {};
+    if (overflowType === 'tag') {
+      tagProps.type = 'high-contrast';
+    }
+    if (overflowType === 'default') {
+      tagProps.filter = false;
+    }
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/_react.default.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/_react.default.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -121,6 +128,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/lib/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeTextContent = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Returns a compiled string of all the text content of a React node and any of its child nodes.
+ * This is meant to be used in a limited fashion to convert a "styled" sentence into a single string:
+ *   e.g. <p>Title <b>Page</b>.</p> --> "Title Page."
+ * This will likely not work for arrays of nodes due to the lack of word spacing:
+ *   e.g. <ul>
+ *          <li>Item 1</li>
+ *          <li>Item 2</li>
+ *          <li>Item 3</li>
+ *        </ul>
+ *        --> "Item 1Item 2Item 3"
+ * @param {Node} node A React node
+ * @returns {string}
+ */
+var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch ((0, _typeof2.default)(node)) {
+    case 'string':
+    case 'number':
+      return node.toString();
+    case 'object':
+      {
+        if (node instanceof Array) {
+          return node.map(getNodeTextContent).join('');
+        }
+        if ('props' in node) {
+          return getNodeTextContent(node.props.children);
+        }
+
+        // Ignore any other JavaScript 'object' types.
+        return '';
+      }
+    case 'function':
+      {
+        return getNodeTextContent(node());
+      }
+    default:
+      // Ignore all other JavaScript types.
+      return '';
+  }
+};
+exports.getNodeTextContent = getNodeTextContent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.60.0",
+  "version": "1.61.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -91,11 +91,11 @@
     "@carbon/motion": "^10.29.2",
     "@carbon/themes": "^10.55.3",
     "@carbon/type": "^10.45.3",
-    "carbon-components": "^10.58.10",
-    "carbon-components-react": "^7.59.14",
+    "carbon-components": "^10.58.12",
+    "carbon-components-react": "^7.59.16",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "60db5711e16835785348a1fc148a7c346bad5bde"
+  "gitHead": "3c7061f7f7907eeeddbbd25f723bb87e867a0073"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -19,6 +19,7 @@
 
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by Datagrid
+@import '../FilterSummary/filter-summary';
 
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -108,18 +108,14 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(
-      .#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-    ) {
-    .#{$block-class}__inline-edit-button-icon {
-      display: none;
-    }
+  .#{$block-class}__inline-edit-button-icon {
+    display: none;
+  }
 
-    /* stylelint-disable-next-line */
-    &:hover {
-      .#{$block-class}__inline-edit-button-icon {
-        display: block;
-      }
+  &:hover,
+  &.#{$block-class}__inline-edit-button--active {
+    .#{$block-class}__inline-edit-button-icon {
+      display: block;
     }
   }
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -22,7 +22,48 @@
 }
 
 .#{$carbon-prefix}--btn--ghost.#{$block-class}__row-size-button--open {
-  background-color: $ui-background;
+  background-color: $ui-02;
 
   box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
 }
+
+// Top align cell content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  td,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  th,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  th {
+  .#{$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  .#{$block-class}__checkbox-cell
+  th.#{$carbon-prefix}--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{$block-class}__row-size__row-settings-trigger--open.#{$carbon-prefix}--btn--ghost {
+  background-color: $ui-02;
+}

package/scss/components/TagSet/_tag-set.scss

@@ -70,7 +70,7 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__tooltip
-    .#{$block-class-overflow}__tag-item
+    .#{$block-class-overflow}__tag-item--default
     .#{$carbon-prefix}--tag {
     border-radius: 0;
   }
@@ -127,13 +127,23 @@ $block-class-modal: #{$block-class}-modal;
       text-align: left;
     }
 
+    &.#{$carbon-prefix}--tooltip button {
+      padding-right: 0;
+    }
+
     .#{$block-class-overflow}__show-all-tags-link {
       display: inline-block;
       margin: $spacing-03 0 $spacing-02; // to match the tags
     }
 
-    .#{$block-class-overflow}__tag-item,
-    .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+      .#{$carbon-prefix}--tag {
+      background-color: $inverse-hover-ui;
+    }
+
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+      .#{$carbon-prefix}--tag {
       @include carbon--type-style('body-short-01');
 
       display: block;

package/es/components/Datagrid/utils/getColTitle.js

@@ -1,25 +0,0 @@
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-export default getColTitle;

package/lib/components/Datagrid/utils/getColTitle.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-var _default = getColTitle;
-exports.default = _default;