@carbon/ibm-products 2.39.0 → 2.40.1-canary.6
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +45 -37
- 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 +45 -37
- 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 +708 -37
- 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 +1 -1
- package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +30 -18
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/checkForHoldingKey.js +16 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +125 -0
- package/es/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/util.js +34 -5
- 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.js +4 -3
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -0
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -4
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/es/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/es/components/Guidebanner/Guidebanner.js +8 -7
- 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.js +0 -1
- 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 +17 -2
- 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.js +35 -20
- package/es/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/es/components/TagOverflow/TagOverflowModal.js +14 -20
- package/es/components/TagOverflow/TagOverflowPopover.js +19 -4
- 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/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/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 +1 -1
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilder.js +6 -1
- package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js +29 -17
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +7 -7
- package/lib/components/ConditionBuilder/ConditionConnector/ConditionConnector.js +6 -6
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +11 -11
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js +20 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -0
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +129 -0
- package/lib/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/util.js +36 -4
- 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.js +4 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -0
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
- package/lib/components/Guidebanner/Guidebanner.d.ts +62 -2
- package/lib/components/Guidebanner/Guidebanner.js +8 -7
- 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.js +0 -1
- 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 +17 -2
- 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.js +34 -19
- package/lib/components/TagOverflow/TagOverflowModal.d.ts +3 -1
- package/lib/components/TagOverflow/TagOverflowModal.js +14 -20
- package/lib/components/TagOverflow/TagOverflowPopover.js +19 -4
- 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/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/package.json +3 -3
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +4 -2
- package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +4 -4
- package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +34 -34
- 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 +5 -2
- package/scss/components/_index-with-carbon.scss +1 -0
- package/telemetry.yml +2 -0
@@ -68,6 +68,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
68
68
|
var scrollContainer = ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__list--container"));
|
69
69
|
var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
|
70
70
|
var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
|
71
|
+
|
72
|
+
// fix for a11y violation element_scrollable_tabbable
|
73
|
+
if (!(scrollContainer !== null && scrollContainer !== void 0 && scrollContainer.getAttribute('tabIndex'))) {
|
74
|
+
scrollContainer === null || scrollContainer === void 0 || scrollContainer.setAttribute('tabIndex', '0');
|
75
|
+
}
|
71
76
|
setScrollBarSizeValue(scrollBarValue);
|
72
77
|
}
|
73
78
|
}, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
|
@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
29
29
|
var _th;
|
30
30
|
var _excluded = ["role"],
|
31
31
|
_excluded2 = ["className", "role"],
|
32
|
-
_excluded3 = ["role"
|
32
|
+
_excluded3 = ["role"];
|
33
33
|
var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
|
34
34
|
var getAccessibilityProps = function getAccessibilityProps(header) {
|
35
35
|
var props = {};
|
@@ -185,11 +185,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
185
185
|
var originalCol = visibleColumns[index];
|
186
186
|
var _header$getHeaderProp = header.getHeaderProps();
|
187
187
|
_header$getHeaderProp.role;
|
188
|
-
var
|
189
|
-
headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
|
188
|
+
var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
|
190
189
|
var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
|
191
190
|
return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
|
192
|
-
className: cx__default["default"](
|
191
|
+
className: cx__default["default"](header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
|
193
192
|
key: header.id,
|
194
193
|
"aria-hidden": header.id === 'spacer' && 'true'
|
195
194
|
}, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {
|
@@ -47,7 +47,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
47
47
|
page = datagridState.page,
|
48
48
|
handleResize = datagridState.handleResize,
|
49
49
|
gridRef = datagridState.gridRef,
|
50
|
-
tableId = datagridState.tableId
|
50
|
+
tableId = datagridState.tableId,
|
51
|
+
onVirtualScroll = datagridState.onVirtualScroll;
|
51
52
|
|
52
53
|
/* istanbul ignore next */
|
53
54
|
var handleVirtualGridResize = function handleVirtualGridResize() {
|
@@ -97,6 +98,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
97
98
|
},
|
98
99
|
estimatedItemSize: rowHeight,
|
99
100
|
onScroll: onScroll,
|
101
|
+
onItemsRendered: function onItemsRendered(e) {
|
102
|
+
return onVirtualScroll === null || onVirtualScroll === void 0 ? void 0 : onVirtualScroll(e);
|
103
|
+
},
|
100
104
|
innerRef: innerListRef,
|
101
105
|
outerRef: testRef,
|
102
106
|
ref: listRef,
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import React, { PropsWithChildren, ReactNode } from 'react';
|
2
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
2
3
|
type ActionIcon = {
|
3
4
|
id?: string;
|
4
5
|
icon?: () => void | object;
|
@@ -50,7 +51,7 @@ interface ExpressiveCardProps extends PropsWithChildren {
|
|
50
51
|
/**
|
51
52
|
* Provides the icon that's displayed at the top of the card
|
52
53
|
*/
|
53
|
-
pictogram?:
|
54
|
+
pictogram?: CarbonIconType;
|
54
55
|
/**
|
55
56
|
* Optionally specify an href for your Button to become an <a> element
|
56
57
|
*/
|
@@ -1,6 +1,66 @@
|
|
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 GuidebannerProps {
|
9
|
+
/**
|
10
|
+
* Provide the contents of the Guidebanner.
|
11
|
+
* One or more GuidebannerElement components are required.
|
12
|
+
*/
|
13
|
+
children: ReactNode;
|
14
|
+
/**
|
15
|
+
* Provide an optional class to be applied to the containing node.
|
16
|
+
*/
|
17
|
+
className?: string;
|
18
|
+
/**
|
19
|
+
* Tooltip text and aria label for the Close button icon.
|
20
|
+
*/
|
21
|
+
closeIconDescription?: string;
|
22
|
+
/**
|
23
|
+
* Text label for the Collapse button.
|
24
|
+
*/
|
25
|
+
collapseButtonLabel?: string;
|
26
|
+
/**
|
27
|
+
* When true, the Guidebanner will initialize in a collapsed state,
|
28
|
+
* showing the title and the Expand button.
|
29
|
+
*
|
30
|
+
* When expanded, it will show the GuidebannerElement child components and the Collapse button.
|
31
|
+
*/
|
32
|
+
collapsible?: boolean;
|
33
|
+
/**
|
34
|
+
* Text label for the Expand button.
|
35
|
+
*/
|
36
|
+
expandButtonLabel?: string;
|
37
|
+
/**
|
38
|
+
* Tooltip text and aria label for the Next button icon.
|
39
|
+
*/
|
40
|
+
nextIconDescription?: string;
|
41
|
+
/**
|
42
|
+
* If defined, a Close button will render in the top-right corner and a
|
43
|
+
* callback function will be triggered when button is clicked.
|
44
|
+
*/
|
45
|
+
onClose?: () => void;
|
46
|
+
/**
|
47
|
+
* Tooltip text and aria label for the Back button icon.
|
48
|
+
*/
|
49
|
+
previousIconDescription?: string;
|
50
|
+
/**
|
51
|
+
* Title text.
|
52
|
+
*/
|
53
|
+
title: string;
|
54
|
+
/**
|
55
|
+
* If true, insert 1 rem of "space" on the left of the component.
|
56
|
+
* This will allow the component's content to line up with other
|
57
|
+
* content on the page under special circumstances.
|
58
|
+
*/
|
59
|
+
withLeftGutter?: boolean;
|
60
|
+
}
|
1
61
|
/**
|
2
62
|
* The guide banner sits at the top of a page, or page-level tab,
|
3
63
|
* to introduce foundational concepts related to the page's content.
|
4
64
|
*/
|
5
|
-
export let Guidebanner: React.ForwardRefExoticComponent<React.RefAttributes<
|
6
|
-
|
65
|
+
export declare let Guidebanner: React.ForwardRefExoticComponent<GuidebannerProps & React.RefAttributes<HTMLDivElement>>;
|
66
|
+
export {};
|
@@ -66,8 +66,8 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
66
66
|
previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
|
67
67
|
title = _ref.title,
|
68
68
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
69
|
-
var scrollRef = React.useRef();
|
70
|
-
var toggleRef = React.useRef();
|
69
|
+
var scrollRef = React.useRef(null);
|
70
|
+
var toggleRef = React.useRef(null);
|
71
71
|
var _useState = React.useState(0),
|
72
72
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
73
73
|
scrollPosition = _useState2[0],
|
@@ -86,6 +86,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
86
86
|
});
|
87
87
|
};
|
88
88
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
89
|
+
"aria-expanded": !isCollapsed,
|
89
90
|
className: cx__default["default"](blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
|
90
91
|
ref: ref
|
91
92
|
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
|
@@ -116,8 +117,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
116
117
|
size: "md",
|
117
118
|
className: "".concat(blockClass, "__toggle-button"),
|
118
119
|
onClick: handleClickToggle,
|
119
|
-
ref: toggleRef
|
120
|
-
"aria-expanded": !isCollapsed
|
120
|
+
ref: toggleRef
|
121
121
|
}, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
122
122
|
className: cx__default["default"]("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
|
123
123
|
}, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
|
@@ -181,9 +181,10 @@ exports.Guidebanner.propTypes = {
|
|
181
181
|
React__default["default"].Children.forEach(prop, function (child) {
|
182
182
|
if (child.type.displayName !== 'GuidebannerElement') {
|
183
183
|
var _child$type, _child$type2;
|
184
|
-
// If not GuidebannerElement
|
185
|
-
//
|
186
|
-
//
|
184
|
+
// If child element is not `GuidebannerElement`, then show:
|
185
|
+
// Carbon Products component's `displayName` (child.type.displayName) or
|
186
|
+
// React component's `name` (child.type.name) or
|
187
|
+
// HTML element's tag name (child.type).
|
187
188
|
error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
|
188
189
|
}
|
189
190
|
});
|
@@ -1,19 +1,32 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
}
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
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 GuidebannerElementProps {
|
9
|
+
/**
|
10
|
+
* An optional button can be rendered below the description.
|
11
|
+
* This can be a link, button, Coachmark button, etc.
|
12
|
+
*/
|
13
|
+
button?: ReactNode;
|
14
|
+
/**
|
15
|
+
* Provide an optional class to be applied to the containing node.
|
16
|
+
*/
|
17
|
+
className?: string;
|
18
|
+
/**
|
19
|
+
* The description of the element.
|
20
|
+
*/
|
21
|
+
description: ReactNode;
|
22
|
+
/**
|
23
|
+
* The title of the element.
|
24
|
+
*/
|
25
|
+
title?: string;
|
16
26
|
}
|
17
|
-
|
18
|
-
|
27
|
+
/**
|
28
|
+
* The GuidebannerElement is a required child component of the Guidebanner,
|
29
|
+
* and acts as a container for a CarouselItem.
|
30
|
+
*/
|
31
|
+
export declare let GuidebannerElement: React.ForwardRefExoticComponent<GuidebannerElementProps & React.RefAttributes<HTMLDivElement>>;
|
19
32
|
export {};
|
@@ -26,19 +26,19 @@ var _excluded = ["button", "className", "description", "title"];
|
|
26
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
27
|
var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element");
|
28
28
|
var componentName = 'GuidebannerElement';
|
29
|
-
|
30
29
|
/**
|
31
30
|
* The GuidebannerElement is a required child component of the Guidebanner,
|
32
31
|
* and acts as a container for a CarouselItem.
|
33
32
|
*/
|
34
|
-
exports.GuidebannerElement = function
|
33
|
+
exports.GuidebannerElement = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
35
34
|
var button = _ref.button,
|
36
35
|
className = _ref.className,
|
37
36
|
description = _ref.description,
|
38
37
|
title = _ref.title,
|
39
38
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
40
39
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
41
|
-
className: cx__default["default"](blockClass, className)
|
40
|
+
className: cx__default["default"](blockClass, className),
|
41
|
+
ref: ref
|
42
42
|
}, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default["default"].createElement("h2", {
|
43
43
|
className: "".concat(blockClass, "-title")
|
44
44
|
}, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
|
@@ -46,7 +46,7 @@ exports.GuidebannerElement = function GuidebannerElement(_ref) {
|
|
46
46
|
}, description), button && /*#__PURE__*/React__default["default"].createElement("div", {
|
47
47
|
className: "".concat(blockClass, "-buttons")
|
48
48
|
}, button));
|
49
|
-
};
|
49
|
+
});
|
50
50
|
|
51
51
|
// Return a placeholder if not released and not enabled by feature flag
|
52
52
|
exports.GuidebannerElement = settings.pkg.checkComponentEnabled(exports.GuidebannerElement, componentName);
|
@@ -1,17 +1,31 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
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 GuidebannerElementButtonProps {
|
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;
|
17
|
+
/**
|
18
|
+
* Provide a description for the icon.
|
19
|
+
*/
|
20
|
+
iconDescription?: string;
|
21
|
+
/**
|
22
|
+
* If type is "primary", then return a tertiary button with the "crossroads" icon,
|
23
|
+
* else return a ghost button.
|
24
|
+
*/
|
25
|
+
type?: string;
|
14
26
|
}
|
15
|
-
|
16
|
-
|
27
|
+
/**
|
28
|
+
* One of two buttons styled specifically for the GuidebannerElement.
|
29
|
+
*/
|
30
|
+
export declare let GuidebannerElementButton: React.ForwardRefExoticComponent<GuidebannerElementButtonProps & React.RefAttributes<Button>>;
|
17
31
|
export {};
|
@@ -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,
|
@@ -252,7 +252,6 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
|
|
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
257
|
role: "button",
|