@carbon/ibm-products 2.12.0 → 2.12.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 (48) hide show
  1. package/css/index-full-carbon.css +3 -5
  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 -5
  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 -5
  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/Datagrid/Datagrid/DatagridEmptyBody.js +1 -3
  14. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -5
  15. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +1 -3
  16. package/es/components/Datagrid/Datagrid/DatagridRow.js +2 -6
  17. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -3
  18. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
  19. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +9 -8
  20. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +6 -12
  21. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +0 -5
  22. package/es/components/Datagrid/Datagrid.docs-page.js +1 -1
  23. package/es/components/Datagrid/useDisableSelectRows.js +1 -1
  24. package/es/components/Datagrid/useInlineEdit.js +1 -6
  25. package/es/components/Datagrid/useSelectRows.js +1 -1
  26. package/es/components/Datagrid/useSortableColumns.js +14 -25
  27. package/es/global/js/hooks/useCreateComponentStepChange.js +14 -20
  28. package/es/global/js/utils/getNodeTextContent.js +4 -0
  29. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +1 -3
  30. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -5
  31. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +1 -3
  32. package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -6
  33. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +9 -8
  36. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +6 -12
  37. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +0 -5
  38. package/lib/components/Datagrid/Datagrid.docs-page.js +1 -1
  39. package/lib/components/Datagrid/useDisableSelectRows.js +1 -1
  40. package/lib/components/Datagrid/useInlineEdit.js +1 -6
  41. package/lib/components/Datagrid/useSelectRows.js +1 -1
  42. package/lib/components/Datagrid/useSortableColumns.js +14 -25
  43. package/lib/global/js/hooks/useCreateComponentStepChange.js +14 -20
  44. package/lib/global/js/utils/getNodeTextContent.js +4 -0
  45. package/package.json +2 -2
  46. package/scss/components/Datagrid/styles/_useInlineEdit.scss +8 -11
  47. package/es/components/Datagrid/utils/getColTitle.js +0 -25
  48. package/lib/components/Datagrid/utils/getColTitle.js +0 -32
@@ -33,14 +33,12 @@ export var InlineEditCell = function InlineEditCell(_ref) {
33
33
  value = _ref.value,
34
34
  _ref$nonEditCell = _ref.nonEditCell,
35
35
  nonEditCell = _ref$nonEditCell === void 0 ? false : _ref$nonEditCell,
36
- totalInlineEditColumns = _ref.totalInlineEditColumns,
37
36
  type = _ref.type;
38
37
  var columnId = cell.column.id;
39
38
  var columnIndex = instance.columns.findIndex(function (col) {
40
39
  return col.id === columnId;
41
40
  });
42
41
  var cellId = "column-".concat(columnIndex, "-row-").concat(cell.row.index);
43
- var totalColumns = instance.columns.length;
44
42
  var _useContext = useContext(InlineEditContext),
45
43
  state = _useContext.state,
46
44
  dispatch = _useContext.dispatch;
@@ -450,8 +448,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
450
448
  tabIndex: tabIndex,
451
449
  nonEditCell: nonEditCell,
452
450
  columnConfig: cell.column,
453
- totalInlineEditColumns: totalInlineEditColumns,
454
- totalColumns: totalColumns,
455
451
  type: type
456
452
  }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
457
453
  );
@@ -469,7 +465,6 @@ InlineEditCell.propTypes = {
469
465
  nonEditCell: PropTypes.bool,
470
466
  placeholder: PropTypes.string,
471
467
  tabIndex: PropTypes.number,
472
- totalInlineEditColumns: PropTypes.number,
473
468
  type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
474
469
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.object])
475
470
  };
