@carbon/ibm-products 1.60.0 → 1.61.0

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

@@ -14,7 +14,7 @@ import { Checkbox } from 'carbon-components-react';
 import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
-import getColTitle from '../../../utils/getColTitle';
+import { getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent';
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -32,12 +32,13 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!getColTitle(colDef);
+    return getNodeTextContent(colDef.Header).trim().length !== 0;
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return colDef.id !== 'spacer';
+  }).filter(function (colDef) {
+    return filterString.length === 0 || getNodeTextContent(colDef.Header).toLowerCase().includes(filterString);
   });
 
   // let localRefCopy;
@@ -50,7 +51,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     var toVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromVisibleIndex]);
+    var colTitle = getNodeTextContent(visibleCols[fromVisibleIndex].Header);
     setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
     var fromIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
@@ -65,7 +66,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     var fromIndex = visibleCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
+    var colTitle = getNodeTextContent(visibleCols[fromIndex].Header);
     setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
   };
   var handleDragUpdate = function handleDragUpdate(event) {
@@ -77,7 +78,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     var toIndex = visibleCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
+    var colTitle = getNodeTextContent(visibleCols[fromIndex].Header);
     setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
   };
   var pointerSensor = useSensor(PointerSensor, {
@@ -140,7 +141,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     items: visibleCols,
     strategy: verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
-    var colHeaderTitle = getColTitle(colDef);
+    var colHeaderTitle = getNodeTextContent(colDef.Header);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -1,10 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 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.
  */
 
 import React from 'react';
@@ -22,12 +21,9 @@ export var InlineEditButton = function InlineEditButton(_ref) {
     nonEditCell = _ref.nonEditCell,
     isActiveCell = _ref.isActiveCell,
     columnConfig = _ref.columnConfig,
-    totalInlineEditColumns = _ref.totalInlineEditColumns,
-    totalColumns = _ref.totalColumns,
     type = _ref.type;
-  var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -52,8 +48,6 @@ InlineEditButton.propTypes = {
   nonEditCell: PropTypes.bool,
   placeholder: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  totalColumns: PropTypes.number,
-  totalInlineEditColumns: PropTypes.number,
   type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };

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

@@ -32,14 +32,12 @@ export 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 = useContext(InlineEditContext),
     state = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -442,8 +440,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       tabIndex: tabIndex,
       nonEditCell: nonEditCell,
       columnConfig: cell.column,
-      totalInlineEditColumns: totalInlineEditColumns,
-      totalColumns: totalColumns,
       type: type
     }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
   );
@@ -461,7 +457,6 @@ InlineEditCell.propTypes = {
   nonEditCell: PropTypes.bool,
   placeholder: PropTypes.string,
   tabIndex: PropTypes.number,
-  totalInlineEditColumns: PropTypes.number,
   type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.object])
 };

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

@@ -10,23 +10,31 @@ var _excluded = ["legendText"];
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Settings16 } from '@carbon/icons-react';
 import { Button } from 'carbon-components-react';
 import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
-import { pkg } from '../../../../../settings';
+import { pkg, carbon } from '../../../../../settings';
 var blockClass = "".concat(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 = _objectWithoutProperties(_ref, _excluded);
   var buttonRef = useRef(null);
+  var radioGroupRef = useRef();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  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(carbon.prefix, "--radio-button:checked"));
+      checkedRadioChild === null || checkedRadioChild === void 0 ? void 0 : checkedRadioChild.focus();
+    }
+  }, [isOpen]);
   var onCloseHandler = function onCloseHandler() {
     setIsOpen(false);
   };
@@ -36,7 +44,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') {
@@ -59,7 +69,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     iconDescription: legendText,
     className: cx("".concat(blockClass, "-button"), _defineProperty({}, "".concat(blockClass, "-button--open"), isOpen)),
     onClick: onClickHandler
-  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
+  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({
+    ref: radioGroupRef
+  }, props, {
     legendText: legendText,
     buttonRef: buttonRef
   })));

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

@@ -8,13 +8,13 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var rowSizes = _ref.rowSizes,
     selectedOption = _ref.selectedOption,
     datagridName = _ref.datagridName,
@@ -29,6 +29,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       xs: 'Extra small'
     } : _ref$rowSizeLabels;
   return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
     className: "".concat(blockClass, "__row-size-dropdown"),
     role: "presentation"
   }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
@@ -51,7 +52,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/es/components/Datagrid/useInlineEdit.js

@@ -22,14 +22,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.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
@@ -37,7 +34,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
         value: cell.value,
         cell: cell,
         instance: instance,
-        totalInlineEditColumns: totalInlineEditColumns,
         type: type
       });
     };
@@ -57,7 +53,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
         instance: instance,
         disabled: true,
         nonEditCell: true,
-        totalInlineEditColumns: totalInlineEditColumns,
         type: "text"
       }))
     }];

