@carbon/ibm-products 1.55.1 → 1.55.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +60 -16
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +3 -9
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +41 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/es/components/Datagrid/useDefaultStringRenderer.js +2 -1
- package/es/components/Datagrid/useSortableColumns.js +8 -4
- package/es/global/js/utils/test-helper.js +3 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/lib/components/Datagrid/useDefaultStringRenderer.js +2 -1
- package/lib/components/Datagrid/useSortableColumns.js +8 -4
- package/lib/global/js/utils/test-helper.js +3 -3
- package/package.json +8 -8
- package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss +9 -9
| @@ -17,32 +17,49 @@ export var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 17 17 | 
             
                filterString = _ref.filterString,
         | 
| 18 18 | 
             
                focusIndex = _ref.focusIndex,
         | 
| 19 19 | 
             
                getNextIndex = _ref.getNextIndex,
         | 
| 20 | 
            -
                isTableSortable = _ref.isTableSortable,
         | 
| 21 20 | 
             
                moveElement = _ref.moveElement,
         | 
| 22 21 | 
             
                onSelectColumn = _ref.onSelectColumn,
         | 
| 23 22 | 
             
                setAriaRegionText = _ref.setAriaRegionText,
         | 
| 24 23 | 
             
                setColumnsObject = _ref.setColumnsObject,
         | 
| 25 24 | 
             
                setFocusIndex = _ref.setFocusIndex;
         | 
| 25 | 
            +
              // This function recursively looks for the nested header element until we can find the key which contains the title.
         | 
| 26 | 
            +
              // This can happen if multiple hooks are used together that manipulate the rendering of the column
         | 
| 27 | 
            +
              // header, such as `useColumnCenterAlign` and `useSortableColumns`.
         | 
| 28 | 
            +
              var getNestedTitle = function getNestedTitle(component) {
         | 
| 29 | 
            +
                if (component && !component.key) {
         | 
| 30 | 
            +
                  return getNestedTitle(component.children);
         | 
| 31 | 
            +
                }
         | 
| 32 | 
            +
                if (component && component.key && typeof component.key === 'string') {
         | 
| 33 | 
            +
                  return component.key;
         | 
| 34 | 
            +
                }
         | 
| 35 | 
            +
              };
         | 
| 36 | 
            +
              var getColTitle = function getColTitle(col) {
         | 
| 37 | 
            +
                if (!col) {
         | 
| 38 | 
            +
                  return;
         | 
| 39 | 
            +
                }
         | 
| 40 | 
            +
                var checkTitle = function checkTitle() {
         | 
| 41 | 
            +
                  if (col.Header().props.children.props && col.Header().props.children.props.title) {
         | 
| 42 | 
            +
                    return col.Header().props.children.props.title;
         | 
| 43 | 
            +
                  }
         | 
| 44 | 
            +
                  return getNestedTitle(col.Header().props.children.props);
         | 
| 45 | 
            +
                };
         | 
| 46 | 
            +
                return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
         | 
| 47 | 
            +
              };
         | 