@@ -116,7 +116,7 @@ export var DocsPage = function DocsPage() {
116
116
  title: 'Sortable columns',
117
117
  description: "To add sortable columns to your Datagrid, simply add the `useSortableColumns` hook. This will allow each column header to be clickable and sort each column in either ascending or descending order.\n- Include `useSortableColumns` hook\n ",
118
118
  source: {
119
- code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n },\n useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n "
119
+ code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n ascendingSortableLabelText: 'none',\n descendingSortableLabelText: 'ascending',\n defaultSortableLabelText: 'descending',\n },\n useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n "
120
120
  }
121
121
  }, {
122
122
  title: 'Sticky column',
@@ -13,7 +13,7 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
13
13
  var row = _ref.row,
14
14
  instance = _ref.instance;
15
15
  return [props, {
16
- selectDisabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
16
+ disabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
17
17
  }];
18
18
  };
19
19
  hooks.getRowProps.push(getRowProps);
@@ -21,14 +21,11 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
21
21
  }
22
22
  }, [usingEditableCell]);
23
23
  var addInlineEdit = function addInlineEdit(props, _ref) {
24
- var _cell$column, _instance$columns$fil;
24
+ var _cell$column;
25
25
  var cell = _ref.cell,
26
26
  instance = _ref.instance;
27
27
  var columnInlineEditConfig = cell.column.inlineEdit;
28
28
  var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 || (_cell$column = _cell$column.inlineEdit) === null || _cell$column === void 0 ? void 0 : _cell$column.type;
29
- var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
30
- return item.inlineEdit;
31
- })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;
32
29
  var renderInlineEditComponent = function renderInlineEditComponent(type) {
33
30
  return /*#__PURE__*/React.createElement(InlineEditCell, {
34
31
  config: columnInlineEditConfig,
@@ -36,7 +33,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
36
33
  value: cell.value,
37
34
  cell: cell,
38
35
  instance: instance,
39
- totalInlineEditColumns: totalInlineEditColumns,
40
36
  type: type
41
37
  });
42
38
  };
@@ -56,7 +52,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
56
52
  instance: instance,
57
53
  disabled: true,
58
54
  nonEditCell: true,
59
- totalInlineEditColumns: totalInlineEditColumns,
60
55
  type: "text"
61
56
  }))
62
57
  }];
@@ -87,7 +87,7 @@ var SelectRow = function SelectRow(datagridState) {
87
87
  return window.removeEventListener('resize', updateSize);
88
88
  };
89
89
  }, []);
90
- var selectDisabled = isFetching || row.getRowProps().selectDisabled;
90
+ var selectDisabled = isFetching || row.getRowProps().disabled;
91
91
  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
92
92
  onChange = _row$getToggleRowSele.onChange,
93
93
  selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
@@ -1,6 +1,5 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- import _extends from "@babel/runtime/helpers/extends";
4
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
5
  /**
@@ -15,6 +14,7 @@ import cx from 'classnames';
15
14
  import { pkg, carbon } from '../../settings';
16
15
  import { Button } from '@carbon/react';
17
16
  import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
17
+ import { SelectAll } from './Datagrid/DatagridSelectAll';
18
18
  var blockClass = "".concat(pkg.prefix, "--datagrid");
19
19
  var ordering = {
20
20
  ASC: 'ASC',
@@ -32,13 +32,13 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
32
32
  isSorted = _ref2.isSorted,
33
33
  isSortedDesc = _ref2.isSortedDesc;
34
34
  if (!isSorted) {
35
- return defaultSortableLabelText || 'none';
35
+ return defaultSortableLabelText;
36
36
  }
37
37
  if (isSorted && !isSortedDesc) {
38
- return ascendingSortableLabelText || 'ascending';
38
+ return ascendingSortableLabelText;
39
39
  }
40
40
  if (isSorted && isSortedDesc) {
41
- return descendingSortableLabelText || 'descending';
41
+ return descendingSortableLabelText;
42
42
  }
43
43
  };
44
44
  var getAriaPressedValue = function getAriaPressedValue(col) {
@@ -73,37 +73,26 @@ var useSortableColumns = function useSortableColumns(hooks) {
73
73
  };
74
74
  var sortableColumns = visibleColumns.map(function (column) {
75
75
  var icon = function icon(col, props) {
76
+ var iconProps = _objectSpread(_objectSpread({
77
+ size: 16
78
+ }, props), {}, {
79
+ className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
80
+ });
76
81
  if (col !== null && col !== void 0 && col.isSorted) {
77
82
  switch (col.isSortedDesc) {
78
83
  case false:
79
- return /*#__PURE__*/React.createElement(ArrowUp, _extends({
80
- size: 16
81
- }, props, {
82
- className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
83
- }));
84
+ return /*#__PURE__*/React.createElement(ArrowUp, iconProps);
84
85
  case true:
