@carbon/ibm-products 2.5.0 → 2.6.1

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.
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
  }