@carbon/ibm-products 2.49.1 → 2.50.0-rc.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 (118) hide show
  1. package/css/index-full-carbon.css +1180 -1148
  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-released-only.css +3 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +5 -0
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +27 -20
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AboutModal/AboutModal.js +23 -6
  18. package/es/components/ActionBar/ActionBar.d.ts +5 -1
  19. package/es/components/ActionBar/ActionBar.js +13 -3
  20. package/es/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  21. package/es/components/ActionBar/ActionBarOverflowItems.js +13 -3
  22. package/es/components/Carousel/Carousel.js +1 -2
  23. package/es/components/Coachmark/CoachmarkDragbar.js +0 -1
  24. package/es/components/Coachmark/CoachmarkHeader.js +0 -1
  25. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  26. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +0 -1
  27. package/es/components/CoachmarkStack/CoachmarkStackHome.js +1 -2
  28. package/es/components/ConditionBuilder/ConditionBuilder.js +1 -3
  29. package/es/components/CreateTearsheet/CreateTearsheet.d.ts +6 -0
  30. package/es/components/CreateTearsheet/CreateTearsheet.js +13 -1
  31. package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +18 -0
  32. package/es/components/CreateTearsheet/CreateTearsheetStep.js +30 -3
  33. package/es/components/Datagrid/Datagrid/DatagridContent.js +4 -1
  34. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -21
  35. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  36. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  37. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +4 -1
  38. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +3 -1
  39. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  40. package/es/components/Datagrid/Datagrid/addons/stateReducer.d.ts +7 -0
  41. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +99 -41
  42. package/es/components/Datagrid/types/index.d.ts +2 -0
  43. package/es/components/Datagrid/useDisableSelectRows.js +18 -3
  44. package/es/components/Datagrid/useFlexResize.d.ts +0 -6
  45. package/es/components/Datagrid/useFlexResize.js +33 -17
  46. package/es/components/Datagrid/useNestedRowExpander.js +12 -8
  47. package/es/components/Datagrid/useSortableColumns.js +2 -1
  48. package/es/components/EditUpdateCards/EditUpdateCards.d.ts +1 -1
  49. package/es/components/EditUpdateCards/EditUpdateCards.js +1 -2
  50. package/es/components/PageHeader/PageHeader.js +12 -2
  51. package/es/components/PageHeader/PageHeaderUtils.js +0 -5
  52. package/es/components/SidePanel/SidePanel.js +6 -6
  53. package/es/components/TagOverflow/TagOverflow.d.ts +1 -1
  54. package/es/components/TagOverflow/TagOverflow.js +1 -2
  55. package/es/components/TagSet/TagSet.d.ts +8 -6
  56. package/es/components/TagSet/TagSet.js +38 -30
  57. package/es/components/TagSet/TagSetOverflow.d.ts +4 -0
  58. package/es/components/TagSet/TagSetOverflow.js +8 -2
  59. package/es/components/Tearsheet/Tearsheet.d.ts +1 -1
  60. package/es/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  61. package/es/components/Tearsheet/TearsheetShell.d.ts +1 -1
  62. package/es/components/Tearsheet/TearsheetShell.js +2 -1
  63. package/es/global/js/hooks/useCreateComponentStepChange.d.ts +3 -1
  64. package/es/global/js/hooks/useCreateComponentStepChange.js +18 -2
  65. package/es/global/js/utils/Wrap.d.ts +4 -0
  66. package/lib/components/AboutModal/AboutModal.js +22 -5
  67. package/lib/components/ActionBar/ActionBar.d.ts +5 -1
  68. package/lib/components/ActionBar/ActionBar.js +13 -3
  69. package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  70. package/lib/components/ActionBar/ActionBarOverflowItems.js +13 -3
  71. package/lib/components/Carousel/Carousel.js +1 -2
  72. package/lib/components/Coachmark/CoachmarkDragbar.js +0 -1
  73. package/lib/components/Coachmark/CoachmarkHeader.js +0 -1
  74. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  75. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +0 -1
  76. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +1 -2
  77. package/lib/components/ConditionBuilder/ConditionBuilder.js +1 -3
  78. package/lib/components/CreateTearsheet/CreateTearsheet.d.ts +6 -0
  79. package/lib/components/CreateTearsheet/CreateTearsheet.js +13 -1
  80. package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +18 -0
  81. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +29 -2
  82. package/lib/components/Datagrid/Datagrid/DatagridContent.js +4 -1
  83. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +3 -20
  84. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  85. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  86. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +4 -1
  87. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +3 -1
  88. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  89. package/lib/components/Datagrid/Datagrid/addons/stateReducer.d.ts +7 -0
  90. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +99 -40
  91. package/lib/components/Datagrid/types/index.d.ts +2 -0
  92. package/lib/components/Datagrid/useDisableSelectRows.js +18 -3
  93. package/lib/components/Datagrid/useFlexResize.d.ts +0 -6
  94. package/lib/components/Datagrid/useFlexResize.js +32 -16
  95. package/lib/components/Datagrid/useNestedRowExpander.js +12 -8
  96. package/lib/components/Datagrid/useSortableColumns.js +2 -1
  97. package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +1 -1
  98. package/lib/components/EditUpdateCards/EditUpdateCards.js +1 -2
  99. package/lib/components/PageHeader/PageHeader.js +11 -1
  100. package/lib/components/PageHeader/PageHeaderUtils.js +0 -5
  101. package/lib/components/SidePanel/SidePanel.js +6 -6
  102. package/lib/components/TagOverflow/TagOverflow.d.ts +1 -1
  103. package/lib/components/TagOverflow/TagOverflow.js +1 -2
  104. package/lib/components/TagSet/TagSet.d.ts +8 -6
  105. package/lib/components/TagSet/TagSet.js +38 -30
  106. package/lib/components/TagSet/TagSetOverflow.d.ts +4 -0
  107. package/lib/components/TagSet/TagSetOverflow.js +8 -2
  108. package/lib/components/Tearsheet/Tearsheet.d.ts +1 -1
  109. package/lib/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  110. package/lib/components/Tearsheet/TearsheetShell.d.ts +1 -1
  111. package/lib/components/Tearsheet/TearsheetShell.js +2 -1
  112. package/lib/global/js/hooks/useCreateComponentStepChange.d.ts +3 -1
  113. package/lib/global/js/hooks/useCreateComponentStepChange.js +18 -2
  114. package/lib/global/js/utils/Wrap.d.ts +4 -0
  115. package/package.json +12 -12
  116. package/scss/components/Datagrid/styles/_useSortableColumns.scss +1 -0
  117. package/scss/components/Tearsheet/_tearsheet.scss +2 -0
  118. package/telemetry.yml +6 -0