85
- return /*#__PURE__*/React.createElement(ArrowDown, _extends({
86
- size: 16
87
- }, props, {
88
- className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
89
- }));
86
+ return /*#__PURE__*/React.createElement(ArrowDown, iconProps);
90
87
  default:
91
- return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
92
- size: 16
93
- }, props, {
94
- className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
95
- }));
88
+ return /*#__PURE__*/React.createElement(ArrowsVertical, iconProps);
96
89
  }
97
90
  }
98
- return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
99
- size: 16
100
- }, props, {
101
- className: "".concat(blockClass, "__sortable-icon ").concat(carbon.prefix, "--btn__icon")
102
- }));
91
+ return /*#__PURE__*/React.createElement(ArrowsVertical, iconProps);
103
92
  };
104
93
  var Header = function Header(headerProp) {
105
94
  var _cx;
106
- return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
95
+ return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React.createElement(SelectAll, instance) : /*#__PURE__*/React.createElement(Button, {
107
96
  "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
108
97
  ascendingSortableLabelText: ascendingSortableLabelText,
109
98
  descendingSortableLabelText: descendingSortableLabelText,
@@ -101,38 +101,32 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
101
101
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
102
102
  while (1) switch (_context2.prev = _context2.next) {
103
103
  case 0:
104
- if (!(componentName === 'CreateFullPage')) {
105
- _context2.next = 2;
106
- break;
107
- }
108
- return _context2.abrupt("return");
109
- case 2:
110
- setLoadingPrevious(true);
104
+ setLoadingPrevious === null || setLoadingPrevious === void 0 || setLoadingPrevious(true);
111
105
  if (!(typeof onPrevious === 'function')) {
112
- _context2.next = 15;
106
+ _context2.next = 13;
113
107
  break;
114
108
  }
115
- _context2.prev = 4;
116
- _context2.next = 7;
109
+ _context2.prev = 2;
110
+ _context2.next = 5;
117
111
  return onPrevious();
118
- case 7:
112
+ case 5:
119
113
  moveToPreviousStep();
120
- _context2.next = 13;
114
+ _context2.next = 11;
121
115
  break;
122
- case 10:
123
- _context2.prev = 10;
124
- _context2.t0 = _context2["catch"](4);
116
+ case 8:
117
+ _context2.prev = 8;
118
+ _context2.t0 = _context2["catch"](2);
125
119
  console.warn("".concat(componentName, " onBack error: ").concat(_context2.t0));
126
- case 13:
127
- _context2.next = 16;
120
+ case 11:
121
+ _context2.next = 14;
128
122
  break;
129
- case 15:
123
+ case 13:
130
124
  moveToPreviousStep();
131
- case 16:
125
+ case 14:
132
126
  case "end":
133
127
  return _context2.stop();
134
128
  }
135
- }, _callee2, null, [[4, 10]]);
129
+ }, _callee2, null, [[2, 8]]);
136
130
  }))).apply(this, arguments);
137
131
  };
138
132
  var handleNext = function handleNext() {
@@ -40,6 +40,10 @@ export var getNodeTextContent = function getNodeTextContent(node) {
40
40
  // Ignore any other JavaScript 'object' types.
41
41
  return '';
42
42
  }
43
+ case 'function':
44
+ {
45
+ return getNodeTextContent(node());
46
+ }
43
47
  default:
44
48
  // Ignore all other JavaScript types.
45
49
  return '';
@@ -38,9 +38,7 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
38
38
  link: emptyStateLink
39
39
  };
