@carbon/ibm-products 2.38.0 → 2.40.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +236 -3
- 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 +5 -0
- 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 +236 -3
- 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 +236 -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/AddSelect/AddSelect.d.ts +44 -2
- package/es/components/AddSelect/AddSelect.js +8 -4
- package/es/components/AddSelect/AddSelectBody.d.ts +44 -2
- package/es/components/AddSelect/AddSelectBody.js +10 -12
- package/es/components/AddSelect/AddSelectSort.d.ts +16 -17
- package/es/components/AddSelect/AddSelectSort.js +5 -5
- package/es/components/AddSelect/types/index.d.ts +44 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
- package/es/components/Card/Card.js +50 -9
- package/es/components/Card/CardFooter.d.ts +5 -1
- package/es/components/Card/CardFooter.js +11 -1
- package/es/components/Carousel/Carousel.d.ts +6 -2
- package/es/components/Checklist/Checklist.d.ts +100 -2
- package/es/components/Checklist/Checklist.js +9 -5
- package/es/components/Checklist/Checklist.types.d.ts +19 -0
- package/es/components/Checklist/Checklist.types.js +22 -0
- package/es/components/Checklist/ChecklistChart.d.ts +5 -1
- package/es/components/Checklist/ChecklistChart.js +9 -4
- package/es/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/es/components/Checklist/ChecklistIcon.js +9 -4
- package/es/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/es/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
- package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
- package/es/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/es/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/es/components/GetStartedCard/GetStartedCard.js +82 -0
- package/es/components/GetStartedCard/index.d.ts +1 -0
- package/es/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/es/components/Guidebanner/Guidebanner.js +6 -5
- package/es/components/Guidebanner/GuidebannerElement.d.ts +30 -17
- package/es/components/Guidebanner/GuidebannerElement.js +4 -4
- package/es/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
- package/es/components/Guidebanner/GuidebannerElementButton.js +10 -4
- package/es/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
- package/es/components/Guidebanner/GuidebannerElementLink.js +3 -3
- package/es/components/InterstitialScreen/InterstitialScreen.js +3 -1
- package/es/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
- package/es/components/MultiAddSelect/MultiAddSelect.js +2 -1
- package/es/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
- package/es/components/NotificationsPanel/NotificationsPanel.js +10 -11
- package/es/components/PageHeader/PageHeader.d.ts +298 -5
- package/es/components/PageHeader/PageHeader.js +98 -47
- package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/es/components/PageHeader/PageHeaderUtils.js +4 -1
- package/es/components/SidePanel/SidePanel.d.ts +6 -2
- package/es/components/SidePanel/SidePanel.js +18 -3
- package/es/components/SidePanel/constants.d.ts +1 -0
- package/es/components/SidePanel/constants.js +1 -0
- package/es/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
- package/es/components/SingleAddSelect/SingleAddSelect.js +2 -1
- package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/es/components/TagOverflow/TagOverflow.js +153 -29
- package/es/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/es/components/TagOverflow/TagOverflowModal.js +112 -0
- package/es/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/es/components/TagOverflow/TagOverflowPopover.js +135 -0
- package/es/components/Tearsheet/Tearsheet.d.ts +132 -6
- package/es/components/Tearsheet/Tearsheet.js +25 -13
- package/es/components/Tearsheet/TearsheetShell.d.ts +5 -1
- package/es/components/Tearsheet/TearsheetShell.js +26 -4
- package/es/components/WebTerminal/WebTerminal.d.ts +4 -0
- package/es/components/WebTerminal/WebTerminal.js +11 -3
- package/es/components/index.d.ts +1 -0
- package/es/global/js/hooks/useFocus.d.ts +3 -1
- package/es/global/js/hooks/useFocus.js +6 -3
- package/es/global/js/hooks/useRetrieveStepData.d.ts +1 -1
- package/es/global/js/hooks/useRetrieveStepData.js +1 -1
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/settings.d.ts +1 -0
- package/lib/components/AddSelect/AddSelect.d.ts +44 -2
- package/lib/components/AddSelect/AddSelect.js +7 -3
- package/lib/components/AddSelect/AddSelectBody.d.ts +44 -2
- package/lib/components/AddSelect/AddSelectBody.js +10 -12
- package/lib/components/AddSelect/AddSelectSort.d.ts +16 -17
- package/lib/components/AddSelect/AddSelectSort.js +5 -5
- package/lib/components/AddSelect/types/index.d.ts +44 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
- package/lib/components/Card/Card.js +50 -9
- package/lib/components/Card/CardFooter.d.ts +5 -1
- package/lib/components/Card/CardFooter.js +11 -1
- package/lib/components/Carousel/Carousel.d.ts +6 -2
- package/lib/components/Checklist/Checklist.d.ts +100 -2
- package/lib/components/Checklist/Checklist.js +9 -5
- package/lib/components/Checklist/Checklist.types.d.ts +19 -0
- package/lib/components/Checklist/Checklist.types.js +27 -0
- package/lib/components/Checklist/ChecklistChart.d.ts +5 -1
- package/lib/components/Checklist/ChecklistChart.js +14 -9
- package/lib/components/Checklist/ChecklistIcon.d.ts +5 -1
- package/lib/components/Checklist/ChecklistIcon.js +9 -4
- package/lib/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
- package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
- package/lib/components/CreateInfluencer/CreateInfluencer.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
- package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
- package/lib/components/DataSpreadsheet/types/index.d.ts +30 -0
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/lib/components/GetStartedCard/GetStartedCard.d.ts +5 -0
- package/lib/components/GetStartedCard/GetStartedCard.js +88 -0
- package/lib/components/GetStartedCard/index.d.ts +1 -0
- package/lib/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/lib/components/Guidebanner/Guidebanner.js +6 -5
- package/lib/components/Guidebanner/GuidebannerElement.d.ts +30 -17
- package/lib/components/Guidebanner/GuidebannerElement.js +4 -4
- package/lib/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
- package/lib/components/Guidebanner/GuidebannerElementButton.js +10 -4
- package/lib/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
- package/lib/components/Guidebanner/GuidebannerElementLink.js +3 -3
- package/lib/components/InterstitialScreen/InterstitialScreen.js +3 -1
- package/lib/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
- package/lib/components/MultiAddSelect/MultiAddSelect.js +2 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.js +10 -11
- package/lib/components/PageHeader/PageHeader.d.ts +298 -5
- package/lib/components/PageHeader/PageHeader.js +98 -47
- package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +4 -1
- package/lib/components/SidePanel/SidePanel.d.ts +6 -2
- package/lib/components/SidePanel/SidePanel.js +18 -3
- package/lib/components/SidePanel/constants.d.ts +1 -0
- package/lib/components/SidePanel/constants.js +1 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
- package/lib/components/SingleAddSelect/SingleAddSelect.js +2 -1
- package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/lib/components/TagOverflow/TagOverflow.js +154 -28
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +29 -0
- package/lib/components/TagOverflow/TagOverflowModal.js +121 -0
- package/lib/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
- package/lib/components/TagOverflow/TagOverflowPopover.js +144 -0
- package/lib/components/Tearsheet/Tearsheet.d.ts +132 -6
- package/lib/components/Tearsheet/Tearsheet.js +25 -13
- package/lib/components/Tearsheet/TearsheetShell.d.ts +5 -1
- package/lib/components/Tearsheet/TearsheetShell.js +26 -4
- package/lib/components/WebTerminal/WebTerminal.d.ts +4 -0
- package/lib/components/WebTerminal/WebTerminal.js +11 -3
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/hooks/useFocus.d.ts +3 -1
- package/lib/global/js/hooks/useFocus.js +6 -3
- package/lib/global/js/hooks/useRetrieveStepData.d.ts +1 -1
- package/lib/global/js/hooks/useRetrieveStepData.js +1 -1
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +3 -3
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +4 -2
- package/scss/components/GetStartedCard/_carbon-imports.scss +9 -0
- package/scss/components/GetStartedCard/_get-started-card.scss +135 -0
- package/scss/components/GetStartedCard/_index-with-carbon.scss +9 -0
- package/scss/components/GetStartedCard/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel-variables.scss +1 -0
- package/scss/components/StringFormatter/_string-formatter.scss +1 -1
- package/scss/components/TagOverflow/_tag-overflow.scss +157 -0
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/telemetry.yml +25 -16
@@ -24,25 +24,31 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
24
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
25
|
|
26
26
|
var _Crossroads;
|
27
|
-
var _excluded = ["children", "className", "type"];
|
27
|
+
var _excluded = ["children", "className", "iconDescription", "type"];
|
28
28
|
|
29
29
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
30
30
|
var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-button");
|
31
31
|
var componentName = 'GuidebannerElementButton';
|
32
|
+
var defaults = {
|
33
|
+
iconDescription: 'Crossroads'
|
34
|
+
};
|
32
35
|
|
33
36
|
/**
|
34
37
|
* One of two buttons styled specifically for the GuidebannerElement.
|
35
38
|
*/
|
36
|
-
exports.GuidebannerElementButton = function
|
39
|
+
exports.GuidebannerElementButton = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
37
40
|
var children = _ref.children,
|
38
41
|
className = _ref.className,
|
42
|
+
_ref$iconDescription = _ref.iconDescription,
|
43
|
+
iconDescription = _ref$iconDescription === void 0 ? defaults.iconDescription : _ref$iconDescription,
|
39
44
|
type = _ref.type,
|
40
45
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
41
46
|
if (type === 'primary') {
|
42
47
|
return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
43
48
|
className: cx__default["default"](blockClass, className),
|
44
|
-
iconDescription:
|
49
|
+
iconDescription: iconDescription,
|
45
50
|
kind: "tertiary",
|
51
|
+
ref: ref,
|
46
52
|
renderIcon: function renderIcon() {
|
47
53
|
return _Crossroads || (_Crossroads = /*#__PURE__*/React__default["default"].createElement(icons.Crossroads, {
|
48
54
|
size: 16
|
@@ -58,7 +64,7 @@ exports.GuidebannerElementButton = function GuidebannerElementButton(_ref) {
|
|
58
64
|
role: "button",
|
59
65
|
size: "md"
|
60
66
|
}, devtools.getDevtoolsProps(componentName)), children);
|
61
|
-
};
|
67
|
+
});
|
62
68
|
|
63
69
|
// Return a placeholder if not released and not enabled by feature flag
|
64
70
|
exports.GuidebannerElementButton = settings.pkg.checkComponentEnabled(exports.GuidebannerElementButton, componentName);
|
@@ -1,15 +1,22 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface GuidebannerElementLinkProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the GuidebannerElementLink.
|
11
|
+
*/
|
12
|
+
children: ReactNode;
|
13
|
+
/**
|
14
|
+
* Provide an optional class to be applied to the containing node.
|
15
|
+
*/
|
16
|
+
className?: string;
|
12
17
|
}
|
13
|
-
|
14
|
-
|
18
|
+
/**
|
19
|
+
* A link styled specifically for the GuidebannerElement.
|
20
|
+
*/
|
21
|
+
export declare let GuidebannerElementLink: React.ForwardRefExoticComponent<GuidebannerElementLinkProps & React.RefAttributes<Link>>;
|
15
22
|
export {};
|
@@ -27,21 +27,21 @@ var _excluded = ["children", "className"];
|
|
27
27
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
28
28
|
var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element-link");
|
29
29
|
var componentName = 'GuidebannerElementLink';
|
30
|
-
|
31
30
|
/**
|
32
31
|
* A link styled specifically for the GuidebannerElement.
|
33
32
|
*/
|
34
|
-
exports.GuidebannerElementLink = function
|
33
|
+
exports.GuidebannerElementLink = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
35
34
|
var children = _ref.children,
|
36
35
|
className = _ref.className,
|
37
36
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
38
37
|
return /*#__PURE__*/React__default["default"].createElement(react.Link, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
39
38
|
className: cx__default["default"](blockClass, className),
|
40
39
|
kind: "ghost",
|
40
|
+
ref: ref,
|
41
41
|
role: "link",
|
42
42
|
size: "md"
|
43
43
|
}, devtools.getDevtoolsProps(componentName)), children);
|
44
|
-
};
|
44
|
+
});
|
45
45
|
|
46
46
|
// Return a placeholder if not released and not enabled by feature flag
|
47
47
|
exports.GuidebannerElementLink = settings.pkg.checkComponentEnabled(exports.GuidebannerElementLink, componentName);
|
@@ -223,6 +223,7 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
223
223
|
className,
|
224
224
|
// Apply any supplied class names to the main HTML element.
|
225
225
|
variantClass, isVisibleClass),
|
226
|
+
role: "main",
|
226
227
|
"aria-label": interstitialAriaLabel,
|
227
228
|
ref: ref
|
228
229
|
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
|
@@ -248,7 +249,8 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
248
249
|
var renderBody = function renderBody() {
|
249
250
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
250
251
|
className: cx__default["default"]("".concat(blockClass, "--body")),
|
251
|
-
ref: bodyScrollRef
|
252
|
+
ref: bodyScrollRef,
|
253
|
+
tabIndex: 0
|
252
254
|
}, mediaIsDefined ? /*#__PURE__*/React__default["default"].createElement(react.FlexGrid, {
|
253
255
|
fullWidth: true,
|
254
256
|
className: cx__default["default"]("".concat(blockClass, "--body-grid"))
|
@@ -1,5 +1,137 @@
|
|
1
|
+
import React, { ReactNode } from 'react';
|
2
|
+
type Filter = {
|
3
|
+
id?: string;
|
4
|
+
label?: string;
|
5
|
+
};
|
6
|
+
type Modifier = {
|
7
|
+
label?: string;
|
8
|
+
options?: string[];
|
9
|
+
};
|
10
|
+
interface Entry {
|
11
|
+
avatar?: {
|
12
|
+
alt?: string;
|
13
|
+
icon?: () => void;
|
14
|
+
src?: string;
|
15
|
+
theme?: 'light' | 'dark';
|
16
|
+
};
|
17
|
+
children?: ReactNode;
|
18
|
+
icon?: () => void;
|
19
|
+
id: string;
|
20
|
+
subtitle?: string;
|
21
|
+
title: string;
|
22
|
+
value: string;
|
23
|
+
}
|
24
|
+
type Theme = 'light' | 'dark';
|
25
|
+
type ItemType = {
|
26
|
+
entries?: Entry[];
|
27
|
+
modifiers: Modifier;
|
28
|
+
sortBy: string[];
|
29
|
+
filterBy: string[];
|
30
|
+
};
|
31
|
+
interface MultiAddSelectProps {
|
32
|
+
/**
|
33
|
+
* optional class name
|
34
|
+
*/
|
35
|
+
className?: string;
|
36
|
+
/**
|
37
|
+
* placeholder for column input filter
|
38
|
+
*/
|
39
|
+
columnInputPlaceholder?: string;
|
40
|
+
/**
|
41
|
+
* text description that appears under the title
|
42
|
+
*/
|
43
|
+
description?: string;
|
44
|
+
/**
|
45
|
+
* options to display in the global filter box. values are generated
|
46
|
+
* from the id which should correlate with a specific property in an
|
47
|
+
* item entry
|
48
|
+
*/
|
49
|
+
globalFilters?: Filter[];
|
50
|
+
globalFiltersIconDescription?: string;
|
51
|
+
/**
|
52
|
+
* placeholder text for the global filter dropdown
|
53
|
+
*/
|
54
|
+
globalFiltersPlaceholderText?: string;
|
55
|
+
/**
|
56
|
+
* text for the global filter primary button
|
57
|
+
*/
|
58
|
+
globalFiltersPrimaryButtonText?: string;
|
59
|
+
/**
|
60
|
+
* text for the global filter secondary button
|
61
|
+
*/
|
62
|
+
globalFiltersSecondaryButtonText?: string;
|
63
|
+
/**
|
64
|
+
* label for global search input
|
65
|
+
*/
|
66
|
+
globalSearchLabel?: string;
|
67
|
+
/**
|
68
|
+
* placeholder for global search input
|
69
|
+
*/
|
70
|
+
globalSearchPlaceholder?: string;
|
71
|
+
/**
|
72
|
+
* the theme for the empty state illustration
|
73
|
+
*/
|
74
|
+
illustrationTheme?: Theme;
|
75
|
+
/**
|
76
|
+
* title that displays in the sidebar / influencer
|
77
|
+
*/
|
78
|
+
influencerTitle?: string;
|
79
|
+
/**
|
80
|
+
* object that contains the item data. for more information reference the
|
81
|
+
* "Structuring items" section in the docs tab
|
82
|
+
*/
|
83
|
+
items?: ItemType;
|
84
|
+
/**
|
85
|
+
* label that display above the list of items
|
86
|
+
*/
|
87
|
+
itemsLabel?: string;
|
88
|
+
/**
|
89
|
+
* text to display when no results are found from the global search
|
90
|
+
*/
|
91
|
+
noResultsDescription?: string;
|
92
|
+
/**
|
93
|
+
* title to display when no results are found from the global search
|
94
|
+
*/
|
95
|
+
noResultsTitle?: string;
|
96
|
+
/**
|
97
|
+
* text body that displays in the sidebar when nothing is selected
|
98
|
+
*/
|
99
|
+
noSelectionDescription?: string;
|
100
|
+
/**
|
101
|
+
* title that displays in the sidebar when nothing is selected
|
102
|
+
*/
|
103
|
+
noSelectionTitle?: string;
|
104
|
+
/**
|
105
|
+
* function to call when the close button clicked
|
106
|
+
*/
|
107
|
+
onClose?: () => void;
|
108
|
+
/**
|
109
|
+
* text for close button
|
110
|
+
*/
|
111
|
+
onCloseButtonText?: string;
|
112
|
+
/**
|
113
|
+
* function to call when the submit button is clicked. returns a selection
|
114
|
+
*/
|
115
|
+
onSubmit?: () => void;
|
116
|
+
/**
|
117
|
+
* text for the submit button
|
118
|
+
*/
|
119
|
+
onSubmitButtonText?: string;
|
120
|
+
/**
|
121
|
+
* specifies if the component is open or not
|
122
|
+
*/
|
123
|
+
open?: boolean;
|
124
|
+
/**
|
125
|
+
* text that displays when displaying filtered items
|
126
|
+
*/
|
127
|
+
searchResultsTitle?: string;
|
128
|
+
/**
|
129
|
+
* header text
|
130
|
+
*/
|
131
|
+
title?: string;
|
132
|
+
}
|
1
133
|
/**
|
2
134
|
* Used to add or select multiple or more items from larger lists or hierarchies.
|
3
135
|
*/
|
4
|
-
export let MultiAddSelect: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
136
|
+
export declare let MultiAddSelect: React.ForwardRefExoticComponent<MultiAddSelectProps & React.RefAttributes<HTMLDivElement>>;
|
137
|
+
export {};
|
@@ -21,7 +21,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
21
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
22
22
|
|
23
23
|
var componentName = 'MultiAddSelect';
|
24
|
-
|
25
24
|
/**
|
26
25
|
* Used to add or select multiple or more items from larger lists or hierarchies.
|
27
26
|
*/
|
@@ -50,6 +49,7 @@ exports.MultiAddSelect.propTypes = {
|
|
50
49
|
* from the id which should correlate with a specific property in an
|
51
50
|
* item entry
|
52
51
|
*/
|
52
|
+
/**@ts-ignore */
|
53
53
|
globalFilters: index["default"].arrayOf(index["default"].shape({
|
54
54
|
id: index["default"].string,
|
55
55
|
label: index["default"].string
|
@@ -87,6 +87,7 @@ exports.MultiAddSelect.propTypes = {
|
|
87
87
|
* object that contains the item data. for more information reference the
|
88
88
|
* "Structuring items" section in the docs tab
|
89
89
|
*/
|
90
|
+
/**@ts-ignore */
|
90
91
|
items: index["default"].shape({
|
91
92
|
modifiers: index["default"].shape({
|
92
93
|
label: index["default"].string,
|
@@ -1,2 +1,163 @@
|
|
1
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
2
8
|
import React from 'react';
|
9
|
+
import { Link } from '@carbon/react';
|
10
|
+
interface Link {
|
11
|
+
url: string;
|
12
|
+
text: string;
|
13
|
+
}
|
14
|
+
interface Data {
|
15
|
+
id?: string | number;
|
16
|
+
type?: 'error' | 'warning' | 'success' | 'informational';
|
17
|
+
timestamp?: Date;
|
18
|
+
title?: string;
|
19
|
+
description?: string;
|
20
|
+
link?: Link;
|
21
|
+
unread?: boolean;
|
22
|
+
onNotificationClick?: () => void;
|
23
|
+
}
|
24
|
+
interface NotificationsPanelProps {
|
25
|
+
/**
|
26
|
+
* Provide an optional class to be applied to the containing node.
|
27
|
+
*/
|
28
|
+
className?: string;
|
29
|
+
/**
|
30
|
+
* Array of data for Notifications component to render
|
31
|
+
*/
|
32
|
+
data: Data[];
|
33
|
+
/**
|
34
|
+
* Sets the `days ago` label text
|
35
|
+
*/
|
36
|
+
daysAgoText?: (value: number) => string;
|
37
|
+
/**
|
38
|
+
* Label for Dismiss all button
|
39
|
+
*/
|
40
|
+
dismissAllLabel?: string;
|
41
|
+
/**
|
42
|
+
* Label for Dismiss single notification icon button
|
43
|
+
*/
|
44
|
+
dismissSingleNotificationIconDescription?: string;
|
45
|
+
/**
|
46
|
+
* Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
|
47
|
+
*/
|
48
|
+
doNotDisturbDefaultToggled?: boolean;
|
49
|
+
/**
|
50
|
+
* Optional: Label for Do not disturb toggle
|
51
|
+
*/
|
52
|
+
doNotDisturbLabel?: string;
|
53
|
+
/**
|
54
|
+
* Sets the empty state label text when there are no notifications
|
55
|
+
*/
|
56
|
+
emptyStateLabel?: string;
|
57
|
+
/**
|
58
|
+
* Sets the `hour ago` label text
|
59
|
+
*/
|
60
|
+
hourAgoText?: (value: number) => string;
|
61
|
+
/**
|
62
|
+
* Sets the `hours ago` label text
|
63
|
+
*/
|
64
|
+
hoursAgoText?: (value: number) => string;
|
65
|
+
/**
|
66
|
+
* Sets the `minute ago` label text
|
67
|
+
*/
|
68
|
+
minuteAgoText?: (value: number) => string;
|
69
|
+
/**
|
70
|
+
* Sets the `minutes ago` label text
|
71
|
+
*/
|
72
|
+
minutesAgoText?: (value: number) => string;
|
73
|
+
/**
|
74
|
+
* Sets the `month ago` label text
|
75
|
+
*/
|
76
|
+
monthAgoText?: (value: number) => string;
|
77
|
+
/**
|
78
|
+
* Sets the `months ago` label text
|
79
|
+
*/
|
80
|
+
monthsAgoText?: (value: number) => string;
|
81
|
+
/**
|
82
|
+
* Sets the `now` label text
|
83
|
+
*/
|
84
|
+
nowText?: string;
|
85
|
+
/**
|
86
|
+
* Sets the notifications panel open state
|
87
|
+
*/
|
88
|
+
onClickOutside: () => void;
|
89
|
+
/**
|
90
|
+
* Function that will dismiss all notifications
|
91
|
+
*/
|
92
|
+
onDismissAllNotifications?: () => void;
|
93
|
+
/**
|
94
|
+
* Function that will dismiss a single notification
|
95
|
+
*/
|
96
|
+
onDismissSingleNotification?: (prop: any) => void;
|
97
|
+
/**
|
98
|
+
* Optional: function that returns the current selected value of the disable notification toggle
|
99
|
+
*/
|
100
|
+
onDoNotDisturbChange?: (prop: any) => void;
|
101
|
+
/**
|
102
|
+
* Event handler for the View all button
|
103
|
+
*/
|
104
|
+
onSettingsClick?: () => void;
|
105
|
+
/**
|
106
|
+
* Event handler for the View all button
|
107
|
+
*/
|
108
|
+
onViewAllClick?: () => void;
|
109
|
+
/**
|
110
|
+
* Determines whether the notifications panel should render or not
|
111
|
+
*/
|
112
|
+
open: boolean;
|
113
|
+
/**
|
114
|
+
* Sets the previous label text
|
115
|
+
*/
|
116
|
+
previousLabel?: string;
|
117
|
+
/**
|
118
|
+
* Sets the `read less` label text
|
119
|
+
*/
|
120
|
+
readLessLabel?: string;
|
121
|
+
/**
|
122
|
+
* Sets the `read more` label text
|
123
|
+
*/
|
124
|
+
readMoreLabel?: string;
|
125
|
+
/**
|
126
|
+
* Sets the `seconds ago` label text
|
127
|
+
*/
|
128
|
+
secondsAgoText?: (value: number) => string;
|
129
|
+
/**
|
130
|
+
* Sets the settings icon description text
|
131
|
+
*/
|
132
|
+
settingsIconDescription?: string;
|
133
|
+
/**
|
134
|
+
* Sets the title for the Notifications panel
|
135
|
+
*/
|
136
|
+
title?: string;
|
137
|
+
/**
|
138
|
+
* Sets the today label text
|
139
|
+
*/
|
140
|
+
todayLabel?: string;
|
141
|
+
/**
|
142
|
+
* Sets the View all button text
|
143
|
+
*/
|
144
|
+
viewAllLabel?: (value: number) => string;
|
145
|
+
/**
|
146
|
+
* Sets the `year ago` label text
|
147
|
+
*/
|
148
|
+
yearAgoText?: (value: number) => string;
|
149
|
+
/**
|
150
|
+
* Sets the `years ago` label text
|
151
|
+
*/
|
152
|
+
yearsAgoText?: (value: number) => string;
|
153
|
+
/**
|
154
|
+
* Sets the `Yesterday at` label text
|
155
|
+
*/
|
156
|
+
yesterdayAtText?: (value: number) => string;
|
157
|
+
/**
|
158
|
+
* Sets the yesterday label text
|
159
|
+
*/
|
160
|
+
yesterdayLabel?: string;
|
161
|
+
}
|
162
|
+
export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
|
163
|
+
export {};
|
@@ -218,9 +218,9 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
218
218
|
return item.id === id;
|
219
219
|
})[0];
|
220
220
|
var trimLength = 88;
|
221
|
-
var description = notification
|
222
|
-
var descriptionClassName = cx__default["default"](["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification
|
223
|
-
var showMoreButtonClassName = cx__default["default"]([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification
|
221
|
+
var description = notification === null || notification === void 0 ? void 0 : notification['description'];
|
222
|
+
var descriptionClassName = cx__default["default"](["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
|
223
|
+
var showMoreButtonClassName = cx__default["default"]([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
|
224
224
|
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
225
225
|
className: descriptionClassName
|
226
226
|
}, description), description.length > trimLength && /*#__PURE__*/React__default["default"].createElement(react.Button, {
|
@@ -231,14 +231,14 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
231
231
|
size: 16
|
232
232
|
}, props));
|
233
233
|
},
|
234
|
-
iconDescription: notification
|
234
|
+
iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
|
235
235
|
onClick: function onClick(event) {
|
236
236
|
event.preventDefault();
|
237
237
|
event.stopPropagation();
|
238
238
|
var newData = allNotifications.map(function (item) {
|
239
|
-
if (item.id === notification
|
239
|
+
if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
|
240
240
|
return Object.assign({}, item, {
|
241
|
-
showAll: !item
|
241
|
+
showAll: !(item !== null && item !== void 0 && item['showAll'])
|
242
242
|
});
|
243
243
|
}
|
244
244
|
return item;
|
@@ -246,23 +246,21 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
246
246
|
setAllNotifications(newData);
|
247
247
|
},
|
248
248
|
className: showMoreButtonClassName
|
249
|
-
}, notification
|
249
|
+
}, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
|
250
250
|
};
|
251
251
|
var renderNotification = function renderNotification(group, notification, index) {
|
252
252
|
var notificationClassName = cx__default["default"](["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
|
253
253
|
var notificationHeaderClassName = cx__default["default"](["".concat(blockClass, "__notification-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
|
254
254
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
255
|
-
"aria-label": notification.title,
|
256
255
|
key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
|
257
256
|
className: notificationClassName,
|
258
|
-
type: "button",
|
259
257
|
role: "button",
|
260
258
|
tabIndex: 0,
|
261
259
|
onClick: function onClick() {
|
262
260
|
return notification.onNotificationClick(notification);
|
263
261
|
},
|
264
262
|
onKeyDown: function onKeyDown(event) {
|
265
|
-
if (event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
|
263
|
+
if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
|
266
264
|
return;
|
267
265
|
}
|
268
266
|
event.which === 13 && notification.onNotificationClick(notification);
|
@@ -325,7 +323,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
325
323
|
id: blockClass,
|
326
324
|
className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
|
327
325
|
style: {
|
328
|
-
animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') :
|
326
|
+
animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
|
329
327
|
},
|
330
328
|
onAnimationEnd: onAnimationEnd,
|
331
329
|
ref: ref || notificationPanelRef
|
@@ -414,6 +412,7 @@ exports.NotificationsPanel.propTypes = {
|
|
414
412
|
/**
|
415
413
|
* Array of data for Notifications component to render
|
416
414
|
*/
|
415
|
+
/**@ts-ignore*/
|
417
416
|
data: index["default"].arrayOf(index["default"].shape({
|
418
417
|
id: index["default"].oneOfType([index["default"].string, index["default"].number]),
|
419
418
|
type: index["default"].oneOf(['error', 'warning', 'success', 'informational']),
|