@carbon/ibm-products 2.5.0 → 2.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/css/index-full-carbon.css +3 -9
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +3 -9
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +3 -9
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/CreateTearsheet/CreateTearsheetStep.js +18 -5
  14. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +7 -4
  15. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
  16. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
  17. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
  18. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
  19. package/es/components/Datagrid/useDefaultStringRenderer.js +2 -1
  20. package/es/components/Datagrid/useSortableColumns.js +13 -5
  21. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +17 -4
  22. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +6 -3
  23. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
  24. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
  25. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
  26. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
  27. package/lib/components/Datagrid/useDefaultStringRenderer.js +2 -1
  28. package/lib/components/Datagrid/useSortableColumns.js +13 -5
  29. package/package.json +3 -3
  30. package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss +9 -9
package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js CHANGED
@@ -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
- var _colDef$Header$props$, _colDef$Header$props;
30
- var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
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 _colDef$Header$props$2, _colDef$Header$props2;
36
- var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
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 || (_colDef$Header$props2 = _colDef$Header$props2.title) === null || _colDef$Header$props2 === void 0 ? void 0 : _colDef$Header$props2.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 _colDef$Header$props$3, _colDef$Header$props3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6;
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 ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
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] : isSortableColumn ? sortableTitle : (_colDef$Header$props3 = colDef.Header.props) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.title;
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"),
@@ -53,8 +70,8 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
53
70
  return onSelectColumn(colDef, checked);
54
71
  },
55
72
  id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
56
- labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title,
57
- title: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
73
+ labelText: colHeaderTitle,
74
+ title: colHeaderTitle,
58
75
  className: "".concat(blockClass, "__customize-columns-checkbox"),
59
76
  hideLabel: true
60
77
  }), /*#__PURE__*/React.createElement("div", {
@@ -71,7 +88,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
71
88
  id: "dnd-datagrid-columns-".concat(colDef.id),
72
89
  type: "column-customization",
73
90
  disabled: filterString.length > 0 || isFrozenColumn,
74
- ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
91
+ ariaLabel: colHeaderTitle,
75
92
  onGrab: setAriaRegionText,
76
93
  isFocused: focusIndex === i,
77
94
  moveElement: moveElement,
@@ -100,7 +117,6 @@ DraggableItemsList.propTypes = {
100
117
  filterString: PropTypes.string.isRequired,
101
118
  focusIndex: PropTypes.number.isRequired,
102
119
  getNextIndex: PropTypes.func.isRequired,
103
- isTableSortable: PropTypes.bool,
104
120
  moveElement: PropTypes.func.isRequired,
105
121
  onSelectColumn: PropTypes.func.isRequired,
106
122
  setAriaRegionText: PropTypes.func.isRequired,
package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js CHANGED
@@ -20,7 +20,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
20
20
  rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
21
21
  return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
22
22
  isOpen: isTearsheetOpen,
23
- isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
24
23
  setIsTearsheetOpen: setIsTearsheetOpen,
25
24
  columnDefinitions: instance.allColumns,
26
25
  originalColumnDefinitions: instance.columns,
package/es/components/Datagrid/useDefaultStringRenderer.js CHANGED
@@ -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) {
package/es/components/Datagrid/useSortableColumns.js CHANGED
@@ -25,8 +25,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
25
25
  var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
26
26
  descendingSortableLabelText = _ref.descendingSortableLabelText,
27
27
  defaultSortableLabelText = _ref.defaultSortableLabelText;
28
- var isSorted = col.isSorted,
29
- isSortedDesc = col.isSortedDesc;
28
+ if (!col) {
29
+ return;
30
+ }
31
+ var _ref2 = col || {},
32
+ isSorted = _ref2.isSorted,
33
+ isSortedDesc = _ref2.isSortedDesc;
30
34
  if (!isSorted) {
31
35
  return defaultSortableLabelText || 'none';
32
36
  }
@@ -38,16 +42,20 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
38
42
  }
39
43
  };
40
44
  var getAriaPressedValue = function getAriaPressedValue(col) {
41
- var isSorted = col.isSorted;
45
+ if (!col) {
46
+ return;
47
+ }
48
+ var _ref3 = col || {},
49
+ isSorted = _ref3.isSorted;
42
50
  if (isSorted) {
43
51
  return 'true';
44
52
  }
45
53
  return 'false';
46
54
  };
47
55
  var useSortableColumns = function useSortableColumns(hooks) {
48
- var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
56
+ var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
49
57
  var _instance$customizeCo;
50
- var instance = _ref2.instance;
58
+ var instance = _ref4.instance;
51
59
  var onSort = instance.onSort,
52
60
  ascendingSortableLabelText = instance.ascendingSortableLabelText,
53
61
  descendingSortableLabelText = instance.descendingSortableLabelText,
package/lib/components/CreateTearsheet/CreateTearsheetStep.js CHANGED
@@ -92,6 +92,21 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
92
92
  stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
93
93
  }
94
94
  }, [stepsContext, stepNumber, disableSubmit, onNext]);