@@ -32,7 +32,7 @@ var RowSizeRadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
32
32
  ref: ref
33
33
  }, /*#__PURE__*/React__default.createElement(RadioButtonGroup, {
34
34
  legendText: legendText,
35
- name: "row-height-group",
35
+ name: "".concat(tableId, "--row-height-group"),
36
36
  orientation: "vertical",
37
37
  defaultSelected: getBackwardCompatibleRowSize(selectedOption),
38
38
  onChange: onChange
@@ -14,6 +14,13 @@ export function handleSelectAllRowData({ dispatch, rows, getRowId, indeterminate
14
14
  indeterminate: any;
15
15
  isChecked: any;
16
16
  }): any;
17
+ export function handleOnPageSelectAllRowData({ dispatch, rows, getRowId, indeterminate, isChecked, }: {
18
+ dispatch: any;
19
+ rows: any;
20
+ getRowId: any;
21
+ indeterminate: any;
22
+ isChecked: any;
23
+ }): any;
17
24
  export function handleDynamicRowCheck({ dispatch, status, rowId, depth, index, }: {
18
25
  dispatch: any;
19
26
  status: any;
@@ -12,8 +12,9 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
12
12
  var COLUMN_RESIZING = 'columnResizing';
13
13
  var COLUMN_RESIZE_END = 'columnDoneResizing';
14
14
  var INIT = 'init';
15
- var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
16
- var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected';
15
+ var TOGGLE_ROW_SELECTED = 'toggleRowSelected'; // selects individual row
16
+ var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected'; // selects all rows in entire table
17
+ var TOGGLE_ON_PAGE_ALL_ROWS_SELECTED = 'toggleAllRowsOnPageSelected'; // selects all rows in the current page
17
18
  var DYNAMIC_ROW_CHECK = 'dynamicRowCheck';
18
19
  var blockClass = "".concat(pkg.prefix, "--datagrid");
19
20
  var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
@@ -78,12 +79,28 @@ var handleSelectAllRowData = function handleSelectAllRowData(_ref2) {
78
79
  }
79
80
  });
80
81
  };
81
- var handleDynamicRowCheck = function handleDynamicRowCheck(_ref3) {
82
+ var handleOnPageSelectAllRowData = function handleOnPageSelectAllRowData(_ref3) {
82
83
  var dispatch = _ref3.dispatch,
83
- status = _ref3.status,
84
- rowId = _ref3.rowId,
85
- depth = _ref3.depth,
86
- index = _ref3.index;
84
+ rows = _ref3.rows,
85
+ getRowId = _ref3.getRowId,
86
+ indeterminate = _ref3.indeterminate,
87
+ isChecked = _ref3.isChecked;
88
+ return dispatch({
89
+ type: TOGGLE_ON_PAGE_ALL_ROWS_SELECTED,
90
+ payload: {
91
+ rows: rows,
92
+ getRowId: getRowId,
93
+ indeterminate: indeterminate,
94
+ isChecked: isChecked
95
+ }
96
+ });
97
+ };
98
+ var handleDynamicRowCheck = function handleDynamicRowCheck(_ref4) {
99
+ var dispatch = _ref4.dispatch,
100
+ status = _ref4.status,
101
+ rowId = _ref4.rowId,
102
+ depth = _ref4.depth,
103
+ index = _ref4.index;
87
104
  return dispatch({
88
105
  type: DYNAMIC_ROW_CHECK,
89
106
  payload: {
@@ -124,18 +141,20 @@ var stateReducer = function stateReducer(newState, action) {
124
141
  }
125
142
  case TOGGLE_ALL_ROWS_SELECTED:
126
143
  {
127
- var _ref4 = action.payload || {},
128
- rows = _ref4.rows,
129
- getRowId = _ref4.getRowId,
130
- indeterminate = _ref4.indeterminate,
131
- isChecked = _ref4.isChecked;
144
+ var _ref5 = action.payload || {},
145
+ rows = _ref5.rows,
146
+ getRowId = _ref5.getRowId,
147
+ indeterminate = _ref5.indeterminate,
148
+ isChecked = _ref5.isChecked;
132
149
  var newSelectedRowIds = {};
133
150
  if (rows) {
151
+ var _rows$find, _rows$find$getRowProp;
134
152
  var newSelectedRowData = {};
153
+ var nonSelectableRows = ((_rows$find = rows.find(function (row) {
154
+ return row.getRowProps;
155
+ })) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.nonselectablerows) || [];
135
156
  rows.forEach(function (row) {
136
- var _row$getRowProps;
137
- var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
138
- if (props && props.disabled) {
157
+ if (nonSelectableRows.length > 0 && nonSelectableRows.includes(row.id)) {
139
158
  return;
140
159
  }
141
160
  newSelectedRowIds[getRowId(row.original, row.index)] = true;
@@ -148,26 +167,65 @@ var stateReducer = function stateReducer(newState, action) {
148
167
  }
149
168
  return _objectSpread2({}, newState);
150
169
  }
170
+ case TOGGLE_ON_PAGE_ALL_ROWS_SELECTED:
171
+ {
172
+ var _ref6 = action.payload || {},
173
+ _rows = _ref6.rows,
174
+ _getRowId = _ref6.getRowId,
175
+ _indeterminate = _ref6.indeterminate,
176
+ _isChecked = _ref6.isChecked;
177
+ var previousSelectedRowIds = newState.selectedRowIds || {};
178
+ var previousSelectedRowData = newState.selectedRowData || {};
179
+ var _newSelectedRowIds = {};
180
+ if (_rows) {
181
+ var _newSelectedRowData = {};
182
+ _rows.forEach(function (row) {
183
+ var _row$getRowProps;
184
+ var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
185
+ if (props && props.disabled) {
186
+ return;
187
+ }
188
+ if (props) {
189
+ if (!_indeterminate && _isChecked) {
190
+ // adds selection to newly selected rows
191
+ _newSelectedRowIds[_getRowId(row.original, row.index)] = true;
192
+ _newSelectedRowData[_getRowId(row.original, row.index)] = row.original;
193
+ } else {
194
+ // removes selection from previously selected rows
195
+ delete previousSelectedRowIds[_getRowId(row.original, row.index)];
196
+ delete previousSelectedRowData[_getRowId(row.original, row.index)];
197
+ }
198
+ }
199
+ });
200
+ var finalSelectedRowIds = _objectSpread2(_objectSpread2({}, previousSelectedRowIds), _newSelectedRowIds);
201
+ var finalSelectedRowData = _objectSpread2(_objectSpread2({}, previousSelectedRowData), _newSelectedRowData);
202
+ return _objectSpread2(_objectSpread2({}, newState), {}, {
203
+ selectedRowIds: finalSelectedRowIds,
204
+ selectedRowData: finalSelectedRowData
205
+ });
206
+ }
207
+ return _objectSpread2({}, newState);
208
+ }
151
209
  case TOGGLE_ROW_SELECTED:
152
210
  {
153
- var _ref5 = action.payload || {},
154
- rowData = _ref5.rowData,
155
- _isChecked = _ref5.isChecked,
156
- _getRowId = _ref5.getRowId;
211
+ var _ref7 = action.payload || {},
212
+ rowData = _ref7.rowData,
213
+ _isChecked2 = _ref7.isChecked,
214
+ _getRowId2 = _ref7.getRowId;
157
215
  if (!rowData) {
158
216
  return;
159
217
  }
160
- if (_isChecked) {
218
+ if (_isChecked2) {
161
219
  return _objectSpread2(_objectSpread2({}, newState), {}, {
162
- selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
220
+ selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId2(rowData.original, rowData.index), rowData.original))
163
221
  });
164
222
  }
165
- if (rowData && !_isChecked) {
223
+ if (rowData && !_isChecked2) {
166
224
  var newData = _objectSpread2({}, newState.selectedRowData);
167
- var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref6) {
168
- var _ref7 = _slicedToArray(_ref6, 1),
169
- key = _ref7[0];
170
- return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
225
+ var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref8) {
226
+ var _ref9 = _slicedToArray(_ref8, 1),
227
+ key = _ref9[0];
228
+ return parseInt(key) !== parseInt(_getRowId2(rowData.original, rowData.index));
171
229
  }));
172
230
  return _objectSpread2(_objectSpread2({}, newState), {}, {
173
231
  selectedRowData: dataWithRemovedRow
@@ -183,27 +241,27 @@ var stateReducer = function stateReducer(newState, action) {
183
241
  }
184
242
  case COLUMN_RESIZE_START:
185
243
  {
186
- var _ref8 = action.payload || {},
187
- headerId = _ref8.headerId;
244
+ var _ref10 = action.payload || {},
245
+ headerId = _ref10.headerId;
188
246
  return _objectSpread2(_objectSpread2({}, newState), {}, {
189
247
  isResizing: headerId
190
248
  });
191
249
  }
192
250
  case COLUMN_RESIZING:
193
251
  {
194
- var _ref9 = action.payload || {},
195
- _headerId = _ref9.headerId,
196
- newWidth = _ref9.newWidth,
197
- defaultWidth = _ref9.defaultWidth;
252
+ var _ref11 = action.payload || {},
253
+ _headerId = _ref11.headerId,
254
+ newWidth = _ref11.newWidth,
255
+ defaultWidth = _ref11.defaultWidth;
198
256
  var newColumnWidth = {};
199
257
  if (typeof _headerId === 'undefined') {
200
258
  return _objectSpread2({}, newState);
201
259
  }
202
260
  newColumnWidth[_headerId] = newWidth;
203
- var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref10) {
204
- var _ref11 = _slicedToArray(_ref10, 2);
205
- _ref11[0];
206
- var value = _ref11[1];
261
+ var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref12) {
262
+ var _ref13 = _slicedToArray(_ref12, 2);
263
+ _ref13[0];
264
+ var value = _ref13[1];
207
265
  return !isNaN(value);
208
266
  }));
209
267
  var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -218,10 +276,10 @@ var stateReducer = function stateReducer(newState, action) {
218
276
  }
219
277
  case COLUMN_RESIZE_END:
220
278
  {
221
- var _ref12 = action.payload || {},
222
- onColResizeEnd = _ref12.onColResizeEnd,
223
- _headerId2 = _ref12.headerId,
224
- isKeyEvent = _ref12.isKeyEvent;
279
+ var _ref14 = action.payload || {},
280
+ onColResizeEnd = _ref14.onColResizeEnd,
281
+ _headerId2 = _ref14.headerId,
282
+ isKeyEvent = _ref14.isKeyEvent;
225
283
  var currentColumn = {};
226
284
  currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
227
285
  var allChangedColumns = newState.columnResizing.columnWidths;
@@ -247,4 +305,4 @@ var stateReducer = function stateReducer(newState, action) {
247
305
  }
248
306
  };
249
307
 
250
- export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleDynamicRowCheck, handleSelectAllRowData, handleToggleRowSelected, stateReducer };
308
+ export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleDynamicRowCheck, handleOnPageSelectAllRowData, handleSelectAllRowData, handleToggleRowSelected, stateReducer };
@@ -87,6 +87,7 @@ export interface FilterFlyoutProps {
87
87
  flyoutIconDescription?: string;
88
88
  onFlyoutClose?: () => void;
89
89
  onFlyoutOpen?: () => void;
90
+ onClearFilters?: () => void;
90
91
  panelIconDescription?: string;
91
92
  primaryActionLabel?: string;
92
93
  reactTableFiltersState?: ReactTableFiltersState[];
@@ -248,6 +249,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
248
249
  onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
249
250
  ExpandedRowContentComponent?: JSXElementConstructor<any>;
250
251
  getAsyncSubRows?: (row: DatagridRow) => void;
252
+ enableSpacerColumn?: boolean;
251
253
  }
252
254
  export interface DataGridData {
253
255
  instance?: DataGridTableInstance;
@@ -5,24 +5,39 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
+ var nonselectablerowsList = function nonselectablerowsList(instance) {
9
+ var _instance$rows;
10
+ var nonselectablerows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
11
+ return instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row);
12
+ }).map(function (row) {
13
+ return row.id;
14
+ })) || [];
15
+ return nonselectablerows;
16
+ };
8
17
  var useDisableSelectRows = function useDisableSelectRows(hooks) {
9
18
  updateSelectAll(hooks);
10
19
  updatePageSelectAll(hooks);
20
+ var nonselectablerows = [];
21
+ var useInstance = function useInstance(instance) {
22
+ nonselectablerows = nonselectablerowsList(instance);
23
+ };
24
+ hooks.useInstance.push(useInstance);
11
25
  var getRowProps = function getRowProps(props, _ref) {
12
26
  var _instance$shouldDisab;
13
27
  var row = _ref.row,
14
28
  instance = _ref.instance;
15
29
  return [props, {
16
- disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
30
+ disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
31
+ nonselectablerows: nonselectablerows
17
32
  }];
18
33
  };
19
34
  hooks.getRowProps.push(getRowProps);
20
35
  };
21
36
  var updateSelectAll = function updateSelectAll(hooks) {
22
37
  var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
23
- var _instance$rows, _instance$disableSele, _instance$state2;
38
+ var _instance$rows2, _instance$disableSele, _instance$state2;
24
39
  var instance = _ref2.instance;
25
- var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
40
+ var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
26
41
  return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
27
42
  })) || [];
28
43
  var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
@@ -1,8 +1,2 @@
1
1
  export default useFlexResize;
2
- /**
3
- * Copyright IBM Corp. 2020, 2024
4
- *
5
- * This source code is licensed under the Apache-2.0 license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
2
  declare function useFlexResize(hooks: any): void;
@@ -5,33 +5,48 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
-
10
- /* eslint-disable no-unreachable */
11
- /**
12
- * Copyright IBM Corp. 2020, 2024
13
- *
14
- * This source code is licensed under the Apache-2.0 license found in the
15
- * LICENSE file in the root directory of this source tree.
16
- */
8
+ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import { useState, useEffect } from 'react';
17
10
 
18
11
  var useFlexResize = function useFlexResize(hooks) {
12
+ var _useState = useState(),
13
+ _useState2 = _slicedToArray(_useState, 2),
14
+ spacerColumn = _useState2[0],
15
+ setSpacerColumn = _useState2[1];
16
+ var useInstance = function useInstance(instance) {
17
+ var enableSpacerColumn = instance.enableSpacerColumn;
18
+ useEffect(function () {
19
+ setSpacerColumn(enableSpacerColumn);
20
+ });
21
+ };
22
+ var spacer = {
23
+ id: 'spacer',
24
+ width: 0,
25
+ disableSortBy: true,
26
+ disableResizing: true
27
+ };
19
28
  hooks.visibleColumns.push(function (columns) {
20
29
  // always move actions to the end
21
30
  var actionsIdx = columns.findIndex(function (col) {
22
31
  return col.isAction;
23
32
  });
24
- if (actionsIdx === -1) {
25
- var _lastCol = columns.at(-1);
26
- _lastCol.isFlexCol = true;
33
+ if (!spacerColumn && actionsIdx === -1) {
34
+ var lastCol = columns.at(-1);
35
+ lastCol.isFlexCol = true;
27
36
  return _toConsumableArray(columns);
37
+ } else if (spacerColumn & actionsIdx === -1) {
38
+ return [].concat(_toConsumableArray(columns), [spacer]);
28
39
  }
29
40
  var cols = _toConsumableArray(columns);
30
41
  var actions = cols.splice(actionsIdx, 1)[0];
31
- cols.splice(columns.length, 0, actions);
32
- // the last non-action action column should flex remaining space
33
- var lastCol = columns.at(-2);
34
- lastCol.isFlexCol = true;
42
+ if (spacerColumn) {
43
+ cols.splice(columns.length, 0, spacer, actions);
44
+ } else {
45
+ cols.splice(columns.length, 0, actions);
46
+ // the last non-action action column should flex remaining space
47
+ var _lastCol = columns.at(-2);
48
+ _lastCol.isFlexCol = true;
49
+ }
35
50
  return cols;
36
51
  });
37
52
  var changeProps = function changeProps(props, data) {
@@ -39,7 +54,7 @@ var useFlexResize = function useFlexResize(hooks) {
39
54
  if (!column && data.cell) {
40
55
  column = data.cell.column;
41
56
  }
42
- if (column.isFlexCol) {
57
+ if (column.isFlexCol || column.id === spacer.id) {
43
58
  return [props, {
44
59
  style: {
45
60
  flex: '1 1 0'
@@ -58,6 +73,7 @@ var useFlexResize = function useFlexResize(hooks) {
58
73
  hooks.getCellProps.push(function (props, data) {
59
74
  return changeProps(props, data);
60
75
  });
76
+ hooks.useInstance.push(useInstance);
61
77
  };
62
78
  var useFlexResize$1 = useFlexResize;
63
79
 
@@ -48,7 +48,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
48
48
  row.toggleRowExpanded();
49
49
  lastExpandedRowIndex.current = row.id;
50
50
  if (row.isExpanded) {
51
- _context.next = 14;
51
+ _context.next = 15;
52
52
  break;
53
53
  }
54
54
  _context.prev = 4;
@@ -59,27 +59,31 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
59
59
  depth: row.depth,
60
60
  index: row.index
61
61
  });
62
- _context.next = 8;
62
+ if (!getAsyncSubRows) {
63
+ _context.next = 9;
64
+ break;
65
+ }
66
+ _context.next = 9;
63
67
  return getAsyncSubRows === null || getAsyncSubRows === void 0 ? void 0 : getAsyncSubRows(row);
64
- case 8:
68
+ case 9:
65
69
  handleDynamicRowCheck({
66
70
  dispatch: dispatch,
67
71
  status: 'finish',
68
72
  rowId: row.id
69
73
  });
70
- _context.next = 14;
74
+ _context.next = 15;
71
75
  break;
72
- case 11:
73
- _context.prev = 11;
76
+ case 12:
77
+ _context.prev = 12;
74
78
  _context.t0 = _context["catch"](4);
75
79
  console.log({
76
80
  error: _context.t0
77
81
  });
78
- case 14:
82
+ case 15:
79
83
  case "end":
80
84
  return _context.stop();
81
85
  }
82
- }, _callee, null, [[4, 11]]);
86
+ }, _callee, null, [[4, 12]]);
83
87
  }));
84
88
  function onClick(_x) {
85
89
  return _onClick.apply(this, arguments);
@@ -95,6 +95,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
95
95
  instance.toggleSortBy(key, newSortDesc, false);
96
96
  };
97
97
  var sortableColumns = visibleColumns.map(function (column) {
98
+ var _column$minWidth;
98
99
  var icon = function icon(col, props) {
99
100
  var iconProps = _objectSpread2(_objectSpread2({
100
101
  size: 16
@@ -149,7 +150,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
149
150
  };
150
151
  return _objectSpread2(_objectSpread2({}, column), {}, {
151
152
  Header: Header,
152
- minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
153
+ minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
153
154
  });
154
155
  });
155
156
  return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2022, 2022
2
+ * Copyright IBM Corp. 2022, 2024
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -83,8 +83,7 @@ var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
83
83
  className, // Apply any supplied class names to the main HTML element.
84
84
  // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
85
85
  _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
86
- ref: ref,
87
- role: "main"
86
+ ref: ref
88
87
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(ProductiveCard, _extends({
89
88
  actionIcons: actionIcons,
90
89
  actionsPlacement: actionsPlacement,
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import { Button, Tooltip, Tag, FlexGrid, Row, Column } from '@carbon/react';
9
+ import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
10
10
  import React__default, { useState, useRef, useEffect } from 'react';
11
11
  import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
12
12
  import { breakpoints, spacing10, baseFontSize } from '@carbon/layout';
@@ -93,6 +93,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
93
93
  var headerRef = ref || localHeaderRef;
94
94
  var sizingContainerRef = useRef(null);
95
95
  var offsetTopMeasuringRef = useRef(null);
96
+ var overflowMenuRef = useRef(null);
96
97
 
97
98
  // state based on props only
98
99
  var hasActionBar = actionBarItems && actionBarItems.length > 0;
@@ -166,14 +167,22 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
166
167
  _useState26 = _slicedToArray(_useState25, 2),
167
168
  widthIsNarrow = _useState26[0],
168
169
  setWidthIsNarrow = _useState26[1];
170
+ var prefix = usePrefix();
169
171
 
170
172
  // handlers
171
173
  var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
174
+ var _overflowMenuRef$curr;
172
175
  var minWidth = _ref2.minWidth,
173
176
  maxWidth = _ref2.maxWidth;
177
+ var overflowMenuWidth = 0;
178
+ var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
179
+ if (overflowMenu) {
180
+ overflowMenuWidth = overflowMenu.offsetWidth;
181
+ }
182
+
174
183
  /* don't know how to test resize */
175
184
  /* istanbul ignore next */
176
- setActionBarMaxWidth(maxWidth);
185
+ setActionBarMaxWidth(maxWidth + overflowMenuWidth);
177
186
  /* don't know how to test resize */
178
187
  /* istanbul ignore next */
179
188
  setActionBarMinWidth(minWidth);
@@ -391,6 +400,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
391
400
  menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
392
401
  onWidthChange: handleActionBarWidthChange,
393
402
  overflowAriaLabel: actionBarOverflowAriaLabel,
403
+ overflowMenuRef: overflowMenuRef,
394
404
  rightAlign: true
395
405
  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
396
406
  className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
@@ -98,11 +98,6 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
98
98
  // adjust top for sticky with navigation
99
99
  update.headerTopValue += update.navigationRowHeight;
100
100
  }
101
- if (!hasActionBar && !widthIsNarrow) {
102
- // Add difference between $spacing-08 and $spacing-07 to ensure space below breadcrumb is correct on scroll
103
- // $spacing-07 is used as size for breadcrumb when no action bar otherwise $spacing-08
104
- update.headerTopValue += 8;
105
- }
106
101
  if (!enableBreadcrumbScroll || !navigation) {
107
102
  // adjust sticky top if no navigation or breadcrumb is to stay on screen
108
103
  update.headerTopValue += update.breadcrumbRowHeight;
@@ -21,8 +21,8 @@ import { moderate02 } from '@carbon/motion';
21
21
  import pconsole from '../../global/js/utils/pconsole.js';
22
22
  import { pkg } from '../../settings.js';
23
23
  import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
24
+ import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
24
25
  import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
25
- import { useFocus } from '../../global/js/hooks/useFocus.js';
26
26
 
27
27
  var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
28
28
  _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
@@ -321,10 +321,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
321
321
  useEffect(function () {
322
322
  if (open) {
323
323
  setTimeout(function () {
324
- if (selectorPrimaryFocus) {
325
- var _document;
326
- var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
327
- if (primeFocusEl) {
324
+ if (selectorPrimaryFocus && getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
325
+ var _window2;
326
+ var primeFocusEl = getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
327
+ if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
328
328
  primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
329
329
  }
330
330
  } else if (!slideIn) {
@@ -332,7 +332,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
332
332
  }
333
333
  }, 0);
334
334
  }
335
- }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
335
+ }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
336
336
  var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
337
337
  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
338
338
  var renderTitle = function renderTitle() {
@@ -7,7 +7,7 @@
7
7
  import React, { ReactNode, RefObject } from 'react';
8
8
  export interface TagOverflowItem {
9
9
  className?: string;
10
- filter?: string;
10
+ filter?: boolean;
11
11
  id: string;
12
12
  label: string;
13
13
  onClose: () => void;
@@ -170,8 +170,7 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
170
170
  }, [visibleItems]);
171
171
  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
172
172
  className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
173
- ref: containerRef,
174
- role: "main"
173
+ ref: containerRef
175
174
  }, getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
176
175
  // Render custom components
177
176
  if (tagComponent) {
@@ -13,11 +13,11 @@ export interface TagSetProps extends PropsWithChildren {
13
13
  */
14
14
  align?: Align;
15
15
  /**
16
- * label text for the show all search. **Note: Required if more than 10 tags**
16
+ * label text for the show all search.
17
17
  */
18
18
  allTagsModalSearchLabel?: string;
19
19
  /**
20
- * placeholder text for the show all search. **Note: Required if more than 10 tags**
20
+ * placeholder text for the show all search.
21
21
  */
22
22
  allTagsModalSearchPlaceholderText?: string;
23
23
  /**
@@ -25,7 +25,7 @@ export interface TagSetProps extends PropsWithChildren {
25
25
  */
26
26
  allTagsModalTarget?: ReactNode;
27
27
  /**
28
- * title for the show all modal. **Note: Required if more than 10 tags**
28
+ * title for the show all modal.
29
29
  */
30
30
  allTagsModalTitle?: string;
31
31
  /**
@@ -58,6 +58,10 @@ export interface TagSetProps extends PropsWithChildren {
58
58
  * overflowAlign from the standard tooltip. Default center.
59
59
  */
60
60
  overflowAlign?: OverflowAlign;
61
+ /**
62
+ * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
63
+ */
64
+ overflowAutoAlign?: boolean;
61
65
  /**
62
66
  * overflowClassName for the tooltip popup
63
67
  */
@@ -68,10 +72,8 @@ export interface TagSetProps extends PropsWithChildren {
68
72
  overflowType?: OverflowType;
69
73
  /**
70
74
  * label for the overflow show all tags link.
71
- *
72
- * **Note:** Required if more than 10 tags
73
75
  */
74
- showAllTagsLabel: string;
76
+ showAllTagsLabel?: string;
75
77
  /**
76
78
  * The tags to be shown in the TagSet. Each tag is specified as an object
77
79
  * with properties: **label**\* (required) to supply the tag content, and