40
40
  var validEmptyStates = ['error', 'noData', 'notFound'];
41
- return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
42
- role: false
43
- }), {
41
+ return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
44
42
  className: "".concat(blockClass, "__empty-state-body")
45
43
  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
46
44
  colSpan: headers.length,
@@ -15,8 +15,8 @@ var _react2 = require("@carbon/react");
15
15
  var _layout = require("@carbon/layout");
16
16
  var _commonColumnIds = require("../common-column-ids");
17
17
  var _settings = require("../../../settings");
18
- var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
19
18
  var _stateReducer = require("./addons/stateReducer");
19
+ var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
20
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
21
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
22
  /**
@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
31
31
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
32
32
  var getAccessibilityProps = function getAccessibilityProps(header) {
33
33
  var props = {};
34
- var title = (0, _getColTitle.default)(header);
34
+ var title = (0, _getNodeTextContent.getNodeTextContent)(header.Header);
35
35
  if (title) {
36
36
  props.title = title;
37
37
  } else {
@@ -101,9 +101,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
101
101
  };
102
102
  // eslint-disable-next-line react-hooks/exhaustive-deps
103
103
  }, [datagridState.state.isResizing]);
104
- return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
105
- role: false
106
- }), {
104
+ return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
107
105
  className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
108
106
  ref: headRef
109
107
  }), datagridState.headers.filter(function (_ref2) {
@@ -28,9 +28,7 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
28
28
  var getTableBodyProps = datagridState.getTableBodyProps,
29
29
  rows = datagridState.rows,
30
30
  prepareRow = datagridState.prepareRow;
31
- return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps({
32
- role: false
33
- }), {
31
+ return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps(), {
34
32
  className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
35
33
  }), rows.map(function (row) {
36
34
  prepareRow(row);
@@ -97,9 +97,7 @@ var DatagridRow = function DatagridRow(datagridState) {
97
97
  var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
98
98
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
99
99
  className: rowClassNames
100
- }, row.getRowProps({
101
- role: false
102
- }), {
100
+ }, row.getRowProps(), {
103
101
  key: row.id,
104
102
  onMouseEnter: hoverHandler,
105
103
  onMouseLeave: handleMouseLeave,
@@ -108,9 +106,7 @@ var DatagridRow = function DatagridRow(datagridState) {
108
106
  onKeyUp: handleOnKeyUp
109
107
  }), row.cells.map(function (cell, index) {
110
108
  var _cell$column;
111
- var cellProps = cell.getCellProps({
112
- role: false
113
- });
109
+ var cellProps = cell.getCellProps();
114
110
  var children = cellProps.children,
115
111
  restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
116
112
  var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));
@@ -24,9 +24,7 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
24
24
  var getTableBodyProps = datagridState.getTableBodyProps,
25
25
  rows = datagridState.rows,
26
26
  prepareRow = datagridState.prepareRow;
27
- return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
28
- role: false
29
- }), {
27
+ return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
30
28
  className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
31
29
  }), rows.map(function (row) {
32
30
  prepareRow(row);
@@ -81,9 +81,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
81
81
  width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
82
82
  overflow: 'hidden'
83
83
  }
84
- }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
85
- role: false
86
- }), {
84
+ }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
87
85
  onScroll: function onScroll(e) {
88
86
  return syncScroll(e);
89
87
  }
@@ -13,9 +13,9 @@ var _react2 = require("@carbon/react");
13
13
  var _common = require("./common");
14
14
  var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
15
15
  var _settings = require("../../../../../settings");
16
- var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
17
16
  var _core = require("@dnd-kit/core");
18
17
  var _sortable = require("@dnd-kit/sortable");
18
+ var _getNodeTextContent = require("../../../../../global/js/utils/getNodeTextContent");
19
19
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
20
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
21
21
  * Copyright IBM Corp. 2023, 2023
@@ -38,12 +38,13 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
38
38
  var visibleCols = columns
39
39
  // hide the columns without Header, e.g the sticky actions, spacer
40
40
  .filter(function (colDef) {
41
- return !!(0, _getColTitle2.default)(colDef);
41
+ return (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).trim().length !== 0;
42
42
  }).filter(Boolean).filter(function (colDef) {
43
43
  return !colDef.isAction;
44
44
  }).filter(function (colDef) {
45
- var _getColTitle;
46
- return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
45
+ return colDef.id !== 'spacer';
46
+ }).filter(function (colDef) {
47
+ return filterString.length === 0 || (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).toLowerCase().includes(filterString);
47
48
  });
48
49
  var getUpdatedDragCols = function getUpdatedDragCols() {
49
50
  var tempCols = (0, _toConsumableArray2.default)(visibleCols);
@@ -76,7 +77,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
76
77
  var toVisibleIndex = columns.findIndex(function (col) {
77
78
  return matchedColsById(col, over);
78
79
  });
79
- var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromVisibleIndex]);
80
+ var colTitle = (0, _getNodeTextContent.getNodeTextContent)(updatedDragCols[fromVisibleIndex].Header);
80
81
  setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(updatedDragCols.length, "."));
81
82
  var fromIndex = columns.findIndex(function (col) {
82
83
  return matchedColsById(col, active);
@@ -91,7 +92,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
91
92
  var fromIndex = updatedDragCols.findIndex(function (col) {
92
93
  return matchedColsById(col, active);
93
94
  });
94
- var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromIndex]);
95
+ var colTitle = (0, _getNodeTextContent.getNodeTextContent)(updatedDragCols[fromIndex].Header);
95
96
  setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(updatedDragCols.length, "."));
96
97
  };
97
98
  var handleDragUpdate = function handleDragUpdate(event) {
@@ -103,7 +104,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
103
104
  var toIndex = updatedDragCols.findIndex(function (col) {
104
105
  return matchedColsById(col, over);
105
106
  });
106
- var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromIndex]);
107
+ var colTitle = (0, _getNodeTextContent.getNodeTextContent)(updatedDragCols[fromIndex].Header);
107
108
  setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
108
109
  };
109
110
  var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
@@ -166,7 +167,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
166
167
  items: updatedDragCols,
167
168
  strategy: _sortable.verticalListSortingStrategy
168
169
  }, visibleCols.map(function (colDef) {
169
- var colHeaderTitle = (0, _getColTitle2.default)(colDef);
170
+ var colHeaderTitle = (0, _getNodeTextContent.getNodeTextContent)(colDef.Header);
170
171
  var searchString = new RegExp('(' + filterString + ')');
171
172
  var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
172
173
  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;
@@ -10,12 +10,11 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _settings = require("../../../../../../settings");
13
- /*
14
- * Licensed Materials - Property of IBM
15
- * 5724-Q36
16
- * (c) Copyright IBM Corp. 2022
17
- * US Government Users Restricted Rights - Use, duplication or disclosure
18
- * restricted by GSA ADP Schedule Contract with IBM Corp.
13
+ /**
14
+ * Copyright IBM Corp. 2022, 2023
15
+ *
16
+ * This source code is licensed under the Apache-2.0 license found in the
17
+ * LICENSE file in the root directory of this source tree.
19
18
  */
20
19
 
21
20
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -29,12 +28,9 @@ var InlineEditButton = function InlineEditButton(_ref) {
29
28
  nonEditCell = _ref.nonEditCell,
30
29
  isActiveCell = _ref.isActiveCell,
31
30
  columnConfig = _ref.columnConfig,
32
- totalInlineEditColumns = _ref.totalInlineEditColumns,
33
- totalColumns = _ref.totalColumns,
34
31
  type = _ref.type;
35
- var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
36
32
  return /*#__PURE__*/_react.default.createElement("div", {
37
- className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
33
+ className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
38
34
  tabIndex: isActiveCell ? 0 : -1,
39
35
  "data-disabled": disabled || nonEditCell,
40
36
  "aria-disabled": disabled || nonEditCell,
@@ -60,8 +56,6 @@ InlineEditButton.propTypes = {
60
56
  nonEditCell: _propTypes.default.bool,
61
57
  placeholder: _propTypes.default.string,
62
58
  renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
63
- totalColumns: _propTypes.default.number,
64
- totalInlineEditColumns: _propTypes.default.number,
65
59
  type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
66
60
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
67
61
  };
@@ -41,14 +41,12 @@ var InlineEditCell = function InlineEditCell(_ref) {
41
41
  value = _ref.value,
42
42
  _ref$nonEditCell = _ref.nonEditCell,
43
43
  nonEditCell = _ref$nonEditCell === void 0 ? false : _ref$nonEditCell,
44
- totalInlineEditColumns = _ref.totalInlineEditColumns,
45
44
  type = _ref.type;
46
45
  var columnId = cell.column.id;
47
46
  var columnIndex = instance.columns.findIndex(function (col) {
48
47
  return col.id === columnId;
49
48
  });
50
49
  var cellId = "column-".concat(columnIndex, "-row-").concat(cell.row.index);
51
- var totalColumns = instance.columns.length;
52
50
  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
53
51
  state = _useContext.state,
54
52
  dispatch = _useContext.dispatch;
@@ -458,8 +456,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
458
456
  tabIndex: tabIndex,
459
457
  nonEditCell: nonEditCell,
460
458
  columnConfig: cell.column,
461
- totalInlineEditColumns: totalInlineEditColumns,
462
- totalColumns: totalColumns,
463
459
  type: type
464
460
  }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
465
461
  );
@@ -478,7 +474,6 @@ InlineEditCell.propTypes = {
478
474
  nonEditCell: _propTypes.default.bool,
479
475
  placeholder: _propTypes.default.string,
480
476
  tabIndex: _propTypes.default.number,
481
- totalInlineEditColumns: _propTypes.default.number,
482
477
  type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
483
478
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object])
484
479
  };
@@ -126,7 +126,7 @@ var DocsPage = function DocsPage() {
126
126
  title: 'Sortable columns',
127
127
  description: "To add sortable columns to your Datagrid, simply add the `useSortableColumns` hook. This will allow each column header to be clickable and sort each column in either ascending or descending order.\n- Include `useSortableColumns` hook\n ",
128
128
  source: {
129
- code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n },\n useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n "
129
+ code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n ascendingSortableLabelText: 'none',\n descendingSortableLabelText: 'ascending',\n defaultSortableLabelText: 'descending',\n },\n useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n "
130
130
  }