95
+ var renderDescription = function renderDescription() {
96
+ if (description) {
97
+ if (typeof description === 'string') {
98
+ return /*#__PURE__*/_react.default.createElement("p", {
99
+ className: "".concat(blockClass, "--description")
100
+ }, description);
101
+ }
102
+ if ( /*#__PURE__*/(0, _react.isValidElement)(description)) {
103
+ return /*#__PURE__*/_react.default.createElement("div", {
104
+ className: "".concat(blockClass, "--description")
105
+ }, description);
106
+ }
107
+ }
108
+ return null;
109
+ };
95
110
  return stepsContext ? /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, rest, {
96
111
  className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
97
112
  ref: ref
@@ -104,9 +119,7 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
104
119
  className: "".concat(blockClass, "--title")
105
120
  }, title), subtitle && /*#__PURE__*/_react.default.createElement("h6", {
106
121
  className: "".concat(blockClass, "--subtitle")
107
- }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
108
- className: "".concat(blockClass, "--description")
109
- }, description)), /*#__PURE__*/_react.default.createElement(_react2.Column, {
122
+ }, subtitle), renderDescription()), /*#__PURE__*/_react.default.createElement(_react2.Column, {
110
123
  span: 100
111
124
  }, hasFieldset ? /*#__PURE__*/_react.default.createElement(_react2.FormGroup, {
112
125
  legendText: fieldsetLegendText,
@@ -129,7 +142,7 @@ CreateTearsheetStep.propTypes = {
129
142
  /**
130
143
  * Sets an optional description on the step component
131
144
  */
132
- description: _propTypes.default.string,
145
+ description: _propTypes.default.node,
133
146
  /**
134
147
  * This will conditionally disable the submit button in the multi step Tearsheet
135
148
  */
package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js CHANGED
@@ -161,7 +161,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
161
161
  fieldsetLegendText: "Topic information",
162
162
  disableSubmit: !stepOneTextInputValue,
163
163
  subtitle: "This is the unique name used to recognize your topic",
164
- description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
164
+ description: /*#__PURE__*/_react.default.createElement("div", null, "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize. ", /*#__PURE__*/_react.default.createElement(_react2.Link, {
165
+ href: "#"
166
+ }, "Learn more."))
165
167
  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
166
168
  xlg: 8,
167
169
  lg: 8,
@@ -215,8 +217,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
215
217
  }), /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
216
218
  labelText: "Include additional step",
217
219
  id: "include-additional-step-checkbox",
218
- onChange: function onChange(value) {
219
- return setShouldIncludeAdditionalStep(value);
220
+ onChange: function onChange(event, _ref3) {
221
+ var checked = _ref3.checked;
222
+ return setShouldIncludeAdditionalStep(checked);
220
223
  },
221
224
  checked: shouldIncludeAdditionalStep
222
225
  })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js CHANGED
@@ -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
@@ -48,8 +48,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
48
48
  _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
49
49
  assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
50
50
  _ref$selectAllLabel = _ref.selectAllLabel,
51
- selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
52
- isTableSortable = _ref.isTableSortable;
51
+ selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
53
52
  var _useState = (0, _react.useState)(''),
54
53
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
55
54
  visibleColumnsCount = _useState2[0],
@@ -159,8 +158,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
159
158
  setColumnObjects(cols);
160
159
  setDirty();
161
160
  },