| 26 48 | 
             
              return /*#__PURE__*/React.createElement(React.Fragment, null, columns
         | 
| 27 49 | 
             
              // hide the columns without Header, e.g the sticky actions, spacer
         | 
| 28 50 | 
             
              .filter(function (colDef) {
         | 
| 29 | 
            -
                 | 
| 30 | 
            -
             | 
| 31 | 
            -
                return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
         | 
| 32 | 
            -
              }).filter(function (colDef) {
         | 
| 51 | 
            +
                return !!getColTitle(colDef);
         | 
| 52 | 
            +
              }).filter(Boolean).filter(function (colDef) {
         | 
| 33 53 | 
             
                return !colDef.isAction;
         | 
| 34 54 | 
             
              }).filter(function (colDef) {
         | 
| 35 | 
            -
                var  | 
| 36 | 
            -
                 | 
| 37 | 
            -
                return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
         | 
| 55 | 
            +
                var _getColTitle;
         | 
| 56 | 
            +
                return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
         | 
| 38 57 | 
             
              }).map(function (colDef, i) {
         | 
| 39 | 
            -
                var  | 
| 40 | 
            -
                var isSortableColumn = !!colDef.canSort && !!isTableSortable;
         | 
| 41 | 
            -
                var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
         | 
| 58 | 
            +
                var colHeaderTitle = getColTitle(colDef);
         | 
| 42 59 | 
             
                var searchString = new RegExp('(' + filterString + ')');
         | 
| 43 | 
            -
                var res = filterString.length ?  | 
| 60 | 
            +
                var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
         | 
| 44 61 | 
             
                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;
         | 
| 45 | 
            -
                var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] :  | 
| 62 | 
            +
                var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
         | 
| 46 63 | 
             
                var isFrozenColumn = !!colDef.sticky;
         | 
| 47 64 | 
             
                var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
         | 
| 48 65 | 
             
                  wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
         | 
| @@ -50,8 +67,8 @@ export var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 50 67 | 
             
                  disabled: isFrozenColumn,
         | 
| 51 68 | 
             
                  onChange: onSelectColumn.bind(null, colDef),
         | 
| 52 69 | 
             
                  id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
         | 
| 53 | 
            -
                  labelText:  | 
| 54 | 
            -
                  title:  | 
| 70 | 
            +
                  labelText: colHeaderTitle,
         | 
| 71 | 
            +
                  title: colHeaderTitle,
         | 
| 55 72 | 
             
                  className: "".concat(blockClass, "__customize-columns-checkbox"),
         | 
| 56 73 | 
             
                  hideLabel: true
         | 
| 57 74 | 
             
                }), /*#__PURE__*/React.createElement("div", {
         | 
| @@ -67,7 +84,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 67 84 | 
             
                  id: "dnd-datagrid-columns-".concat(colDef.id),
         | 
| 68 85 | 
             
                  type: "column-customization",
         | 
| 69 86 | 
             
                  disabled: filterString.length > 0 || isFrozenColumn,
         | 
| 70 | 
            -
                  ariaLabel:  | 
| 87 | 
            +
                  ariaLabel: colHeaderTitle,
         | 
| 71 88 | 
             
                  onGrab: setAriaRegionText,
         | 
| 72 89 | 
             
                  isFocused: focusIndex === i,
         | 
| 73 90 | 
             
                  moveElement: moveElement,
         | 
| @@ -96,7 +113,6 @@ DraggableItemsList.propTypes = { | |
| 96 113 | 
             
              filterString: PropTypes.string.isRequired,
         | 
| 97 114 | 
             
              focusIndex: PropTypes.number.isRequired,
         | 
| 98 115 | 
             
              getNextIndex: PropTypes.func.isRequired,
         | 
| 99 | 
            -
              isTableSortable: PropTypes.bool,
         | 
| 100 116 | 
             
              moveElement: PropTypes.func.isRequired,
         | 
| 101 117 | 
             
              onSelectColumn: PropTypes.func.isRequired,
         | 
| 102 118 | 
             
              setAriaRegionText: PropTypes.func.isRequired,
         | 
| @@ -21,7 +21,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) { | |
| 21 21 | 
             
                rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
         | 
| 22 22 | 
             
              return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
         | 
| 23 23 | 
             
                isOpen: isTearsheetOpen,
         | 
| 24 | 
            -
                isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
         | 
| 25 24 | 
             
                setIsTearsheetOpen: setIsTearsheetOpen,
         | 
| 26 25 | 
             
                columnDefinitions: instance.allColumns,
         | 
| 27 26 | 
             
                originalColumnDefinitions: instance.columns,
         | 
| @@ -24,7 +24,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) { | |
| 24 24 | 
             
              var HeaderRenderer = function HeaderRenderer(header) {
         | 
| 25 25 | 
             
                return /*#__PURE__*/React.createElement("div", {
         | 
| 26 26 | 
             
                  className: "".concat(blockClass, "__defaultStringRenderer"),
         | 
| 27 | 
            -
                  title: typeof header === 'string' ? header : ''
         | 
| 27 | 
            +
                  title: typeof header === 'string' ? header : '',
         | 
| 28 | 
            +
                  key: typeof header === 'string' ? header : ''
         | 
| 28 29 | 
             
                }, header);
         | 
| 29 30 | 
             
              };
         | 
| 30 31 | 
             
              var visibleColumns = function visibleColumns(columns) {
         | 
| @@ -24,8 +24,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) { | |
| 24 24 | 
             
              var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
         | 
| 25 25 | 
             
                descendingSortableLabelText = _ref.descendingSortableLabelText,
         | 
| 26 26 | 
             
                defaultSortableLabelText = _ref.defaultSortableLabelText;
         | 
| 27 | 
            -
               | 
| 28 | 
            -
                 | 
| 27 | 
            +
              if (!col) {
         | 
| 28 | 
            +
                return;
         | 
| 29 | 
            +
              }
         | 
| 30 | 
            +
              var _ref2 = col || {},
         | 
| 31 | 
            +
                isSorted = _ref2.isSorted,
         | 
| 32 | 
            +
                isSortedDesc = _ref2.isSortedDesc;
         | 
| 29 33 | 
             
              if (!isSorted) {
         | 
| 30 34 | 
             
                return defaultSortableLabelText || 'none';
         | 
| 31 35 | 
             
              }
         | 
| @@ -37,9 +41,9 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) { | |
| 37 41 | 
             
              }
         | 
| 38 42 | 
             
            };
         | 
| 39 43 | 
             
            var useSortableColumns = function useSortableColumns(hooks) {
         | 
| 40 | 
            -
              var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns,  | 
| 44 | 
            +
              var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref3) {
         | 
| 41 45 | 
             
                var _instance$customizeCo;
         | 
| 42 | 
            -
                var instance =  | 
| 46 | 
            +
                var instance = _ref3.instance;
         | 
| 43 47 | 
             
                var onSort = instance.onSort,
         | 
| 44 48 | 
             
                  ascendingSortableLabelText = instance.ascendingSortableLabelText,
         | 
| 45 49 | 
             
                  descendingSortableLabelText = instance.descendingSortableLabelText,
         | 
| @@ -109,7 +109,7 @@ var makeMatcherArray = function makeMatcherArray(args) { | |
| 109 109 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 110 110 | 
             
             * console.warn, for example when intentionally using a deprecated prop
         | 
| 111 111 | 
             
             * or supplying invalid parameters for the purposes of the test.
         | 
| 112 | 
            -
             * @param {string|regex| | 
| 112 | 
            +
             * @param {string|regex|Function|[]} message the expected parameters for the call to
         | 
| 113 113 | 
             
             * console.warn, which must be called exactly once. A single string or regex or an
         | 
| 114 114 | 
             
             * expect matcher can be used to match a single-argument call to console.warn (most common),
         | 
| 115 115 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
| @@ -194,7 +194,7 @@ var checkLogging = function checkLogging(mock, message) { | |
| 194 194 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 195 195 | 
             
             * console.error, for example when intentionally omitting a required prop
         | 
| 196 196 | 
             
             * or supplying an invalid prop type or value for the purposes of the test.
         | 
| 197 | 
            -
             * @param {errors: {string|regex| | 
| 197 | 
            +
             * @param {errors: {string|regex|Function|[]}, warnings: {string|regex|Function|[]}} messages the expected parameters for the call to
         | 
| 198 198 | 
             
             * console.error or console.warn, which must be called exactly once. A single string or regex or an
         | 
| 199 199 | 
             
             * expect matcher can be used to match a single-argument call to console.error (most common),
         | 
| 200 200 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
| @@ -220,7 +220,7 @@ export var expectLogging = function expectLogging(_ref2, test) { | |
| 220 220 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 221 221 | 
             
             * console.error, for example when intentionally omitting a required prop
         | 
| 222 222 | 
             
             * or supplying an invalid prop type or value for the purposes of the test.
         | 
| 223 | 
            -
             * @param {string|regex| | 
| 223 | 
            +
             * @param {string|regex|Function|[]} message the expected parameters for the call to
         | 
| 224 224 | 
             
             * console.error, which must be called exactly once. A single string or regex or an
         | 
| 225 225 | 
             
             * expect matcher can be used to match a single-argument call to console.error (most common),
         | 
| 226 226 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
| @@ -42,8 +42,7 @@ var Columns = function Columns(_ref) { | |
| 42 42 | 
             
                onSelectColumn = _ref.onSelectColumn,
         | 
| 43 43 | 
             
                assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
         | 
| 44 44 | 
             
                assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
         | 
| 45 | 
            -
                selectAllLabel = _ref.selectAllLabel | 
| 46 | 
            -
                isTableSortable = _ref.isTableSortable;
         | 
| 45 | 
            +
                selectAllLabel = _ref.selectAllLabel;
         | 
| 47 46 | 
             
              var _React$useState = _react.default.useState(''),
         | 
| 48 47 | 
             
                _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
         | 
| 49 48 | 
             
                ariaRegionText = _React$useState2[0],
         | 
| @@ -99,7 +98,6 @@ var Columns = function Columns(_ref) { | |
| 99 98 | 
             
                filterString: filterString,
         | 
| 100 99 | 
             
                focusIndex: focusIndex,
         | 
| 101 100 | 
             
                getNextIndex: getNextIndex,
         | 
| 102 | 
            -
                isTableSortable: isTableSortable,
         | 
| 103 101 | 
             
                moveElement: moveElement,
         | 
| 104 102 | 
             
                onSelectColumn: onSelectColumn,
         | 
| 105 103 | 
             
                setAriaRegionText: setAriaRegionText,
         | 
| @@ -115,7 +113,6 @@ Columns.propTypes = { | |
| 115 113 | 
             
              filterString: _propTypes.default.string.isRequired,
         | 
| 116 114 | 
             
              getVisibleColumnsCount: _propTypes.default.func.isRequired,
         | 
| 117 115 | 
             
              instructionsLabel: _propTypes.default.string,
         | 
| 118 | 
            -
              isTableSortable: _propTypes.default.bool.isRequired,
         | 
| 119 116 | 
             
              onSelectColumn: _propTypes.default.func.isRequired,
         | 
| 120 117 | 
             
              selectAllLabel: _propTypes.default.string,
         | 
| 121 118 | 
             
              setColumnStatus: _propTypes.default.func,
         | 
    
        package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
    CHANGED
    
    | @@ -43,8 +43,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) { | |
| 43 43 | 
             
                _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
         | 
| 44 44 | 
             
                assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
         | 
| 45 45 | 
             
                _ref$selectAllLabel = _ref.selectAllLabel,
         | 
| 46 | 
            -
                selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel | 
| 47 | 
            -
                isTableSortable = _ref.isTableSortable;
         | 
| 46 | 
            +
                selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
         | 
| 48 47 | 
             
              var _useState = (0, _react.useState)(''),
         | 
| 49 48 | 
             
                _useState2 = (0, _slicedToArray2.default)(_useState, 2),
         | 
| 50 49 | 
             
                visibleColumnsCount = _useState2[0],
         | 
| @@ -154,8 +153,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) { | |
| 154 153 | 
             
                  setColumnObjects(cols);
         | 
| 155 154 | 
             
                  setDirty();
         | 
| 156 155 | 
             
                },
         | 
| 157 | 
            -
                selectAllLabel: selectAllLabel | 
| 158 | 
            -
                isTableSortable: isTableSortable
         | 
| 156 | 
            +
                selectAllLabel: selectAllLabel
         | 
| 159 157 | 
             
              }));
         | 
| 160 158 | 
             
            };
         | 
| 161 159 | 
             
            CustomizeColumnsTearsheet.propTypes = {
         | 
| @@ -166,7 +164,6 @@ CustomizeColumnsTearsheet.propTypes = { | |
| 166 164 | 
             
              findColumnPlaceholderLabel: _propTypes.default.string,
         | 
| 167 165 | 
             
              instructionsLabel: _propTypes.default.string,
         | 
| 168 166 | 
             
              isOpen: _propTypes.default.bool.isRequired,
         | 
| 169 | 
            -
              isTableSortable: _propTypes.default.bool.isRequired,
         | 
| 170 167 | 
             
              onSaveColumnPrefs: _propTypes.default.func.isRequired,
         | 
| 171 168 | 
             
              originalColumnDefinitions: _propTypes.default.array.isRequired,
         | 
| 172 169 | 
             
              primaryButtonTextLabel: _propTypes.default.string,
         | 
| @@ -24,32 +24,49 @@ var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 24 24 | 
             
                filterString = _ref.filterString,
         | 
| 25 25 | 
             
                focusIndex = _ref.focusIndex,
         | 
| 26 26 | 
             
                getNextIndex = _ref.getNextIndex,
         | 
| 27 | 
            -
                isTableSortable = _ref.isTableSortable,
         | 
| 28 27 | 
             
                moveElement = _ref.moveElement,
         | 
| 29 28 | 
             
                onSelectColumn = _ref.onSelectColumn,
         | 
| 30 29 | 
             
                setAriaRegionText = _ref.setAriaRegionText,
         | 
| 31 30 | 
             
                setColumnsObject = _ref.setColumnsObject,
         | 
| 32 31 | 
             
                setFocusIndex = _ref.setFocusIndex;
         | 
| 32 | 
            +
              // This function recursively looks for the nested header element until we can find the key which contains the title.
         | 
| 33 | 
            +
              // This can happen if multiple hooks are used together that manipulate the rendering of the column
         | 
| 34 | 
            +
              // header, such as `useColumnCenterAlign` and `useSortableColumns`.
         | 
| 35 | 
            +
              var getNestedTitle = function getNestedTitle(component) {
         | 
| 36 | 
            +
                if (component && !component.key) {
         | 
| 37 | 
            +
                  return getNestedTitle(component.children);
         | 
| 38 | 
            +
                }
         | 
| 39 | 
            +
                if (component && component.key && typeof component.key === 'string') {
         | 
| 40 | 
            +
                  return component.key;
         | 
| 41 | 
            +
                }
         | 
| 42 | 
            +
              };
         | 
| 43 | 
            +
              var getColTitle = function getColTitle(col) {
         | 
| 44 | 
            +
                if (!col) {
         | 
| 45 | 
            +
                  return;
         | 
| 46 | 
            +
                }
         | 
| 47 | 
            +
                var checkTitle = function checkTitle() {
         | 
| 48 | 
            +
                  if (col.Header().props.children.props && col.Header().props.children.props.title) {
         | 
| 49 | 
            +
                    return col.Header().props.children.props.title;
         | 
| 50 | 
            +
                  }
         | 
| 51 | 
            +
                  return getNestedTitle(col.Header().props.children.props);
         | 
| 52 | 
            +
                };
         | 
| 53 | 
            +
                return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
         | 
| 54 | 
            +
              };
         | 
| 33 55 | 
             
              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
         | 
| 34 56 | 
             
              // hide the columns without Header, e.g the sticky actions, spacer
         | 
| 35 57 | 
             
              .filter(function (colDef) {
         | 
| 36 | 
            -
                 | 
| 37 | 
            -
             | 
| 38 | 
            -
                return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
         | 
| 39 | 
            -
              }).filter(function (colDef) {
         | 
| 58 | 
            +
                return !!getColTitle(colDef);
         | 
| 59 | 
            +
              }).filter(Boolean).filter(function (colDef) {
         | 
| 40 60 | 
             
                return !colDef.isAction;
         | 
| 41 61 | 
             
              }).filter(function (colDef) {
         | 
| 42 | 
            -
                var  | 
| 43 | 
            -
                 | 
| 44 | 
            -
                return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
         | 
| 62 | 
            +
                var _getColTitle;
         | 
| 63 | 
            +
                return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
         | 
| 45 64 | 
             
              }).map(function (colDef, i) {
         | 
| 46 | 
            -
                var  | 
| 47 | 
            -
                var isSortableColumn = !!colDef.canSort && !!isTableSortable;
         | 
| 48 | 
            -
                var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
         | 
| 65 | 
            +
                var colHeaderTitle = getColTitle(colDef);
         | 
| 49 66 | 
             
                var searchString = new RegExp('(' + filterString + ')');
         | 
| 50 | 
            -
                var res = filterString.length ?  | 
| 67 | 
            +
                var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
         | 
| 51 68 | 
             
                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;
         | 
| 52 | 
            -
                var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] :  | 
| 69 | 
            +
                var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
         | 
| 53 70 | 
             
                var isFrozenColumn = !!colDef.sticky;
         | 
| 54 71 | 
             
                var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
         | 
| 55 72 | 
             
                  wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
         | 
| @@ -57,8 +74,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 57 74 | 
             
                  disabled: isFrozenColumn,
         | 
| 58 75 | 
             
                  onChange: onSelectColumn.bind(null, colDef),
         | 
| 59 76 | 
             
                  id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
         | 
| 60 | 
            -
                  labelText:  | 
| 61 | 
            -
                  title:  | 
| 77 | 
            +
                  labelText: colHeaderTitle,
         | 
| 78 | 
            +
                  title: colHeaderTitle,
         | 
| 62 79 | 
             
                  className: "".concat(blockClass, "__customize-columns-checkbox"),
         | 
| 63 80 | 
             
                  hideLabel: true
         | 
| 64 81 | 
             
                }), /*#__PURE__*/_react.default.createElement("div", {
         | 
| @@ -74,7 +91,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) { | |
| 74 91 | 
             
                  id: "dnd-datagrid-columns-".concat(colDef.id),
         | 
| 75 92 | 
             
                  type: "column-customization",
         | 
| 76 93 | 
             
                  disabled: filterString.length > 0 || isFrozenColumn,
         | 
| 77 | 
            -
                  ariaLabel:  | 
| 94 | 
            +
                  ariaLabel: colHeaderTitle,
         | 
| 78 95 | 
             
                  onGrab: setAriaRegionText,
         | 
| 79 96 | 
             
                  isFocused: focusIndex === i,
         | 
| 80 97 | 
             
                  moveElement: moveElement,
         | 
| @@ -104,7 +121,6 @@ DraggableItemsList.propTypes = { | |
| 104 121 | 
             
              filterString: _propTypes.PropTypes.string.isRequired,
         | 
| 105 122 | 
             
              focusIndex: _propTypes.PropTypes.number.isRequired,
         | 
| 106 123 | 
             
              getNextIndex: _propTypes.PropTypes.func.isRequired,
         | 
| 107 | 
            -
              isTableSortable: _propTypes.PropTypes.bool,
         | 
| 108 124 | 
             
              moveElement: _propTypes.PropTypes.func.isRequired,
         | 
| 109 125 | 
             
              onSelectColumn: _propTypes.PropTypes.func.isRequired,
         | 
| 110 126 | 
             
              setAriaRegionText: _propTypes.PropTypes.func.isRequired,
         | 
| @@ -24,7 +24,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) { | |
| 24 24 | 
             
                rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
         | 
| 25 25 | 
             
              return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
         | 
| 26 26 | 
             
                isOpen: isTearsheetOpen,
         | 
| 27 | 
            -
                isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
         | 
| 28 27 | 
             
                setIsTearsheetOpen: setIsTearsheetOpen,
         | 
| 29 28 | 
             
                columnDefinitions: instance.allColumns,
         | 
| 30 29 | 
             
                originalColumnDefinitions: instance.columns,
         | 
| @@ -24,7 +24,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) { | |
| 24 24 | 
             
              var HeaderRenderer = function HeaderRenderer(header) {
         | 
| 25 25 | 
             
                return /*#__PURE__*/_react.default.createElement("div", {
         | 
| 26 26 | 
             
                  className: "".concat(blockClass, "__defaultStringRenderer"),
         | 
| 27 | 
            -
                  title: typeof header === 'string' ? header : ''
         | 
| 27 | 
            +
                  title: typeof header === 'string' ? header : '',
         | 
| 28 | 
            +
                  key: typeof header === 'string' ? header : ''
         | 
| 28 29 | 
             
                }, header);
         | 
| 29 30 | 
             
              };
         | 
| 30 31 | 
             
              var visibleColumns = function visibleColumns(columns) {
         | 
| @@ -24,8 +24,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) { | |
| 24 24 | 
             
              var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
         | 
| 25 25 | 
             
                descendingSortableLabelText = _ref.descendingSortableLabelText,
         | 
| 26 26 | 
             
                defaultSortableLabelText = _ref.defaultSortableLabelText;
         | 
| 27 | 
            -
               | 
| 28 | 
            -
                 | 
| 27 | 
            +
              if (!col) {
         | 
| 28 | 
            +
                return;
         | 
| 29 | 
            +
              }
         | 
| 30 | 
            +
              var _ref2 = col || {},
         | 
| 31 | 
            +
                isSorted = _ref2.isSorted,
         | 
| 32 | 
            +
                isSortedDesc = _ref2.isSortedDesc;
         | 
| 29 33 | 
             
              if (!isSorted) {
         | 
| 30 34 | 
             
                return defaultSortableLabelText || 'none';
         | 
| 31 35 | 
             
              }
         | 
| @@ -37,9 +41,9 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) { | |
| 37 41 | 
             
              }
         | 
| 38 42 | 
             
            };
         | 
| 39 43 | 
             
            var useSortableColumns = function useSortableColumns(hooks) {
         | 
| 40 | 
            -
              var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns,  | 
| 44 | 
            +
              var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref3) {
         | 
| 41 45 | 
             
                var _instance$customizeCo;
         | 
| 42 | 
            -
                var instance =  | 
| 46 | 
            +
                var instance = _ref3.instance;
         | 
| 43 47 | 
             
                var onSort = instance.onSort,
         | 
| 44 48 | 
             
                  ascendingSortableLabelText = instance.ascendingSortableLabelText,
         | 
| 45 49 | 
             
                  descendingSortableLabelText = instance.descendingSortableLabelText,
         | 
| @@ -119,7 +119,7 @@ var makeMatcherArray = function makeMatcherArray(args) { | |
| 119 119 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 120 120 | 
             
             * console.warn, for example when intentionally using a deprecated prop
         | 
| 121 121 | 
             
             * or supplying invalid parameters for the purposes of the test.
         | 
| 122 | 
            -
             * @param {string|regex| | 
| 122 | 
            +
             * @param {string|regex|Function|[]} message the expected parameters for the call to
         | 
| 123 123 | 
             
             * console.warn, which must be called exactly once. A single string or regex or an
         | 
| 124 124 | 
             
             * expect matcher can be used to match a single-argument call to console.warn (most common),
         | 
| 125 125 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
| @@ -207,7 +207,7 @@ var checkLogging = function checkLogging(mock, message) { | |
| 207 207 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 208 208 | 
             
             * console.error, for example when intentionally omitting a required prop
         | 
| 209 209 | 
             
             * or supplying an invalid prop type or value for the purposes of the test.
         | 
| 210 | 
            -
             * @param {errors: {string|regex| | 
| 210 | 
            +
             * @param {errors: {string|regex|Function|[]}, warnings: {string|regex|Function|[]}} messages the expected parameters for the call to
         | 
| 211 211 | 
             
             * console.error or console.warn, which must be called exactly once. A single string or regex or an
         | 
| 212 212 | 
             
             * expect matcher can be used to match a single-argument call to console.error (most common),
         | 
| 213 213 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
| @@ -233,7 +233,7 @@ var expectLogging = function expectLogging(_ref2, test) { | |
| 233 233 | 
             
             * A helper function to enable a test to expect a single call to
         | 
| 234 234 | 
             
             * console.error, for example when intentionally omitting a required prop
         | 
| 235 235 | 
             
             * or supplying an invalid prop type or value for the purposes of the test.
         | 
| 236 | 
            -
             * @param {string|regex| | 
| 236 | 
            +
             * @param {string|regex|Function|[]} message the expected parameters for the call to
         | 
| 237 237 | 
             
             * console.error, which must be called exactly once. A single string or regex or an
         | 
| 238 238 | 
             
             * expect matcher can be used to match a single-argument call to console.error (most common),
         | 
| 239 239 | 
             
             * while an array of strings and/or regex and/or expect matchers can be used to match a
         | 
    
        package/package.json
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            {
         | 
| 2 2 | 
             
              "name": "@carbon/ibm-products",
         | 
| 3 3 | 
             
              "description": "Carbon for IBM Products",
         | 
| 4 | 
            -
              "version": "1.55. | 
| 4 | 
            +
              "version": "1.55.2",
         | 
| 5 5 | 
             
              "license": "Apache-2.0",
         | 
| 6 6 | 
             
              "main": "lib/index.js",
         | 
| 7 7 | 
             
              "module": "es/index.js",
         | 
| @@ -84,17 +84,17 @@ | |
| 84 84 | 
             
              },
         | 
| 85 85 | 
             
              "peerDependencies": {
         | 
| 86 86 | 
             
                "@carbon/colors": "^10.37.1",
         | 
| 87 | 
            -
                "@carbon/icons-react": "^10.49. | 
| 87 | 
            +
                "@carbon/icons-react": "^10.49.1",
         | 
| 88 88 | 
             
                "@carbon/import-once": "^10.7.0",
         | 
| 89 89 | 
             
                "@carbon/layout": "^10.37.1",
         | 
| 90 | 
            -
                "@carbon/motion": "^10.29. | 
| 91 | 
            -
                "@carbon/themes": "^10.55. | 
| 92 | 
            -
                "@carbon/type": "^10.45. | 
| 93 | 
            -
                "carbon-components": "^10.58. | 
| 94 | 
            -
                "carbon-components-react": "^7.59. | 
| 90 | 
            +
                "@carbon/motion": "^10.29.1",
         | 
| 91 | 
            +
                "@carbon/themes": "^10.55.2",
         | 
| 92 | 
            +
                "@carbon/type": "^10.45.2",
         | 
| 93 | 
            +
                "carbon-components": "^10.58.8",
         | 
| 94 | 
            +
                "carbon-components-react": "^7.59.9",
         | 
| 95 95 | 
             
                "carbon-icons": "^7.0.7",
         | 
| 96 96 | 
             
                "react": "^16.8.6 || ^17.0.1",
         | 
| 97 97 | 
             
                "react-dom": "^16.8.6 || ^17.0.1"
         | 
| 98 98 | 
             
              },
         | 
| 99 | 
            -
              "gitHead": " | 
| 99 | 
            +
              "gitHead": "33f2fa8f015f9d04c83142badc07c9f0905130c8"
         | 
| 100 100 | 
             
            }
         | 
| @@ -1,19 +1,19 @@ | |
| 1 | 
            -
             | 
| 2 | 
            -
             | 
| 3 | 
            -
             | 
| 4 | 
            -
             | 
| 5 | 
            -
             | 
| 6 | 
            -
             | 
| 7 | 
            -
            */
         | 
| 1 | 
            +
            //
         | 
| 2 | 
            +
            // Copyright IBM Corp. 2020, 2023
         | 
| 3 | 
            +
            //
         | 
| 4 | 
            +
            // This source code is licensed under the Apache-2.0 license found in the
         | 
| 5 | 
            +
            // LICENSE file in the root directory of this source tree.
         | 
| 6 | 
            +
            //
         | 
| 8 7 |  | 
| 9 8 | 
             
            @import './variables';
         | 
| 10 9 |  | 
| 11 | 
            -
            .#{$block-class}__center-align-header | 
| 10 | 
            +
            .#{$block-class}__center-align-header,
         | 
| 11 | 
            +
            .#{$block-class}__center-align-header .#{$block-class}--table-sort {
         | 
| 12 12 | 
             
              width: 100%;
         | 
| 13 13 | 
             
              text-align: center;
         | 
| 14 14 | 
             
            }
         | 
| 15 15 |  | 
| 16 | 
            -
            .#{$block-class}__center-align-cell-renderer | 
| 16 | 
            +
            .#{$block-class}__center-align-cell-renderer {
         | 
| 17 17 | 
             
              margin-right: auto;
         | 
| 18 18 | 
             
              margin-left: auto;
         | 
| 19 19 | 
             
            }
         |