131
131
  }, {
132
132
  title: 'Sticky column',
@@ -19,7 +19,7 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
19
19
  var row = _ref.row,
20
20
  instance = _ref.instance;
21
21
  return [props, {
22
- selectDisabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
22
+ disabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
23
23
  }];
24
24
  };
25
25
  hooks.getRowProps.push(getRowProps);
@@ -31,14 +31,11 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
31
31
  }
32
32
  }, [usingEditableCell]);
33
33
  var addInlineEdit = function addInlineEdit(props, _ref) {
34
- var _cell$column, _instance$columns$fil;
34
+ var _cell$column;
35
35
  var cell = _ref.cell,
36
36
  instance = _ref.instance;
37
37
  var columnInlineEditConfig = cell.column.inlineEdit;
38
38
  var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 || (_cell$column = _cell$column.inlineEdit) === null || _cell$column === void 0 ? void 0 : _cell$column.type;
39
- var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
40
- return item.inlineEdit;
41
- })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;
42
39
  var renderInlineEditComponent = function renderInlineEditComponent(type) {
43
40
  return /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
44
41
  config: columnInlineEditConfig,
@@ -46,7 +43,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
46
43
  value: cell.value,
47
44
  cell: cell,
48
45
  instance: instance,
49
- totalInlineEditColumns: totalInlineEditColumns,
50
46
  type: type
51
47
  });
