@carbon/ibm-products 2.11.2 → 2.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +40 -7
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +36 -7
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +40 -7
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +40 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +9 -1
- package/es/components/Card/CardFooter.js +8 -2
- package/es/components/Card/CardHeader.js +8 -2
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/es/components/CreateFullPage/CreateFullPage.js +66 -8
- package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +18 -17
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +68 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +120 -54
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +9 -3
- package/es/components/Datagrid/useActionsColumn.js +0 -2
- package/es/components/Datagrid/useFiltering.js +4 -1
- package/es/components/Datagrid/utils/DatagridActions.js +2 -3
- package/es/components/SimpleHeader/SimpleHeader.docs-page.js +17 -0
- package/es/components/SimpleHeader/SimpleHeader.js +92 -0
- package/es/components/SimpleHeader/index.js +8 -0
- package/es/components/StatusIcon/StatusIcon.js +13 -13
- package/es/components/Tearsheet/Tearsheet.js +2 -1
- package/es/components/Tearsheet/TearsheetNarrow.js +2 -1
- package/es/components/Tearsheet/TearsheetShell.js +2 -1
- package/es/global/js/utils/StoryDocsPage.js +3 -3
- package/lib/components/Card/Card.js +9 -1
- package/lib/components/Card/CardFooter.js +8 -2
- package/lib/components/Card/CardHeader.js +8 -2
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +65 -7
- package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -38
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +109 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +79 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +136 -70
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +10 -4
- package/lib/components/Datagrid/useActionsColumn.js +0 -2
- package/lib/components/Datagrid/useFiltering.js +4 -1
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -3
- package/lib/components/SimpleHeader/SimpleHeader.docs-page.js +28 -0
- package/lib/components/SimpleHeader/SimpleHeader.js +102 -0
- package/lib/components/SimpleHeader/index.js +12 -0
- package/lib/components/StatusIcon/StatusIcon.js +12 -12
- package/lib/components/Tearsheet/Tearsheet.js +1 -1
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +4 -2
- package/lib/global/js/utils/StoryDocsPage.js +3 -3
- package/package.json +2 -2
- package/scss/components/Card/_card.scss +1 -1
- package/scss/components/CreateFullPage/_create-full-page.scss +11 -2
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/ProductiveCard/_productive-card.scss +0 -1
- package/scss/components/SimpleHeader/_carbon-imports.scss +11 -0
- package/scss/components/SimpleHeader/_index-with-carbon.scss +9 -0
- package/scss/components/SimpleHeader/_index.scss +10 -0
- package/scss/components/SimpleHeader/_simple-header.scss +37 -0
- package/scss/components/StatusIcon/_status-icon.scss +0 -1
- package/scss/components/_index-with-carbon.scss +1 -0
@@ -16,7 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
16
|
var _CardHeader = require("./CardHeader");
|
17
17
|
var _CardFooter = require("./CardFooter");
|
18
18
|
var _settings = require("../../settings");
|
19
|
-
var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "title", "titleSize"],
|
19
|
+
var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "title", "titleSize"],
|
20
20
|
_excluded2 = ["id"],
|
21
21
|
_excluded3 = ["id", "icon", "onClick", "iconDescription", "href"]; //
|
22
22
|
// Copyright IBM Corp. 2020, 2023
|
@@ -66,6 +66,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
66
66
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
67
67
|
onSecondaryButtonClick = _ref.onSecondaryButtonClick,
|
68
68
|
Pictogram = _ref.pictogram,
|
69
|
+
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
69
70
|
primaryButtonHref = _ref.primaryButtonHref,
|
70
71
|
primaryButtonIcon = _ref.primaryButtonIcon,
|
71
72
|
_ref$primaryButtonKin = _ref.primaryButtonKind,
|
@@ -75,6 +76,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
75
76
|
primaryButtonText = _ref.primaryButtonText,
|
76
77
|
_ref$productive = _ref.productive,
|
77
78
|
productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
|
79
|
+
secondaryButtonDisabled = _ref.secondaryButtonDisabled,
|
78
80
|
secondaryButtonHref = _ref.secondaryButtonHref,
|
79
81
|
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
80
82
|
_ref$secondaryButtonK = _ref.secondaryButtonKind,
|
@@ -189,9 +191,11 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
189
191
|
primaryButtonIcon: primaryButtonIcon,
|
190
192
|
primaryButtonPlacement: primaryButtonPlacement,
|
191
193
|
primaryButtonText: primaryButtonText,
|
194
|
+
primaryButtonDisabled: primaryButtonDisabled,
|
192
195
|
description: description,
|
193
196
|
hasActions: hasActions,
|
194
197
|
label: label,
|
198
|
+
secondaryButtonDisabled: secondaryButtonDisabled,
|
195
199
|
secondaryButtonHref: secondaryButtonHref,
|
196
200
|
secondaryButtonIcon: secondaryButtonIcon,
|
197
201
|
secondaryButtonPlacement: secondaryButtonPlacement,
|
@@ -215,12 +219,14 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
215
219
|
hasButton: hasFooterButton,
|
216
220
|
onPrimaryButtonClick: onPrimaryButtonClick,
|
217
221
|
onSecondaryButtonClick: onSecondaryButtonClick,
|
222
|
+
primaryButtonDisabled: primaryButtonDisabled,
|
218
223
|
primaryButtonHref: primaryButtonHref,
|
219
224
|
primaryButtonIcon: primaryButtonIcon,
|
220
225
|
primaryButtonKind: primaryButtonKind,
|
221
226
|
primaryButtonPlacement: primaryButtonPlacement,
|
222
227
|
primaryButtonText: primaryButtonText,
|
223
228
|
productive: productive,
|
229
|
+
secondaryButtonDisabled: secondaryButtonDisabled,
|
224
230
|
secondaryButtonHref: secondaryButtonHref,
|
225
231
|
secondaryButtonIcon: secondaryButtonIcon,
|
226
232
|
secondaryButtonKind: secondaryButtonKind,
|
@@ -266,12 +272,14 @@ Card.propTypes = {
|
|
266
272
|
})),
|
267
273
|
overflowAriaLabel: _propTypes.default.string,
|
268
274
|
pictogram: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
275
|
+
primaryButtonDisabled: _propTypes.default.bool,
|
269
276
|
primaryButtonHref: _propTypes.default.string,
|
270
277
|
primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
271
278
|
primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
|
272
279
|
primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
273
280
|
primaryButtonText: _propTypes.default.node,
|
274
281
|
productive: _propTypes.default.bool,
|
282
|
+
secondaryButtonDisabled: _propTypes.default.bool,
|
275
283
|
secondaryButtonHref: _propTypes.default.string,
|
276
284
|
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
277
285
|
secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
|
@@ -32,6 +32,7 @@ var CardFooter = function CardFooter(_ref) {
|
|
32
32
|
hasButton = _ref.hasButton,
|
33
33
|
onPrimaryButtonClick = _ref.onPrimaryButtonClick,
|
34
34
|
onSecondaryButtonClick = _ref.onSecondaryButtonClick,
|
35
|
+
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
35
36
|
primaryButtonHref = _ref.primaryButtonHref,
|
36
37
|
primaryButtonIcon = _ref.primaryButtonIcon,
|
37
38
|
_ref$primaryButtonKin = _ref.primaryButtonKind,
|
@@ -40,6 +41,7 @@ var CardFooter = function CardFooter(_ref) {
|
|
40
41
|
primaryButtonText = _ref.primaryButtonText,
|
41
42
|
_ref$productive = _ref.productive,
|
42
43
|
productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
|
44
|
+
secondaryButtonDisabled = _ref.secondaryButtonDisabled,
|
43
45
|
secondaryButtonHref = _ref.secondaryButtonHref,
|
44
46
|
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
45
47
|
_ref$secondaryButtonK = _ref.secondaryButtonKind,
|
@@ -56,13 +58,15 @@ var CardFooter = function CardFooter(_ref) {
|
|
56
58
|
onClick: onSecondaryButtonClick,
|
57
59
|
size: "md",
|
58
60
|
renderIcon: secondaryButtonIcon,
|
59
|
-
href: secondaryButtonHref
|
61
|
+
href: secondaryButtonHref,
|
62
|
+
disabled: secondaryButtonDisabled
|
60
63
|
}, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
61
64
|
kind: productive ? 'ghost' : primaryButtonKind,
|
62
65
|
onClick: onPrimaryButtonClick,
|
63
66
|
size: "md",
|
64
67
|
renderIcon: primaryButtonIcon,
|
65
|
-
href: primaryButtonHref
|
68
|
+
href: primaryButtonHref,
|
69
|
+
disabled: primaryButtonDisabled
|
66
70
|
}, primaryButtonText), hasActions && /*#__PURE__*/_react.default.createElement("div", {
|
67
71
|
className: "".concat(blockClass, "__actions")
|
68
72
|
}, actions));
|
@@ -74,12 +78,14 @@ CardFooter.propTypes = {
|
|
74
78
|
hasButton: _propTypes.default.bool,
|
75
79
|
onPrimaryButtonClick: _propTypes.default.func,
|
76
80
|
onSecondaryButtonClick: _propTypes.default.func,
|
81
|
+
primaryButtonDisabled: _propTypes.default.bool,
|
77
82
|
primaryButtonHref: _propTypes.default.string,
|
78
83
|
primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
79
84
|
primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
|
80
85
|
primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
81
86
|
primaryButtonText: _propTypes.default.string,
|
82
87
|
productive: _propTypes.default.bool,
|
88
|
+
secondaryButtonDisabled: _propTypes.default.bool,
|
83
89
|
secondaryButtonHref: _propTypes.default.string,
|
84
90
|
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
85
91
|
secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
|
@@ -32,10 +32,12 @@ var CardHeader = function CardHeader(_ref) {
|
|
32
32
|
primaryButtonIcon = _ref.primaryButtonIcon,
|
33
33
|
primaryButtonPlacement = _ref.primaryButtonPlacement,
|
34
34
|
primaryButtonText = _ref.primaryButtonText,
|
35
|
+
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
35
36
|
description = _ref.description,
|
36
37
|
_ref$hasActions = _ref.hasActions,
|
37
38
|
hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
|
38
39
|
label = _ref.label,
|
40
|
+
secondaryButtonDisabled = _ref.secondaryButtonDisabled,
|
39
41
|
secondaryButtonHref = _ref.secondaryButtonHref,
|
40
42
|
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
41
43
|
secondaryButtonPlacement = _ref.secondaryButtonPlacement,
|
@@ -68,13 +70,15 @@ var CardHeader = function CardHeader(_ref) {
|
|
68
70
|
size: "sm",
|
69
71
|
renderIcon: secondaryButtonIcon,
|
70
72
|
href: secondaryButtonHref,
|
71
|
-
className: actionGhostButtonClass
|
73
|
+
className: actionGhostButtonClass,
|
74
|
+
disabled: secondaryButtonDisabled
|
72
75
|
}, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
73
76
|
kind: "ghost",
|
74
77
|
size: "sm",
|
75
78
|
renderIcon: primaryButtonIcon,
|
76
79
|
onClick: onPrimaryButtonClick,
|
77
|
-
className: actionGhostButtonClass
|
80
|
+
className: actionGhostButtonClass,
|
81
|
+
disabled: primaryButtonDisabled
|
78
82
|
}, primaryButtonText))));
|
79
83
|
};
|
80
84
|
exports.CardHeader = CardHeader;
|
@@ -86,9 +90,11 @@ CardHeader.propTypes = {
|
|
86
90
|
noActionIcons: _propTypes.default.bool,
|
87
91
|
onPrimaryButtonClick: _propTypes.default.func,
|
88
92
|
onSecondaryButtonClick: _propTypes.default.func,
|
93
|
+
primaryButtonDisabled: _propTypes.default.bool,
|
89
94
|
primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
90
95
|
primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
91
96
|
primaryButtonText: _propTypes.default.string,
|
97
|
+
secondaryButtonDisabled: _propTypes.default.bool,
|
92
98
|
secondaryButtonHref: _propTypes.default.string,
|
93
99
|
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
94
100
|
secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
|
@@ -28,6 +28,12 @@ var DocsPage = function DocsPage() {
|
|
28
28
|
source: {
|
29
29
|
code: "<CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n Optional subtitle\n </h6>\n <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n Optional description\n </p>\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-2\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n</CreateFullPageStep>"
|
30
30
|
}
|
31
|
+
}, {
|
32
|
+
story: stories.createFullPageWithHeader,
|
33
|
+
description: "This is used when you want to show a header title and breadcrumbs. This can be created by\npassing in a title or breadcrumbs to the `<CreateFullPage />` component as shown below:",
|
34
|
+
source: {
|
35
|
+
code: "<CreateFullPage\n title='Page title'\n breadcrumbsOverflowAriaLabel='Open and close additional breadcrumb item list.'\n breadcrumbs={[\n { key: '0', label: 'Breadcrumb 1', href: '/', title: 'home page' },\n { key: '1', label: 'Breadcrumb 2', href: '/', },\n { key: '2', label: 'Breadcrumb 3', href:'/' },\n { key: '3', label: 'Breadcrumb 4', isCurrentPage: true }\n ]}\n maxVisibleBreadcrumbs={3}\n {...props}\n>\n <CreateFullPageStep {...createFullPageStepProps}>...</CreateFullPageStep>\n</CreateFullPage>"
|
36
|
+
}
|
31
37
|
}, {
|
32
38
|
title: 'Using custom components',
|
33
39
|
description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
|
@@ -20,7 +20,8 @@ var _ActionSet = require("../ActionSet");
|
|
20
20
|
var _hooks = require("../../global/js/hooks");
|
21
21
|
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
22
22
|
var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
|
23
|
-
var
|
23
|
+
var _SimpleHeader = require("../SimpleHeader/SimpleHeader");
|
24
|
+
var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
|
24
25
|
/**
|
25
26
|
* Copyright IBM Corp. 2021, 2023
|
26
27
|
*
|
@@ -59,11 +60,14 @@ component to get the desired affect.
|
|
59
60
|
*/
|
60
61
|
exports.StepNumberContext = StepNumberContext;
|
61
62
|
var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
62
|
-
var
|
63
|
+
var breadcrumbsOverflowAriaLabel = _ref.breadcrumbsOverflowAriaLabel,
|
64
|
+
breadcrumbs = _ref.breadcrumbs,
|
65
|
+
backButtonText = _ref.backButtonText,
|
63
66
|
cancelButtonText = _ref.cancelButtonText,
|
64
67
|
children = _ref.children,
|
65
68
|
className = _ref.className,
|
66
69
|
initialStep = _ref.initialStep,
|
70
|
+
maxVisibleBreadcrumbs = _ref.maxVisibleBreadcrumbs,
|
67
71
|
modalDangerButtonText = _ref.modalDangerButtonText,
|
68
72
|
modalDescription = _ref.modalDescription,
|
69
73
|
modalSecondaryButtonText = _ref.modalSecondaryButtonText,
|
@@ -73,7 +77,9 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
73
77
|
onRequestSubmit = _ref.onRequestSubmit,
|
74
78
|
firstFocusElement = _ref.firstFocusElement,
|
75
79
|
submitButtonText = _ref.submitButtonText,
|
80
|
+
noTrailingSlash = _ref.noTrailingSlash,
|
76
81
|
title = _ref.title,
|
82
|
+
secondaryTitle = _ref.secondaryTitle,
|
77
83
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
78
84
|
var _useState = (0, _react.useState)([]),
|
79
85
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -123,6 +129,11 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
123
129
|
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
124
130
|
lastIncludedStep = _useState22[0],
|
125
131
|
setLastIncludedStep = _useState22[1];
|
132
|
+
var _useState23 = (0, _react.useState)(0),
|
133
|
+
_useState24 = (0, _slicedToArray2.default)(_useState23, 2),
|
134
|
+
headerHeight = _useState24[0],
|
135
|
+
setHeaderHeight = _useState24[1];
|
136
|
+
var headerRef = (0, _react.useRef)(null);
|
126
137
|
(0, _react.useEffect)(function () {
|
127
138
|
var firstItem = stepData.findIndex(function (item) {
|
128
139
|
return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
|
@@ -139,6 +150,13 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
139
150
|
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
140
151
|
}
|
141
152
|
}, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
|
153
|
+
(0, _react.useEffect)(function () {
|
154
|
+
var headerHeight = 0;
|
155
|
+
if (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) {
|
156
|
+
headerHeight = headerRef.current.getBoundingClientRect().height;
|
157
|
+
}
|
158
|
+
setHeaderHeight(headerHeight);
|
159
|
+
}, [title, breadcrumbs]);
|
142
160
|
(0, _hooks.useCreateComponentFocus)({
|
143
161
|
previousState: previousState,
|
144
162
|
currentStep: currentStep,
|
@@ -180,18 +198,31 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
180
198
|
setCreateComponentActions: setCreateFullPageActions,
|
181
199
|
setModalIsOpen: setModalIsOpen
|
182
200
|
});
|
183
|
-
|
184
201
|
// currently, we are not supporting the use of 'view all' toggle state
|
185
202
|
/* istanbul ignore next */
|
186
203
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
187
204
|
ref: ref,
|
188
205
|
className: (0, _classnames.default)(blockClass, className)
|
189
|
-
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
|
206
|
+
}, (0, _devtools.getDevtoolsProps)(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/_react.default.createElement("div", {
|
207
|
+
className: "".concat(blockClass, "__header"),
|
208
|
+
ref: headerRef
|
209
|
+
}, /*#__PURE__*/_react.default.createElement(_SimpleHeader.SimpleHeader, {
|
210
|
+
title: title,
|
211
|
+
breadcrumbs: breadcrumbs,
|
212
|
+
noTrailingSlash: noTrailingSlash,
|
213
|
+
overflowAriaLabel: breadcrumbsOverflowAriaLabel,
|
214
|
+
maxVisible: maxVisibleBreadcrumbs
|
215
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
216
|
+
className: "".concat(blockClass, "__influencer-and-body-container"),
|
217
|
+
style: {
|
218
|
+
height: "calc(100vh - ".concat(headerHeight, "px)")
|
219
|
+
}
|
220
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
190
221
|
className: "".concat(blockClass, "__influencer")
|
191
222
|
}, /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
|
192
223
|
stepData: stepData,
|
193
224
|
currentStep: currentStep,
|
194
|
-
title:
|
225
|
+
title: secondaryTitle
|
195
226
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
196
227
|
className: "".concat(blockClass, "__body")
|
197
228
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
@@ -248,7 +279,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
248
279
|
type: "button",
|
249
280
|
kind: "danger",
|
250
281
|
onClick: onClose
|
251
|
-
}, modalDangerButtonText))));
|
282
|
+
}, modalDangerButtonText)))));
|
252
283
|
});
|
253
284
|
|
254
285
|
// Return a placeholder if not released and not enabled by feature flag.
|
@@ -267,6 +298,23 @@ CreateFullPage.propTypes = {
|
|
267
298
|
* The back button text
|
268
299
|
*/
|
269
300
|
backButtonText: _propTypes.default.string.isRequired,
|
301
|
+
/** The header breadcrumbs */
|
302
|
+
breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
|
303
|
+
/** breadcrumb item key */
|
304
|
+
key: _propTypes.default.string.isRequired,
|
305
|
+
/** breadcrumb item label */
|
306
|
+
label: _propTypes.default.string.isRequired,
|
307
|
+
/** breadcrumb item link */
|
308
|
+
href: _propTypes.default.string,
|
309
|
+
/** breadcrumb item title tooltip */
|
310
|
+
title: _propTypes.default.string,
|
311
|
+
/** Provide if this breadcrumb item represents the current page */
|
312
|
+
isCurrentPage: _propTypes.default.bool
|
313
|
+
})),
|
314
|
+
/**
|
315
|
+
* Label for open/close overflow button used for breadcrumb items that do not fit
|
316
|
+
*/
|
317
|
+
breadcrumbsOverflowAriaLabel: _SimpleHeader.overflowAriaLabel_required_if_breadcrumbs_exist,
|
270
318
|
/**
|
271
319
|
* The cancel button text
|
272
320
|
*/
|
@@ -289,6 +337,8 @@ CreateFullPage.propTypes = {
|
|
289
337
|
* is now being completed.
|
290
338
|
*/
|
291
339
|
initialStep: _propTypes.default.number,
|
340
|
+
/** Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
|
341
|
+
maxVisibleBreadcrumbs: _propTypes.default.number,
|
292
342
|
/**
|
293
343
|
* The primary 'danger' button text in the modal
|
294
344
|
*/
|
@@ -309,6 +359,10 @@ CreateFullPage.propTypes = {
|
|
309
359
|
* The next button text
|
310
360
|
*/
|
311
361
|
nextButtonText: _propTypes.default.string.isRequired,
|
362
|
+
/**
|
363
|
+
* A prop to omit the trailing slash for the breadcrumbs
|
364
|
+
*/
|
365
|
+
noTrailingSlash: _propTypes.default.bool,
|
312
366
|
/**
|
313
367
|
* An optional handler that is called when the user closes the full page (by
|
314
368
|
* clicking the secondary button, located in the modal, which triggers after
|
@@ -320,6 +374,10 @@ CreateFullPage.propTypes = {
|
|
320
374
|
* This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
|
321
375
|
*/
|
322
376
|
onRequestSubmit: _propTypes.default.func.isRequired,
|
377
|
+
/**
|
378
|
+
* A secondary title of the full page, displayed in the influencer area
|
379
|
+
*/
|
380
|
+
secondaryTitle: _propTypes.default.string,
|
323
381
|
/**
|
324
382
|
* @ignore
|
325
383
|
* The aria label to be used for the UI Shell SideNav Carbon component
|
@@ -330,7 +388,7 @@ CreateFullPage.propTypes = {
|
|
330
388
|
*/
|
331
389
|
submitButtonText: _propTypes.default.string.isRequired,
|
332
390
|
/**
|
333
|
-
* The main title of the full page, displayed in the
|
391
|
+
* The main title of the full page, displayed in the header area
|
334
392
|
*/
|
335
393
|
title: _propTypes.default.string
|
336
394
|
};
|
@@ -50,7 +50,8 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
50
50
|
datagridState: datagridState
|
51
51
|
};
|
52
52
|
return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
|
53
|
-
filters: filters
|
53
|
+
filters: filters,
|
54
|
+
filterProps: filterProps
|
54
55
|
}, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
55
56
|
id: tableId,
|
56
57
|
ref: ref,
|
@@ -25,6 +25,8 @@ var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
|
|
25
25
|
var _layout = require("@carbon/layout");
|
26
26
|
var _hooks = require("../../../global/js/hooks");
|
27
27
|
var _hooks2 = require("../../DataSpreadsheet/hooks");
|
28
|
+
var _hooks3 = require("./addons/Filtering/hooks");
|
29
|
+
var _FilterProvider = require("./addons/Filtering/FilterProvider");
|
28
30
|
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); }
|
29
31
|
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; }
|
30
32
|
/**
|
@@ -69,6 +71,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
69
71
|
DatagridActions = datagridState.DatagridActions,
|
70
72
|
totalColumnsWidth = datagridState.totalColumnsWidth,
|
71
73
|
gridRef = datagridState.gridRef,
|
74
|
+
setAllFilters = datagridState.setAllFilters,
|
72
75
|
state = datagridState.state,
|
73
76
|
page = datagridState.page,
|
74
77
|
rows = datagridState.rows;
|
@@ -134,6 +137,9 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
134
137
|
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
135
138
|
}
|
136
139
|
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
140
|
+
(0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
|
141
|
+
return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
|
142
|
+
});
|
137
143
|
var renderFilterSummary = function renderFilterSummary() {
|
138
144
|
return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
|
139
145
|
className: "".concat(blockClass, "__filter-summary"),
|
@@ -60,11 +60,23 @@ var SelectAll = function SelectAll(datagridState) {
|
|
60
60
|
var _getProps = getProps(),
|
61
61
|
onChange = _getProps.onChange,
|
62
62
|
selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
|
63
|
+
var _ref = selectProps || {},
|
64
|
+
indeterminate = _ref.indeterminate;
|
65
|
+
var handleSelectAllChange = function handleSelectAllChange(event) {
|
66
|
+
if (indeterminate) {
|
67
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange({
|
68
|
+
target: {
|
69
|
+
checked: false
|
70
|
+
}
|
71
|
+
});
|
72
|
+
}
|
73
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
74
|
+
};
|
63
75
|
return /*#__PURE__*/_react.default.createElement("div", {
|
64
76
|
className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
65
77
|
}, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
|
66
78
|
name: "".concat(tableId, "-select-all-checkbox-name"),
|
67
|
-
onSelect:
|
79
|
+
onSelect: handleSelectAllChange,
|
68
80
|
disabled: isFetching || selectProps.disabled,
|
69
81
|
id: "".concat(tableId, "-select-all-checkbox-id")
|
70
82
|
})));
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.DraggableItemsList = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
10
11
|
var _propTypes = require("prop-types");
|
11
12
|
var _react2 = require("@carbon/react");
|
@@ -44,19 +45,39 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
44
45
|
var _getColTitle;
|
45
46
|
return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
|
46
47
|
});
|
48
|
+
var getUpdatedDragCols = function getUpdatedDragCols() {
|
49
|
+
var tempCols = (0, _toConsumableArray2.default)(visibleCols);
|
50
|
+
tempCols.forEach(function (col) {
|
51
|
+
if (col.sticky) {
|
52
|
+
col.disabled = true;
|
53
|
+
}
|
54
|
+
});
|
55
|
+
return tempCols;
|
56
|
+
};
|
57
|
+
var updatedDragCols = getUpdatedDragCols();
|
47
58
|
|
48
59
|
// let localRefCopy;
|
49
60
|
var handleDragEnd = function handleDragEnd(event) {
|
61
|
+
var _destOverCol$;
|
50
62
|
var active = event.active,
|
51
63
|
over = event.over;
|
64
|
+
|
65
|
+
// Stop any re-ordering updates if the destination column is disabled
|
66
|
+
// ie: it is a frozen column.
|
67
|
+
var destOverCol = updatedDragCols.filter(function (item) {
|
68
|
+
return item.id === over.id;
|
69
|
+
});
|
70
|
+
if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
|
71
|
+
return;
|
72
|
+
}
|
52
73
|
var fromVisibleIndex = columns.findIndex(function (col) {
|
53
74
|
return matchedColsById(col, active);
|
54
75
|
});
|
55
76
|
var toVisibleIndex = columns.findIndex(function (col) {
|
56
77
|
return matchedColsById(col, over);
|
57
78
|
});
|
58
|
-
var colTitle = (0, _getColTitle2.default)(
|
59
|
-
setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(
|
79
|
+
var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromVisibleIndex]);
|
80
|
+
setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(updatedDragCols.length, "."));
|
60
81
|
var fromIndex = columns.findIndex(function (col) {
|
61
82
|
return matchedColsById(col, active);
|
62
83
|
});
|
@@ -67,23 +88,23 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
67
88
|
};
|
68
89
|
var handleDragStart = function handleDragStart(event) {
|
69
90
|
var active = event.active;
|
70
|
-
var fromIndex =
|
91
|
+
var fromIndex = updatedDragCols.findIndex(function (col) {
|
71
92
|
return matchedColsById(col, active);
|
72
93
|
});
|
73
|
-
var colTitle = (0, _getColTitle2.default)(
|
74
|
-
setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(
|
94
|
+
var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromIndex]);
|
95
|
+
setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(updatedDragCols.length, "."));
|
75
96
|
};
|
76
97
|
var handleDragUpdate = function handleDragUpdate(event) {
|
77
98
|
var active = event.active,
|
78
99
|
over = event.over;
|
79
|
-
var fromIndex =
|
100
|
+
var fromIndex = updatedDragCols.findIndex(function (col) {
|
80
101
|
return matchedColsById(col, active);
|
81
102
|
});
|
82
|
-
var toIndex =
|
103
|
+
var toIndex = updatedDragCols.findIndex(function (col) {
|
83
104
|
return matchedColsById(col, over);
|
84
105
|
});
|
85
|
-
var colTitle = (0, _getColTitle2.default)(
|
86
|
-
setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(
|
106
|
+
var colTitle = (0, _getColTitle2.default)(updatedDragCols[fromIndex]);
|
107
|
+
setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
|
87
108
|
};
|
88
109
|
var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
|
89
110
|
// Require the mouse to move by 10 pixels before activating
|
@@ -142,7 +163,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
142
163
|
key: colDef.id
|
143
164
|
});
|
144
165
|
})), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
|
145
|
-
items:
|
166
|
+
items: updatedDragCols,
|
146
167
|
strategy: _sortable.verticalListSortingStrategy
|
147
168
|
}, visibleCols.map(function (colDef) {
|
148
169
|
var colHeaderTitle = (0, _getColTitle2.default)(colDef);
|