162
- selectAllLabel: selectAllLabel,
163
- isTableSortable: isTableSortable
161
+ selectAllLabel: selectAllLabel
164
162
  }));
165
163
  };
166
164
  CustomizeColumnsTearsheet.propTypes = {
@@ -171,7 +169,6 @@ CustomizeColumnsTearsheet.propTypes = {
171
169
  findColumnPlaceholderLabel: _propTypes.default.string,
172
170
  instructionsLabel: _propTypes.default.string,
173
171
  isOpen: _propTypes.default.bool.isRequired,
174
- isTableSortable: _propTypes.default.bool.isRequired,
175
172
  onSaveColumnPrefs: _propTypes.default.func.isRequired,
176
173
  originalColumnDefinitions: _propTypes.default.array.isRequired,
177
174
  primaryButtonTextLabel: _propTypes.default.string,
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js CHANGED
@@ -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
- var _colDef$Header$props$, _colDef$Header$props;
37
- var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
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 _colDef$Header$props$2, _colDef$Header$props2;
43
- var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
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 || (_colDef$Header$props2 = _colDef$Header$props2.title) === null || _colDef$Header$props2 === void 0 ? void 0 : _colDef$Header$props2.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 _colDef$Header$props$3, _colDef$Header$props3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6;
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 ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
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] : isSortableColumn ? sortableTitle : (_colDef$Header$props3 = colDef.Header.props) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.title;
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(_react2.Checkbox, {
55
72
  wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -60,8 +77,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
60
77
  return onSelectColumn(colDef, checked);
61
78
  },
62
79
  id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
63
- labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title,
64
- title: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
80
+ labelText: colHeaderTitle,
81
+ title: colHeaderTitle,
65
82
  className: "".concat(blockClass, "__customize-columns-checkbox"),
66
83
  hideLabel: true
67
84
  }), /*#__PURE__*/_react.default.createElement("div", {
@@ -78,7 +95,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
78
95
  id: "dnd-datagrid-columns-".concat(colDef.id),
79
96
  type: "column-customization",
80
97
  disabled: filterString.length > 0 || isFrozenColumn,
81
- ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
98
+ ariaLabel: colHeaderTitle,
82
99
  onGrab: setAriaRegionText,
83
100
  isFocused: focusIndex === i,
84
101
  moveElement: moveElement,
@@ -108,7 +125,6 @@ DraggableItemsList.propTypes = {
108
125
  filterString: _propTypes.PropTypes.string.isRequired,
109
126
  focusIndex: _propTypes.PropTypes.number.isRequired,
110
127
  getNextIndex: _propTypes.PropTypes.func.isRequired,
111
- isTableSortable: _propTypes.PropTypes.bool,
112
128
  moveElement: _propTypes.PropTypes.func.isRequired,
113
129
  onSelectColumn: _propTypes.PropTypes.func.isRequired,
114
130
  setAriaRegionText: _propTypes.PropTypes.func.isRequired,
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js CHANGED
@@ -29,7 +29,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
29
29
  rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
30
30
  return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
31
31
  isOpen: isTearsheetOpen,
32
- isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
33
32
  setIsTearsheetOpen: setIsTearsheetOpen,
34
33
  columnDefinitions: instance.allColumns,
35
34
  originalColumnDefinitions: instance.columns,
package/lib/components/Datagrid/useDefaultStringRenderer.js CHANGED
@@ -30,7 +30,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
30
30
  var HeaderRenderer = function HeaderRenderer(header) {
31
31
  return /*#__PURE__*/_react.default.createElement("div", {
32
32
  className: "".concat(blockClass, "__defaultStringRenderer"),
33
- title: typeof header === 'string' ? header : ''
33
+ title: typeof header === 'string' ? header : '',
34
+ key: typeof header === 'string' ? header : ''
34
35
  }, header);
35
36
  };
36
37
  var visibleColumns = function visibleColumns(columns) {
package/lib/components/Datagrid/useSortableColumns.js CHANGED
@@ -30,8 +30,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
30
30
  var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
31
31
  descendingSortableLabelText = _ref.descendingSortableLabelText,
32
32
  defaultSortableLabelText = _ref.defaultSortableLabelText;
33
- var isSorted = col.isSorted,
34
- isSortedDesc = col.isSortedDesc;
33
+ if (!col) {
34
+ return;
35
+ }
36
+ var _ref2 = col || {},
37
+ isSorted = _ref2.isSorted,
38
+ isSortedDesc = _ref2.isSortedDesc;
35
39
  if (!isSorted) {
36
40
  return defaultSortableLabelText || 'none';
37
41
  }
@@ -43,16 +47,20 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
43
47
  }
44
48
  };
45
49
  var getAriaPressedValue = function getAriaPressedValue(col) {
46
- var isSorted = col.isSorted;
50
+ if (!col) {
51
+ return;
52
+ }
53
+ var _ref3 = col || {},
54
+ isSorted = _ref3.isSorted;
47
55
  if (isSorted) {
48
56
  return 'true';
49
57
  }
50
58
  return 'false';
51
59
  };
52
60
  var useSortableColumns = function useSortableColumns(hooks) {
53
- var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
61
+ var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
54
62
  var _instance$customizeCo;
55
- var instance = _ref2.instance;
63
+ var instance = _ref4.instance;
56
64
  var onSort = instance.onSort,
57
65
  ascendingSortableLabelText = instance.ascendingSortableLabelText,
58
66
  descendingSortableLabelText = instance.descendingSortableLabelText,
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": "2.5.0",
4
+ "version": "2.6.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -70,7 +70,7 @@
70
70
  "npm-check-updates": "^16.10.15",
71
71
  "npm-run-all": "^4.1.5",
72
72
  "rimraf": "^5.0.1",
73
- "sass": "^1.63.6",
73
+ "sass": "1.63.6",
74
74
  "yargs": "^17.7.2"
75
75
  },
76
76
  "dependencies": {
@@ -94,5 +94,5 @@
94
94
  "react": "^16.8.6 || ^17.0.1",
95
95
  "react-dom": "^16.8.6 || ^17.0.1"
96
96
  },
97
- "gitHead": "40fe19b4ef32f97f01e8664bbe81fc1e459d0f3f"
97
+ "gitHead": "6730e827634c2dea7b4a865df25dde4cff4e2050"
98
98
  }
package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss CHANGED
@@ -1,20 +1,20 @@
1
- /*
2
- * Licensed Materials - Property of IBM
3
- * 5724-Q36
4
- * (c) Copyright IBM Corp. 2020
5
- * US Government Users Restricted Rights - Use, duplication or disclosure
6
- * restricted by GSA ADP Schedule Contract with IBM Corp.
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
  @use '../../../global/styles/project-settings';
10
9
 
11
10
  $block-class: #{project-settings.$pkg-prefix}--datagrid;
12
- .#{$block-class}__center-align-header {
11
+ .#{$block-class}__center-align-header,
12
+ .#{$block-class}__center-align-header .#{$block-class}--table-sort {
13
13
  width: 100%;
14
14
  text-align: center;
15
15
  }
16
16
 
17
- .#{$block-class}__center-align-cell-renderer.sortDisabled {
17
+ .#{$block-class}__center-align-cell-renderer {
18
18
  margin-right: auto;
19
19
  margin-left: auto;
20
20
  }