52
48
  };
@@ -66,7 +62,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
66
62
  instance: instance,
67
63
  disabled: true,
68
64
  nonEditCell: true,
69
- totalInlineEditColumns: totalInlineEditColumns,
70
65
  type: "text"
71
66
  }))
72
67
  }];
@@ -95,7 +95,7 @@ var SelectRow = function SelectRow(datagridState) {
95
95
  return window.removeEventListener('resize', updateSize);
96
96
  };
97
97
  }, []);
98
- var selectDisabled = isFetching || row.getRowProps().selectDisabled;
98
+ var selectDisabled = isFetching || row.getRowProps().disabled;
99
99
  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
100
100
  onChange = _row$getToggleRowSele.onChange,
101
101
  selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
10
  var _react = _interopRequireDefault(require("react"));
12
11
  var _classnames = _interopRequireDefault(require("classnames"));
13
12
  var _settings = require("../../settings");
14
13
  var _react2 = require("@carbon/react");
15
14
  var _icons = require("@carbon/react/icons");
15
+ var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
16
16
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
17
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
18
18
  * Copyright IBM Corp. 2020, 2023
@@ -37,13 +37,13 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
37
37
  isSorted = _ref2.isSorted,
38
38
  isSortedDesc = _ref2.isSortedDesc;