package/es/components/Datagrid/useSortableColumns.js

@@ -14,6 +14,7 @@ import cx from 'classnames';
 import { pkg, carbon } from '../../settings';
 import { Button } from 'carbon-components-react';
 import { ArrowUp16, Arrows16 } from '@carbon/icons-react';
+import { SelectAll } from './Datagrid/DatagridSelectAll';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ordering = {
   ASC: 'ASC',
@@ -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.createElement(Button, {
+        return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React.createElement(SelectAll, instance) : /*#__PURE__*/React.createElement(Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
             descendingSortableLabelText: descendingSortableLabelText,

package/es/components/FilterSummary/FilterSummary.js

@@ -26,7 +26,9 @@ var FilterSummary = /*#__PURE__*/React.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,
@@ -45,7 +47,8 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
-    tags: tagFilters
+    tags: tagFilters,
+    overflowType: overflowType
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
@@ -59,6 +62,7 @@ FilterSummary.propTypes = {
   clearFilters: PropTypes.func.isRequired,
   clearFiltersText: PropTypes.string,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   renderLabel: PropTypes.func
 };
 export default FilterSummary;

package/es/components/TagSet/TagSet.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
@@ -34,7 +34,8 @@ var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
   overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowDirection: 'bottom',
+  overflowType: 'default'
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -46,6 +47,8 @@ export var TagSet = /*#__PURE__*/React.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,
@@ -141,13 +144,14 @@ export var TagSet = /*#__PURE__*/React.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 = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -300,6 +304,10 @@ TagSet.propTypes = {
    * overflowDirection from the standard tooltip
    */
   overflowDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *

package/es/components/TagSet/TagSetOverflow.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "overflowType", "showAllTagsLabel"];
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -35,6 +35,7 @@ export var TagSetOverflow = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -78,12 +79,18 @@ export var TagSetOverflow = /*#__PURE__*/React.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.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: cx("".concat(blockClass, "__tag-item"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), _defineProperty(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/React.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/React.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -117,6 +124,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/es/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,51 @@
+import _typeof from "@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}
+ */
+export var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch (_typeof(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 '';
+  }
+};

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

@@ -149,7 +149,9 @@ var DatagridContent = function DatagridContent(_ref) {
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel,
+      overflowType: "tag"
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -16,7 +16,7 @@ var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
 var _stateReducer = require("./addons/stateReducer");
-var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
+var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
 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; }
 /**
@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = (0, _getColTitle.default)(header);
+  var title = (0, _getNodeTextContent.getNodeTextContent)(header.Header);
   if (title) {
     props.title = title;
   } else {

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

@@ -12,7 +12,7 @@ var _carbonComponentsReact = require("carbon-components-react");
 var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
-var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
+var _getNodeTextContent = require("../../../../../global/js/utils/getNodeTextContent");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 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; }
@@ -32,12 +32,13 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!(0, _getColTitle2.default)(colDef);
+    return (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).trim().length !== 0;
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return colDef.id !== 'spacer';
+  }).filter(function (colDef) {
+    return filterString.length === 0 || (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).toLowerCase().includes(filterString);
   });
 
   // let localRefCopy;
@@ -50,7 +51,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var toVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = (0, _getColTitle2.default)(visibleCols[fromVisibleIndex]);
+    var colTitle = (0, _getNodeTextContent.getNodeTextContent)(visibleCols[fromVisibleIndex].Header);
     setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
     var fromIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
@@ -65,7 +66,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var fromIndex = visibleCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
+    var colTitle = (0, _getNodeTextContent.getNodeTextContent)(visibleCols[fromIndex].Header);
     setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
   };
   var handleDragUpdate = function handleDragUpdate(event) {
@@ -77,7 +78,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var toIndex = visibleCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
+    var colTitle = (0, _getNodeTextContent.getNodeTextContent)(visibleCols[fromIndex].Header);
     setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
   };
   var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
@@ -140,7 +141,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     items: visibleCols,
     strategy: _sortable.verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
-    var colHeaderTitle = (0, _getColTitle2.default)(colDef);
+    var colHeaderTitle = (0, _getNodeTextContent.getNodeTextContent)(colDef.Header);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;

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

@@ -10,12 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _settings = require("../../../../../../settings");
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 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.
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -29,12 +28,9 @@ var InlineEditButton = function InlineEditButton(_ref) {
     nonEditCell = _ref.nonEditCell,
     isActiveCell = _ref.isActiveCell,
     columnConfig = _ref.columnConfig,
-    totalInlineEditColumns = _ref.totalInlineEditColumns,
-    totalColumns = _ref.totalColumns,
     type = _ref.type;
-  var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -60,8 +56,6 @@ InlineEditButton.propTypes = {
   nonEditCell: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  totalColumns: _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])
 };