@carbon/ibm-products 2.20.0 → 2.21.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +19 -4
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +11 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +11 -2
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +12 -3
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +3 -4
- package/es/components/AddSelect/AddSelectBody.js +2 -2
- package/es/components/AddSelect/AddSelectRow.js +2 -2
- package/es/components/Card/Card.js +1 -2
- package/es/components/Card/CardHeader.js +1 -2
- package/es/components/CreateFullPage/CreateFullPageStep.js +1 -2
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -7
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
- package/es/components/Datagrid/Datagrid/DatagridRow.js +9 -10
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +15 -8
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
- package/es/components/Datagrid/useActionsColumn.js +1 -2
- package/es/components/Datagrid/useDefaultStringRenderer.js +1 -2
- package/es/components/Datagrid/useFiltering.js +1 -0
- package/es/components/Datagrid/useNestedRowExpander.js +1 -2
- package/es/components/Datagrid/useNestedRows.js +49 -33
- package/es/components/Datagrid/useOnRowClick.js +1 -1
- package/es/components/Datagrid/useSelectRows.js +1 -2
- package/es/components/Datagrid/useSortableColumns.js +1 -2
- package/es/components/Datagrid/useStickyColumn.js +3 -4
- package/es/components/Datagrid/utils/filterPropsForTesting.js +149 -0
- package/es/components/EditInPlace/EditInPlace.js +1 -2
- package/es/components/EditTearsheet/EditTearsheetForm.js +1 -2
- package/es/components/FilterSummary/FilterSummary.js +15 -12
- package/es/components/NotificationsPanel/NotificationsPanel.js +2 -3
- package/es/components/PageHeader/PageHeader.js +9 -11
- package/es/components/Saving/Saving.js +6 -6
- package/es/components/SidePanel/SidePanel.js +6 -6
- package/es/components/TagSet/TagSetOverflow.js +1 -2
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +9 -9
- package/es/components/WebTerminal/WebTerminal.js +1 -2
- package/lib/components/ActionSet/ActionSet.js +3 -4
- package/lib/components/AddSelect/AddSelectBody.js +2 -2
- package/lib/components/AddSelect/AddSelectRow.js +2 -2
- package/lib/components/Card/Card.js +1 -2
- package/lib/components/Card/CardHeader.js +1 -2
- package/lib/components/CreateFullPage/CreateFullPageStep.js +1 -2
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -7
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +9 -10
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +15 -8
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
- package/lib/components/Datagrid/useActionsColumn.js +1 -2
- package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -2
- package/lib/components/Datagrid/useFiltering.js +1 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -2
- package/lib/components/Datagrid/useNestedRows.js +49 -33
- package/lib/components/Datagrid/useOnRowClick.js +1 -1
- package/lib/components/Datagrid/useSelectRows.js +1 -2
- package/lib/components/Datagrid/useSortableColumns.js +1 -2
- package/lib/components/Datagrid/useStickyColumn.js +3 -4
- package/lib/components/Datagrid/utils/filterPropsForTesting.js +156 -0
- package/lib/components/EditInPlace/EditInPlace.js +1 -2
- package/lib/components/EditTearsheet/EditTearsheetForm.js +1 -2
- package/lib/components/FilterSummary/FilterSummary.js +15 -12
- package/lib/components/NotificationsPanel/NotificationsPanel.js +2 -3
- package/lib/components/PageHeader/PageHeader.js +9 -11
- package/lib/components/Saving/Saving.js +6 -6
- package/lib/components/SidePanel/SidePanel.js +6 -6
- package/lib/components/TagSet/TagSetOverflow.js +1 -2
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +9 -9
- package/lib/components/WebTerminal/WebTerminal.js +1 -2
- package/package.json +4 -4
- package/scss/components/Saving/_saving.scss +6 -0
- package/scss/components/SidePanel/_side-panel.scss +5 -1
- package/scss/components/TagSet/_tag-set.scss +4 -1
@@ -31,7 +31,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
31
31
|
*/
|
32
32
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
33
33
|
var InlineEditCell = exports.InlineEditCell = function InlineEditCell(_ref) {
|
34
|
-
var _config$validator,
|
34
|
+
var _config$validator, _value$text;
|
35
35
|
var cell = _ref.cell,
|
36
36
|
config = _ref.config,
|
37
37
|
instance = _ref.instance,
|
@@ -446,7 +446,7 @@ var InlineEditCell = exports.InlineEditCell = function InlineEditCell(_ref) {
|
|
446
446
|
"data-inline-type": type,
|
447
447
|
onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
|
448
448
|
onKeyDown: !nonEditCell ? handleKeyDown : null,
|
449
|
-
className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (
|
449
|
+
className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
|
450
450
|
}, !inEditMode && /*#__PURE__*/_react.default.createElement(_InlineEditButton.InlineEditButton, {
|
451
451
|
isActiveCell: cellId === activeCellId,
|
452
452
|
renderIcon: setRenderIcon(),
|
@@ -43,7 +43,6 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
43
43
|
var row = cell.row,
|
44
44
|
column = cell.column;
|
45
45
|
if (column.isAction) {
|
46
|
-
var _cx3;
|
47
46
|
var isColumnSticky = !!column.sticky;
|
48
47
|
return [props, {
|
49
48
|
children: /*#__PURE__*/_react.default.createElement("div", {
|
@@ -115,7 +114,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
115
114
|
key: id
|
116
115
|
}));
|
117
116
|
})))),
|
118
|
-
className: (0, _classnames.default)((
|
117
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-column-cell"), true), "".concat(blockClass, "__cell"), true), "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky)),
|
119
118
|
style: {
|
120
119
|
width: rowActions.length > 2 || isColumnSticky ? 48 : 96
|
121
120
|
}
|
@@ -23,8 +23,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
|
|
23
23
|
var StringRenderer = function StringRenderer(tableProps) {
|
24
24
|
var _tableProps$column;
|
25
25
|
return /*#__PURE__*/_react.default.createElement("div", {
|
26
|
-
className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
|
27
|
-
title: tableProps.value
|
26
|
+
className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
|
28
27
|
}, tableProps.value);
|
29
28
|
};
|
30
29
|
var HeaderRenderer = function HeaderRenderer(header) {
|
@@ -23,6 +23,7 @@ var useFiltering = function useFiltering(hooks) {
|
|
23
23
|
(0, _react.useEffect)(function () {
|
24
24
|
_settings.pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
|
25
25
|
}, []);
|
26
|
+
/* istanbul ignore next */
|
26
27
|
var filterTypes = (0, _react.useMemo)(function () {
|
27
28
|
return {
|
28
29
|
date: function date(rows, id, _ref) {
|
@@ -40,7 +40,6 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
40
40
|
var expanderColumn = {
|
41
41
|
id: 'expander',
|
42
42
|
Cell: function Cell(_ref) {
|
43
|
-
var _cx;
|
44
43
|
var row = _ref.row;
|
45
44
|
var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
|
46
45
|
onClick: function onClick(event) {
|
@@ -63,7 +62,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
63
62
|
}, expanderButtonProps, {
|
64
63
|
title: expanderTitle
|
65
64
|
}), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
|
66
|
-
className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (
|
65
|
+
className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
|
67
66
|
}));
|
68
67
|
},
|
69
68
|
width: 48,
|
@@ -9,8 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
10
10
|
var _settings = require("../../settings");
|
11
11
|
var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
|
12
|
+
var _react = require("react");
|
12
13
|
/**
|
13
|
-
* Copyright IBM Corp. 2020,
|
14
|
+
* Copyright IBM Corp. 2020, 2024
|
14
15
|
*
|
15
16
|
* This source code is licensed under the Apache-2.0 license found in the
|
16
17
|
* LICENSE file in the root directory of this source tree.
|
@@ -19,43 +20,58 @@ var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpand
|
|
19
20
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
20
21
|
var useNestedRows = function useNestedRows(hooks) {
|
21
22
|
(0, _useNestedRowExpander.default)(hooks);
|
22
|
-
var marginLeft = 24;
|
23
|
-
var getRowProps = function getRowProps(props, _ref) {
|
24
|
-
var _cx;
|
25
|
-
var row = _ref.row;
|
26
|
-
return [props, {
|
27
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
|
28
|
-
}];
|
29
|
-
};
|
30
|
-
var getRowStyles = function getRowStyles(props, _ref2) {
|
31
|
-
var row = _ref2.row;
|
32
|
-
return [props, {
|
33
|
-
style: {
|
34
|
-
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
35
|
-
}
|
36
|
-
}];
|
37
|
-
};
|
38
|
-
var getCellProps = function getCellProps(props, _ref3) {
|
39
|
-
var cell = _ref3.cell,
|
40
|
-
instance = _ref3.instance;
|
41
|
-
// reduce the "first cell"s width to compensate added (left) margin
|
42
|
-
var isFirstCell = instance.columns.findIndex(function (c) {
|
43
|
-
return c.id === cell.column.id;
|
44
|
-
}) === 0;
|
45
|
-
return [props, {
|
46
|
-
style: {
|
47
|
-
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
48
|
-
}
|
49
|
-
}];
|
50
|
-
};
|
51
23
|
var useInstance = function useInstance(instance) {
|
24
|
+
// This useEffect will expand rows if they exist in the initialState obj
|
25
|
+
(0, _react.useEffect)(function () {
|
26
|
+
var rows = instance.rows,
|
27
|
+
initialState = instance.initialState;
|
28
|
+
var expandedRowIds = initialState.expandedRowIds;
|
29
|
+
if (expandedRowIds) {
|
30
|
+
Object.keys(expandedRowIds).forEach(function (key) {
|
31
|
+
var row = rows.filter(function (r) {
|
32
|
+
return r.id.toString() === key.toString();
|
33
|
+
});
|
34
|
+
if (row.length && key.toString() === row[0].id.toString()) {
|
35
|
+
row[0].toggleRowExpanded();
|
36
|
+
}
|
37
|
+
});
|
38
|
+
}
|
39
|
+
}, [instance]);
|
40
|
+
var marginLeft = 24;
|
41
|
+
var getRowProps = function getRowProps(props, _ref) {
|
42
|
+
var row = _ref.row;
|
43
|
+
return [props, {
|
44
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
|
45
|
+
}];
|
46
|
+
};
|
47
|
+
var getRowStyles = function getRowStyles(props, _ref2) {
|
48
|
+
var row = _ref2.row;
|
49
|
+
return [props, {
|
50
|
+
style: {
|
51
|
+
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
52
|
+
}
|
53
|
+
}];
|
54
|
+
};
|
55
|
+
var getCellProps = function getCellProps(props, _ref3) {
|
56
|
+
var cell = _ref3.cell,
|
57
|
+
instance = _ref3.instance;
|
58
|
+
// reduce the "first cell"s width to compensate added (left) margin
|
59
|
+
var isFirstCell = instance.columns.findIndex(function (c) {
|
60
|
+
return c.id === cell.column.id;
|
61
|
+
}) === 0;
|
62
|
+
return [props, {
|
63
|
+
style: {
|
64
|
+
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
65
|
+
}
|
66
|
+
}];
|
67
|
+
};
|
52
68
|
Object.assign(instance, {
|
53
69
|
withNestedRows: true
|
54
70
|
});
|
71
|
+
hooks.getRowProps.push(getRowProps);
|
72
|
+
hooks.getRowProps.push(getRowStyles);
|
73
|
+
hooks.getCellProps.push(getCellProps);
|
55
74
|
};
|
56
|
-
hooks.getRowProps.push(getRowProps);
|
57
|
-
hooks.getRowProps.push(getRowStyles);
|
58
|
-
hooks.getCellProps.push(getCellProps);
|
59
75
|
hooks.useInstance.push(useInstance);
|
60
76
|
};
|
61
77
|
var _default = exports.default = useNestedRows;
|
@@ -35,7 +35,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
|
|
35
35
|
row.classList.remove("".concat(_settings.carbon.prefix, "--data-table--selected"));
|
36
36
|
});
|
37
37
|
}
|
38
|
-
var closestRow = event.
|
38
|
+
var closestRow = event.currentTarget.closest('tr');
|
39
39
|
closestRow.classList.add("".concat(_settings.carbon.prefix, "--data-table--selected"));
|
40
40
|
if (!withSelectRows) {
|
41
41
|
instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
|
@@ -70,12 +70,11 @@ var useSelectRows = function useSelectRows(hooks) {
|
|
70
70
|
};
|
71
71
|
var useHighlightSelection = function useHighlightSelection(hooks) {
|
72
72
|
var getRowProps = function getRowProps(props, _ref) {
|
73
|
-
var _ref2;
|
74
73
|
var row = _ref.row;
|
75
74
|
var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
|
76
75
|
checked = _row$getToggleRowSele.checked;
|
77
76
|
return [props, {
|
78
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (
|
77
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
|
79
78
|
}];
|
80
79
|
};
|
81
80
|
hooks.getRowProps.push(getRowProps);
|
@@ -94,7 +94,6 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
94
94
|
return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, iconProps);
|
95
95
|
};
|
96
96
|
var Header = function Header(headerProp) {
|
97
|
-
var _cx;
|
98
97
|
return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
99
98
|
"aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
|
100
99
|
ascendingSortableLabelText: ascendingSortableLabelText,
|
@@ -109,7 +108,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
|
|
109
108
|
renderIcon: function renderIcon(props) {
|
110
109
|
return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
|
111
110
|
},
|
112
|
-
className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (
|
111
|
+
className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
|
113
112
|
}, column.Header);
|
114
113
|
};
|
115
114
|
return _objectSpread(_objectSpread({}, column), {}, {
|
@@ -148,17 +148,16 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
|
|
148
148
|
var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
|
149
149
|
var column = data.column || data.cell.column;
|
150
150
|
if (column.sticky === 'right') {
|
151
|
-
var _cx;
|
152
151
|
return [props, _objectSpread({
|
153
|
-
className: (0, _classnames.default)((
|
152
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
|
154
153
|
}, headerCellRef && {
|
155
154
|
ref: headerCellRef
|
156
155
|
})];
|
157
156
|
}
|
158
157
|
if (column.sticky === 'left') {
|
159
|
-
var _data$instance
|
158
|
+
var _data$instance;
|
160
159
|
return [props, _objectSpread({
|
161
|
-
className: (0, _classnames.default)((
|
160
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
|
162
161
|
}, headerCellRef && {
|
163
162
|
ref: headerCellRef
|
164
163
|
})];
|
@@ -0,0 +1,156 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.generateDummyCheckboxes = exports.filterProps = void 0;
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
10
|
+
var _handleFilterTagLabelText = require("./handleFilterTagLabelText");
|
11
|
+
/**
|
12
|
+
* Copyright IBM Corp. 2024, 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
|
+
*/
|
17
|
+
|
18
|
+
var generateDummyCheckboxes = exports.generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
|
19
|
+
return {
|
20
|
+
id: "".concat(index),
|
21
|
+
labelText: "Dummy checkbox ".concat(index + 1),
|
22
|
+
value: 'dummy-checkbox',
|
23
|
+
disabled: true
|
24
|
+
};
|
25
|
+
});
|
26
|
+
var filterProps = exports.filterProps = function filterProps() {
|
27
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
28
|
+
_ref$includeManyCheck = _ref.includeManyCheckboxes,
|
29
|
+
includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
|
30
|
+
_ref$dropdownOnChange = _ref.dropdownOnChange,
|
31
|
+
dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
|
32
|
+
var checkboxList = [{
|
33
|
+
id: 'normal',
|
34
|
+
labelText: 'Normal',
|
35
|
+
value: 'normal'
|
36
|
+
}, {
|
37
|
+
id: 'minor-warning',
|
38
|
+
labelText: 'Minor warning',
|
39
|
+
value: 'minor-warning'
|
40
|
+
}, {
|
41
|
+
id: 'critical',
|
42
|
+
labelText: 'Critical',
|
43
|
+
value: 'critical'
|
44
|
+
}].concat((0, _toConsumableArray2.default)(includeManyCheckboxes ? generateDummyCheckboxes : []));
|
45
|
+
return {
|
46
|
+
autoHideFilters: includeManyCheckboxes ? false : true,
|
47
|
+
variation: 'panel',
|
48
|
+
panelIconDescription: 'Open filters',
|
49
|
+
sections: [{
|
50
|
+
categoryTitle: 'Category title',
|
51
|
+
hasAccordion: true,
|
52
|
+
filters: [{
|
53
|
+
filterLabel: 'Joined',
|
54
|
+
filter: {
|
55
|
+
type: 'date',
|
56
|
+
column: 'joined',
|
57
|
+
props: {
|
58
|
+
DatePicker: {
|
59
|
+
datePickerType: 'range'
|
60
|
+
},
|
61
|
+
DatePickerInput: {
|
62
|
+
start: {
|
63
|
+
id: 'date-picker-input-id-start',
|
64
|
+
placeholder: 'mm/dd/yyyy',
|
65
|
+
labelText: 'Joined start date'
|
66
|
+
},
|
67
|
+
end: {
|
68
|
+
id: 'date-picker-input-id-end',
|
69
|
+
placeholder: 'mm/dd/yyyy',
|
70
|
+
labelText: 'Joined end date'
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}, {
|
76
|
+
filterLabel: 'Status',
|
77
|
+
filter: {
|
78
|
+
type: 'dropdown',
|
79
|
+
column: 'status',
|
80
|
+
props: {
|
81
|
+
Dropdown: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
82
|
+
id: 'marital-status-dropdown'
|
83
|
+
}, 'aria-label', 'Marital status dropdown'), "items", ['relationship', 'complicated', 'single']), "label", 'Marital status'), "titleText", 'Marital status'), "onChange", dropdownOnChange)
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}]
|
87
|
+
}, {
|
88
|
+
categoryTitle: 'Category title',
|
89
|
+
filters: [{
|
90
|
+
filterLabel: 'Role',
|
91
|
+
filter: {
|
92
|
+
type: 'radio',
|
93
|
+
column: 'role',
|
94
|
+
props: {
|
95
|
+
FormGroup: {
|
96
|
+
legendText: 'Role'
|
97
|
+
},
|
98
|
+
RadioButtonGroup: {
|
99
|
+
orientation: 'vertical',
|
100
|
+
legend: 'Role legend',
|
101
|
+
name: 'role-radio-button-group'
|
102
|
+
},
|
103
|
+
RadioButton: [{
|
104
|
+
id: 'developer',
|
105
|
+
labelText: 'Developer',
|
106
|
+
value: 'developer'
|
107
|
+
}, {
|
108
|
+
id: 'designer',
|
109
|
+
labelText: 'Designer',
|
110
|
+
value: 'designer'
|
111
|
+
}, {
|
112
|
+
id: 'researcher',
|
113
|
+
labelText: 'Researcher',
|
114
|
+
value: 'researcher'
|
115
|
+
}]
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}, {
|
119
|
+
filterLabel: 'Visits',
|
120
|
+
filter: {
|
121
|
+
type: 'number',
|
122
|
+
column: 'visits',
|
123
|
+
props: {
|
124
|
+
NumberInput: {
|
125
|
+
min: 0,
|
126
|
+
id: 'visits-number-input',
|
127
|
+
invalidText: 'A valid value is required',
|
128
|
+
label: 'Visits',
|
129
|
+
placeholder: 'Type a number amount of visits'
|
130
|
+
}
|
131
|
+
}
|
132
|
+
}
|
133
|
+
}, {
|
134
|
+
filterLabel: 'Password strength',
|
135
|
+
filter: {
|
136
|
+
type: 'checkbox',
|
137
|
+
column: 'passwordStrength',
|
138
|
+
props: {
|
139
|
+
FormGroup: {
|
140
|
+
legendText: 'Password strength'
|
141
|
+
},
|
142
|
+
Checkbox: checkboxList
|
143
|
+
}
|
144
|
+
}
|
145
|
+
}]
|
146
|
+
}],
|
147
|
+
renderLabel: function renderLabel(key, value) {
|
148
|
+
return (0, _handleFilterTagLabelText.handleFilterTagLabelText)(key, value);
|
149
|
+
},
|
150
|
+
renderDateLabel: function renderDateLabel(start, end) {
|
151
|
+
var startDateObj = new Date(start);
|
152
|
+
var endDateObj = new Date(end);
|
153
|
+
return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
|
154
|
+
}
|
155
|
+
};
|
156
|
+
};
|
@@ -36,7 +36,6 @@ var defaults = {
|
|
36
36
|
size: 'sm'
|
37
37
|
};
|
38
38
|
var EditInPlace = exports.EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
39
|
-
var _cx;
|
40
39
|
var cancelLabel = _ref.cancelLabel,
|
41
40
|
editAlwaysVisible = _ref.editAlwaysVisible,
|
42
41
|
editLabel = _ref.editLabel,
|
@@ -155,7 +154,7 @@ var EditInPlace = exports.EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
155
154
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
156
155
|
ref: ref
|
157
156
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
|
158
|
-
className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (
|
157
|
+
className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
|
159
158
|
onFocus: onFocusHandler,
|
160
159
|
onBlur: onBlurHandler
|
161
160
|
}, /*#__PURE__*/_react.default.createElement("label", {
|
@@ -34,7 +34,6 @@ var defaults = {
|
|
34
34
|
hasFieldset: true
|
35
35
|
};
|
36
36
|
var EditTearsheetForm = exports.EditTearsheetForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
37
|
-
var _cx;
|
38
37
|
var children = _ref.children,
|
39
38
|
className = _ref.className,
|
40
39
|
description = _ref.description,
|
@@ -52,7 +51,7 @@ var EditTearsheetForm = exports.EditTearsheetForm = /*#__PURE__*/(0, _react.forw
|
|
52
51
|
title: title
|
53
52
|
});
|
54
53
|
return formContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
55
|
-
className: (0, _classnames.default)(blockClass, className, (
|
54
|
+
className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm))),
|
56
55
|
ref: ref
|
57
56
|
}), /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
|
58
57
|
xlg: 12,
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
7
7
|
});
|
8
8
|
exports.default = void 0;
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
11
12
|
var _react = require("@carbon/react");
|
@@ -15,7 +16,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
16
|
var _TagSet = require("../TagSet");
|
16
17
|
var _settings = require("../../settings");
|
17
18
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
18
|
-
var
|
19
|
+
var _devtools = require("../../global/js/utils/devtools");
|
20
|
+
var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
|
21
|
+
_excluded2 = ["key", "value"];
|
19
22
|
/**
|
20
23
|
* Copyright IBM Corp. 2022, 2023
|
21
24
|
*
|
@@ -33,22 +36,21 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
|
|
33
36
|
className = _ref$className === void 0 ? '' : _ref$className,
|
34
37
|
_ref$clearFiltersText = _ref.clearFiltersText,
|
35
38
|
clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
|
36
|
-
|
37
|
-
|
38
|
-
_ref$filters = _ref.filters,
|
39
|
-
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
39
|
+
clearFilters = _ref.clearFilters,
|
40
|
+
filters = _ref.filters,
|
40
41
|
_ref$renderLabel = _ref.renderLabel,
|
41
42
|
renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
|
42
43
|
_ref$overflowType = _ref.overflowType,
|
43
44
|
overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
|
44
45
|
_ref$clearButtonInlin = _ref.clearButtonInline,
|
45
|
-
clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin
|
46
|
+
clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin,
|
47
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
46
48
|
var filterSummaryId = "".concat(blockClass, "__").concat((0, _uuidv.default)());
|
47
49
|
var tagFilters = filters.map(function (_ref2) {
|
48
50
|
var _renderLabel;
|
49
51
|
var key = _ref2.key,
|
50
52
|
value = _ref2.value,
|
51
|
-
rest = (0, _objectWithoutProperties2.default)(_ref2,
|
53
|
+
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
52
54
|
return _objectSpread(_objectSpread({}, rest), {}, {
|
53
55
|
type: 'gray',
|
54
56
|
label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
|
@@ -56,12 +58,13 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
|
|
56
58
|
});
|
57
59
|
var filterSummaryClearButton = (0, _react2.useRef)();
|
58
60
|
var filterSummaryRef = (0, _react2.useRef)();
|
59
|
-
var localRef =
|
60
|
-
return /*#__PURE__*/_react2.default.createElement("div", {
|
61
|
-
ref: localRef,
|
62
|
-
className: (0, _classnames.default)([blockClass, className]),
|
61
|
+
var localRef = ref || filterSummaryRef;
|
62
|
+
return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
|
63
63
|
id: filterSummaryId
|
64
|
-
},
|
64
|
+
}, rest, {
|
65
|
+
ref: localRef,
|
66
|
+
className: (0, _classnames.default)([blockClass, className])
|
67
|
+
}), /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
|
65
68
|
allTagsModalSearchLabel: "Search all tags",
|
66
69
|
allTagsModalSearchPlaceholderText: "Search all tags",
|
67
70
|
allTagsModalTitle: "All tags",
|
@@ -217,14 +217,13 @@ var NotificationsPanel = exports.NotificationsPanel = /*#__PURE__*/_react.defaul
|
|
217
217
|
});
|
218
218
|
previousNotifications = sortChronologically(previousNotifications);
|
219
219
|
var renderDescription = function renderDescription(id) {
|
220
|
-
var _ref2, _ref3;
|
221
220
|
var notification = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
|
222
221
|
return item.id === id;
|
223
222
|
})[0];
|
224
223
|
var trimLength = 88;
|
225
224
|
var description = notification.description;
|
226
|
-
var descriptionClassName = (0, _classnames.default)(["".concat(blockClass, "__notification-description"), (
|
227
|
-
var showMoreButtonClassName = (0, _classnames.default)([(
|
225
|
+
var descriptionClassName = (0, _classnames.default)(["".concat(blockClass, "__notification-description"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
|
226
|
+
var showMoreButtonClassName = (0, _classnames.default)([(0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
|
228
227
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
|
229
228
|
className: descriptionClassName
|
230
229
|
}, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
@@ -44,7 +44,7 @@ var defaults = {
|
|
44
44
|
narrowGrid: false
|
45
45
|
};
|
46
46
|
var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
47
|
-
var _withoutBackground, _enableBreadcrumbScro
|
47
|
+
var _withoutBackground, _enableBreadcrumbScro;
|
48
48
|
var actionBarItems = _ref.actionBarItems,
|
49
49
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
50
50
|
actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
|
@@ -240,17 +240,15 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
240
240
|
}
|
241
241
|
}
|
242
242
|
setPageHeaderStyles(function (prev) {
|
243
|
-
|
244
|
-
return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)), _objectSpread2));
|
243
|
+
return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), "--".concat(_PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)));
|
245
244
|
});
|
246
245
|
}, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
|
247
246
|
(0, _react.useEffect)(function () {
|
248
247
|
// Updates custom CSS props used to manage scroll behavior
|
249
248
|
/* istanbul ignore next */
|
250
249
|
setPageHeaderStyles(function (prev) {
|
251
|
-
|
252
|
-
|
253
|
-
)))), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
|
250
|
+
return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(_PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(_PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(_PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
|
251
|
+
)))), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
|
254
252
|
});
|
255
253
|
}, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
|
256
254
|
(0, _hooks.useNearestScroll)(headerRef,
|
@@ -329,7 +327,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
329
327
|
className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
|
330
328
|
ref: offsetTopMeasuringRef
|
331
329
|
}), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
|
332
|
-
className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (
|
330
|
+
className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
|
333
331
|
style: pageHeaderStyles,
|
334
332
|
ref: headerRef
|
335
333
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
|
@@ -339,7 +337,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
339
337
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
340
338
|
className: "".concat(_PageHeaderUtils.blockClass, "__non-navigation-row-content")
|
341
339
|
}, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
|
342
|
-
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (
|
340
|
+
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
|
343
341
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
344
342
|
className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--container")
|
345
343
|
}, /*#__PURE__*/_react.default.createElement(_react2.Column, {
|
@@ -350,7 +348,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
350
348
|
overflowAriaLabel: breadcrumbOverflowAriaLabel,
|
351
349
|
breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
|
352
350
|
}) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
|
353
|
-
className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (
|
351
|
+
className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
|
354
352
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
355
353
|
className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
|
356
354
|
ref: sizingContainerRef
|
@@ -365,7 +363,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
365
363
|
onWidthChange: handleActionBarWidthChange,
|
366
364
|
rightAlign: true
|
367
365
|
})) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
|
368
|
-
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (
|
366
|
+
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
|
369
367
|
}, /*#__PURE__*/_react.default.createElement(_react2.Column, {
|
370
368
|
className: "".concat(_PageHeaderUtils.blockClass, "__title-column")
|
371
369
|
}, title ? /*#__PURE__*/_react.default.createElement(_PageHeaderTitle.PageHeaderTitle, {
|
@@ -399,7 +397,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
|
|
399
397
|
}))) : null),
|
400
398
|
// this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
|
401
399
|
navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
|
402
|
-
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (
|
400
|
+
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
|
403
401
|
}, /*#__PURE__*/_react.default.createElement(_react2.Column, {
|
404
402
|
className: "".concat(_PageHeaderUtils.blockClass, "__navigation-tabs")
|
405
403
|
}, navigation), tags ? /*#__PURE__*/_react.default.createElement(_react2.Column, {
|