39
39
  if (!isSorted) {
40
- return defaultSortableLabelText || 'none';
40
+ return defaultSortableLabelText;
41
41
  }
42
42
  if (isSorted && !isSortedDesc) {
43
- return ascendingSortableLabelText || 'ascending';
43
+ return ascendingSortableLabelText;
44
44
  }
45
45
  if (isSorted && isSortedDesc) {
46
- return descendingSortableLabelText || 'descending';
46
+ return descendingSortableLabelText;
47
47
  }
48
48
  };
49
49
  var getAriaPressedValue = function getAriaPressedValue(col) {
@@ -78,37 +78,26 @@ var useSortableColumns = function useSortableColumns(hooks) {
78
78
  };
79
79
  var sortableColumns = visibleColumns.map(function (column) {
80
80
  var icon = function icon(col, props) {
81
+ var iconProps = _objectSpread(_objectSpread({
82
+ size: 16
83
+ }, props), {}, {
84
+ className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
85
+ });
81
86
  if (col !== null && col !== void 0 && col.isSorted) {
82
87
  switch (col.isSortedDesc) {
83
88
  case false:
84
- return /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, (0, _extends2.default)({
85
- size: 16
86
- }, props, {
87
- className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
88
- }));
89
+ return /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, iconProps);
89
90
  case true:
90
- return /*#__PURE__*/_react.default.createElement(_icons.ArrowDown, (0, _extends2.default)({
91
- size: 16
92
- }, props, {
93
- className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
94
- }));
91
+ return /*#__PURE__*/_react.default.createElement(_icons.ArrowDown, iconProps);
95
92
  default:
96
- return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
97
- size: 16
98
- }, props, {
99
- className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
100
- }));
93
+ return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, iconProps);
101
94
  }
102
95
  }
103
- return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
104
- size: 16
105
- }, props, {
106
- className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
107
- }));
96
+ return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, iconProps);
108
97
  };
109
98
  var Header = function Header(headerProp) {
110
99
  var _cx;
111
- return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
100
+ return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/_react.default.createElement(_react2.Button, {
112
101
  "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
113
102
  ascendingSortableLabelText: ascendingSortableLabelText,
114
103
  descendingSortableLabelText: descendingSortableLabelText,