@carbon/ibm-products 2.38.0-alpha.5 → 2.38.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-without-carbon-released-only.css +218 -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.css +218 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +3 -2
- package/es/components/Checklist/Checklist.js +10 -10
- package/es/components/Checklist/ChecklistChart.d.ts +1 -1
- package/es/components/Checklist/ChecklistChart.js +6 -30
- package/es/components/Coachmark/Coachmark.d.ts +65 -2
- package/es/components/Coachmark/Coachmark.js +7 -10
- package/es/components/Coachmark/CoachmarkDragbar.d.ts +40 -2
- package/es/components/Coachmark/CoachmarkDragbar.js +3 -1
- package/es/components/Coachmark/CoachmarkHeader.d.ts +27 -2
- package/es/components/Coachmark/CoachmarkHeader.js +0 -1
- package/es/components/Coachmark/CoachmarkOverlay.d.ts +42 -2
- package/es/components/Coachmark/CoachmarkOverlay.js +18 -15
- package/es/components/Coachmark/CoachmarkTagline.d.ts +27 -2
- package/es/components/Coachmark/CoachmarkTagline.js +0 -1
- package/es/components/Coachmark/utils/enums.d.ts +20 -20
- package/es/components/Coachmark/utils/enums.js +22 -20
- package/es/components/CoachmarkFixed/CoachmarkFixed.d.ts +42 -2
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +4 -2
- package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts +2 -1
- package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +25 -23
- package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +2 -2
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +14 -24
- package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +2 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +4 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +3 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +11 -11
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.d.ts +5 -3
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +54 -44
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +14 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -2
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +2 -1
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +19 -2
- package/es/components/SearchBar/SearchBar.d.ts +10 -1
- package/es/components/SearchBar/SearchBar.js +26 -20
- package/es/components/TagSet/TagSet.d.ts +87 -3
- package/es/components/TagSet/TagSet.js +20 -9
- package/es/components/TagSet/TagSetModal.d.ts +32 -26
- package/es/components/TagSet/TagSetModal.js +5 -5
- package/es/components/TagSet/TagSetOverflow.d.ts +45 -2
- package/es/components/TagSet/TagSetOverflow.js +14 -12
- package/es/components/WebTerminal/WebTerminal.js +2 -2
- package/es/components/WebTerminal/WebTerminalContentWrapper.d.ts +15 -2
- package/es/components/WebTerminal/hooks/index.d.ts +16 -11
- package/es/components/WebTerminal/hooks/index.js +1 -1
- package/es/global/js/package-settings.d.ts +1 -1
- package/es/global/js/package-settings.js +1 -1
- package/es/node_modules/@carbon/colors/es/index.js +4 -1
- package/es/settings.d.ts +1 -1
- package/lib/components/ActionSet/ActionSet.js +2 -1
- package/lib/components/Checklist/Checklist.js +10 -10
- package/lib/components/Checklist/ChecklistChart.d.ts +1 -1
- package/lib/components/Checklist/ChecklistChart.js +6 -30
- package/lib/components/Coachmark/Coachmark.d.ts +65 -2
- package/lib/components/Coachmark/Coachmark.js +6 -9
- package/lib/components/Coachmark/CoachmarkDragbar.d.ts +40 -2
- package/lib/components/Coachmark/CoachmarkDragbar.js +3 -1
- package/lib/components/Coachmark/CoachmarkHeader.d.ts +27 -2
- package/lib/components/Coachmark/CoachmarkHeader.js +0 -1
- package/lib/components/Coachmark/CoachmarkOverlay.d.ts +42 -2
- package/lib/components/Coachmark/CoachmarkOverlay.js +18 -15
- package/lib/components/Coachmark/CoachmarkTagline.d.ts +27 -2
- package/lib/components/Coachmark/CoachmarkTagline.js +0 -1
- package/lib/components/Coachmark/utils/enums.d.ts +20 -20
- package/lib/components/Coachmark/utils/enums.js +22 -20
- package/lib/components/CoachmarkFixed/CoachmarkFixed.d.ts +42 -2
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +4 -2
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts +2 -1
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +25 -23
- package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +2 -2
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +13 -23
- package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +2 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +4 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +3 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +11 -11
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.d.ts +5 -3
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +54 -44
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +13 -7
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -2
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +2 -1
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts +19 -2
- package/lib/components/SearchBar/SearchBar.d.ts +10 -1
- package/lib/components/SearchBar/SearchBar.js +26 -18
- package/lib/components/TagSet/TagSet.d.ts +87 -3
- package/lib/components/TagSet/TagSet.js +20 -9
- package/lib/components/TagSet/TagSetModal.d.ts +32 -26
- package/lib/components/TagSet/TagSetModal.js +3 -3
- package/lib/components/TagSet/TagSetOverflow.d.ts +45 -2
- package/lib/components/TagSet/TagSetOverflow.js +14 -12
- package/lib/components/WebTerminal/WebTerminal.js +2 -2
- package/lib/components/WebTerminal/WebTerminalContentWrapper.d.ts +15 -2
- package/lib/components/WebTerminal/hooks/index.d.ts +16 -11
- package/lib/components/WebTerminal/hooks/index.js +1 -1
- package/lib/global/js/package-settings.d.ts +1 -1
- package/lib/global/js/package-settings.js +1 -1
- package/lib/node_modules/@carbon/colors/es/index.js +6 -0
- package/lib/settings.d.ts +1 -1
- package/package.json +3 -3
- package/scss/components/Checklist/_carbon-imports.scss +2 -2
- package/scss/components/_index-released-only-with-carbon.scss +2 -1
- package/scss/components/_index-released-only.scss +2 -1
- package/scss/components/_index-with-carbon.scss +1 -0
- package/telemetry.yml +5 -8
@@ -19,8 +19,7 @@ var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
|
|
19
19
|
|
20
20
|
// Default values for props
|
21
21
|
var defaults = {
|
22
|
-
allTagsModalSearchThreshold: 10
|
23
|
-
overflowAlign: 'bottom'
|
22
|
+
allTagsModalSearchThreshold: 10
|
24
23
|
};
|
25
24
|
var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
26
25
|
var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
|
@@ -28,30 +27,30 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
28
27
|
className = _ref.className,
|
29
28
|
onShowAllClick = _ref.onShowAllClick,
|
30
29
|
_ref$overflowAlign = _ref.overflowAlign,
|
31
|
-
overflowAlign = _ref$overflowAlign === void 0 ?
|
30
|
+
overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
|
32
31
|
overflowTags = _ref.overflowTags,
|
33
32
|
overflowType = _ref.overflowType,
|
34
33
|
showAllTagsLabel = _ref.showAllTagsLabel,
|
35
34
|
popoverOpen = _ref.popoverOpen,
|
36
35
|
setPopoverOpen = _ref.setPopoverOpen,
|
37
36
|
rest = _objectWithoutProperties(_ref, _excluded);
|
38
|
-
var localRef = useRef();
|
37
|
+
var localRef = useRef(null);
|
39
38
|
var overflowTagContent = useRef(null);
|
40
39
|
useClickOutside(ref || localRef, function () {
|
41
40
|
if (popoverOpen) {
|
42
|
-
setPopoverOpen(false);
|
41
|
+
setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
|
43
42
|
}
|
44
43
|
});
|
45
44
|
var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
|
46
45
|
ev.stopPropagation();
|
47
46
|
ev.preventDefault();
|
48
|
-
setPopoverOpen(false);
|
47
|
+
setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
|
49
48
|
onShowAllClick();
|
50
49
|
};
|
51
50
|
var handleEscKeyPress = function handleEscKeyPress(event) {
|
52
51
|
var key = event.key;
|
53
52
|
if (key === 'Escape') {
|
54
|
-
setPopoverOpen(false);
|
53
|
+
setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
|
55
54
|
}
|
56
55
|
};
|
57
56
|
return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
|
@@ -67,7 +66,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
67
66
|
open: popoverOpen
|
68
67
|
}, /*#__PURE__*/React__default.createElement(Tag, {
|
69
68
|
onClick: function onClick() {
|
70
|
-
return setPopoverOpen(!popoverOpen);
|
69
|
+
return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
|
71
70
|
},
|
72
71
|
className: cx("".concat(blockClass, "__popover-trigger"))
|
73
72
|
}, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
|
@@ -85,10 +84,12 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
85
84
|
if (overflowType === 'default') {
|
86
85
|
tagProps.filter = false;
|
87
86
|
}
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
87
|
+
if ( /*#__PURE__*/React__default.isValidElement(tag)) {
|
88
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
89
|
+
className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
|
90
|
+
key: index
|
91
|
+
}, /*#__PURE__*/React__default.cloneElement(tag, tagProps));
|
92
|
+
}
|
92
93
|
})), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
|
93
94
|
className: "".concat(blockClass, "__show-all-tags-link"),
|
94
95
|
href: "",
|
@@ -117,6 +118,7 @@ TagSetOverflow.propTypes = {
|
|
117
118
|
/**
|
118
119
|
* tags shown in overflow
|
119
120
|
*/
|
121
|
+
/**@ts-ignore */
|
120
122
|
overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
|
121
123
|
/**
|
122
124
|
* Type of rendering displayed inside of the tag overflow component
|
@@ -72,7 +72,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
72
72
|
*/
|
73
73
|
useEffect(function () {
|
74
74
|
if (isInitiallyOpen) {
|
75
|
-
openWebTerminal();
|
75
|
+
openWebTerminal === null || openWebTerminal === void 0 || openWebTerminal();
|
76
76
|
}
|
77
77
|
}, []); // eslint-disable-line
|
78
78
|
|
@@ -92,7 +92,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
92
92
|
if (prefersReducedMotion) {
|
93
93
|
setRender(false);
|
94
94
|
}
|
95
|
-
closeWebTerminal();
|
95
|
+
closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
|
96
96
|
};
|
97
97
|
return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
|
98
98
|
ref: ref,
|
@@ -1,2 +1,15 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 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
|
+
import React, { ReactNode } from 'react';
|
8
|
+
interface WebTerminalContentWrapperProps {
|
9
|
+
/**
|
10
|
+
* Pass in content as children.
|
11
|
+
*/
|
12
|
+
children: ReactNode | ReactNode[];
|
13
|
+
}
|
14
|
+
export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
15
|
+
export {};
|
@@ -1,12 +1,17 @@
|
|
1
|
-
|
2
|
-
export
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
|
8
|
-
}
|
1
|
+
import React, { ReactNode } from 'react';
|
2
|
+
export interface WebTerminalContextType {
|
3
|
+
open?: boolean;
|
4
|
+
openWebTerminal?: () => void;
|
5
|
+
closeWebTerminal?: () => void;
|
6
|
+
toggleWebTerminal?: () => void;
|
9
7
|
}
|
10
|
-
export
|
11
|
-
|
12
|
-
|
8
|
+
export declare const WebTerminalContext: React.Context<WebTerminalContextType>;
|
9
|
+
interface WebTerminalProviderProps {
|
10
|
+
/**
|
11
|
+
* Provide your own terminal component as children to show up in the web terminal
|
12
|
+
*/
|
13
|
+
children: ReactNode | ReactNode[];
|
14
|
+
}
|
15
|
+
export declare let WebTerminalProvider: React.FC<WebTerminalProviderProps>;
|
16
|
+
export declare const useWebTerminal: () => WebTerminalContextType;
|
17
|
+
export {};
|
@@ -10,7 +10,7 @@ import React__default, { useState, useCallback, useContext, createContext } from
|
|
10
10
|
import PropTypes from '../../../node_modules/prop-types/index.js';
|
11
11
|
import { pkg } from '../../../settings.js';
|
12
12
|
|
13
|
-
var WebTerminalContext = /*#__PURE__*/createContext();
|
13
|
+
var WebTerminalContext = /*#__PURE__*/createContext({});
|
14
14
|
var componentName = 'WebTerminalProvider';
|
15
15
|
var WebTerminalProvider = function WebTerminalProvider(_ref) {
|
16
16
|
var children = _ref.children;
|
@@ -24,6 +24,7 @@ declare namespace defaults {
|
|
24
24
|
let AboutModal: boolean;
|
25
25
|
let APIKeyModal: boolean;
|
26
26
|
let Cascade: boolean;
|
27
|
+
let Checklist: boolean;
|
27
28
|
let CreateModal: boolean;
|
28
29
|
let CreateFullPage: boolean;
|
29
30
|
let CreateFullPageStep: boolean;
|
@@ -112,7 +113,6 @@ declare namespace defaults {
|
|
112
113
|
let DescriptionListRow: boolean;
|
113
114
|
let SearchBar: boolean;
|
114
115
|
let UserAvatar: boolean;
|
115
|
-
let Checklist: boolean;
|
116
116
|
let EmptyStateV2: boolean;
|
117
117
|
let Guidebanner: boolean;
|
118
118
|
let GuidebannerElement: boolean;
|
@@ -22,6 +22,7 @@ var defaults = {
|
|
22
22
|
AboutModal: true,
|
23
23
|
APIKeyModal: true,
|
24
24
|
Cascade: true,
|
25
|
+
Checklist: true,
|
25
26
|
CreateModal: true,
|
26
27
|
CreateFullPage: true,
|
27
28
|
CreateFullPageStep: true,
|
@@ -117,7 +118,6 @@ var defaults = {
|
|
117
118
|
/* new component flags here - comment used by generate CLI */
|
118
119
|
|
119
120
|
// Novice to pro components not yet reviewed and released:
|
120
|
-
Checklist: false,
|
121
121
|
EmptyStateV2: false,
|
122
122
|
Guidebanner: false,
|
123
123
|
GuidebannerElement: false,
|
@@ -5,7 +5,10 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
+
var purple50 = '#a56eff';
|
8
9
|
var purple70 = '#6929c4';
|
9
10
|
var blue90 = '#001d6c';
|
11
|
+
var gray20 = '#e0e0e0';
|
12
|
+
var gray70 = '#525252';
|
10
13
|
|
11
|
-
export { blue90, purple70 };
|
14
|
+
export { blue90, gray20, gray70, purple50, purple70 };
|
package/es/settings.d.ts
CHANGED
@@ -10,6 +10,7 @@ export const pkg: {
|
|
10
10
|
AboutModal: boolean;
|
11
11
|
APIKeyModal: boolean;
|
12
12
|
Cascade: boolean;
|
13
|
+
Checklist: boolean;
|
13
14
|
CreateModal: boolean;
|
14
15
|
CreateFullPage: boolean;
|
15
16
|
CreateFullPageStep: boolean;
|
@@ -98,7 +99,6 @@ export const pkg: {
|
|
98
99
|
DescriptionListRow: boolean;
|
99
100
|
SearchBar: boolean;
|
100
101
|
UserAvatar: boolean;
|
101
|
-
Checklist: boolean;
|
102
102
|
EmptyStateV2: boolean;
|
103
103
|
Guidebanner: boolean;
|
104
104
|
GuidebannerElement: boolean;
|
@@ -107,9 +107,10 @@ var ActionSet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
107
107
|
role: "presentation",
|
108
108
|
stacked: stacking
|
109
109
|
}), buttons.map(function (action, index) {
|
110
|
+
var actionProps = propsHelper.prepareProps(action, ['key']);
|
110
111
|
return /*#__PURE__*/React__default["default"].createElement(ActionSetButton, _rollupPluginBabelHelpers["extends"]({
|
111
112
|
key: action.key || index
|
112
|
-
},
|
113
|
+
}, actionProps, {
|
113
114
|
size: buttonSize
|
114
115
|
}));
|
115
116
|
}));
|
@@ -26,7 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
26
26
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
27
27
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
28
28
|
|
29
|
-
var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "
|
29
|
+
var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
|
30
30
|
|
31
31
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
32
32
|
var blockClass = "".concat(settings.pkg.prefix, "--checklist");
|
@@ -50,7 +50,7 @@ var defaults = {
|
|
50
50
|
onClickViewAll: function onClickViewAll() {},
|
51
51
|
onToggle: function onToggle() {},
|
52
52
|
open: true,
|
53
|
-
|
53
|
+
enableToggle: true,
|
54
54
|
taskLists: [],
|
55
55
|
theme: 'light',
|
56
56
|
toggleLabel: 'Toggle',
|
@@ -77,8 +77,8 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
77
77
|
onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
|
78
78
|
_ref$open = _ref.open,
|
79
79
|
open = _ref$open === void 0 ? defaults.open : _ref$open,
|
80
|
-
_ref$
|
81
|
-
|
80
|
+
_ref$enableToggle = _ref.enableToggle,
|
81
|
+
enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
|
82
82
|
_ref$taskLists = _ref.taskLists,
|
83
83
|
taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
|
84
84
|
_ref$theme = _ref.theme,
|
@@ -142,7 +142,7 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
142
142
|
}, title), chartLabelAndValue && /*#__PURE__*/React__default["default"].createElement("h3", {
|
143
143
|
id: chartLabelId,
|
144
144
|
className: "".concat(blockClass, "__chart-label")
|
145
|
-
}, chartLabel)),
|
145
|
+
}, chartLabel)), enableToggle && /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
|
146
146
|
align: toggleLabelAlign,
|
147
147
|
"aria-controls": listContainerId,
|
148
148
|
"aria-expanded": isOpen,
|
@@ -228,6 +228,10 @@ exports.Checklist.propTypes = {
|
|
228
228
|
* Provide an optional class to be applied to the containing node.
|
229
229
|
*/
|
230
230
|
className: index["default"].string,
|
231
|
+
/**
|
232
|
+
* Whether or not to show the open/close toggle.
|
233
|
+
*/
|
234
|
+
enableToggle: index["default"].bool,
|
231
235
|
/**
|
232
236
|
* Callback for the "View all" button. See also `viewAllLabel`.
|
233
237
|
*/
|
@@ -241,10 +245,6 @@ exports.Checklist.propTypes = {
|
|
241
245
|
* This can be set during initialization, or changed after being rendered.
|
242
246
|
*/
|
243
247
|
open: index["default"].bool,
|
244
|
-
/**
|
245
|
-
* Whether or not to show the open/close toggle.
|
246
|
-
*/
|
247
|
-
showToggle: index["default"].bool,
|
248
248
|
/**
|
249
249
|
* The task list can be broken down into sub-lists.
|
250
250
|
*
|
@@ -271,7 +271,7 @@ exports.Checklist.propTypes = {
|
|
271
271
|
/**
|
272
272
|
* The title of the component.
|
273
273
|
*/
|
274
|
-
title: index["default"].
|
274
|
+
title: index["default"].node,
|
275
275
|
/**
|
276
276
|
* The label for the toggle's tooltip.
|
277
277
|
*/
|
@@ -13,9 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
|
|
13
13
|
var React = require('react');
|
14
14
|
var index = require('../../node_modules/prop-types/index.js');
|
15
15
|
var cx = require('classnames');
|
16
|
+
var clamp = require('lodash/clamp');
|
17
|
+
var index$1 = require('../../node_modules/@carbon/colors/es/index.js');
|
16
18
|
var devtools = require('../../global/js/utils/devtools.js');
|
17
19
|
var settings = require('../../settings.js');
|
18
|
-
var clamp = require('lodash/clamp');
|
19
20
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
22
|
|
@@ -24,32 +25,14 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
24
25
|
var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
|
25
26
|
|
26
27
|
var _excluded = ["className", "value", "theme"];
|
27
|
-
|
28
|
-
// Carbon and package components we use.
|
29
|
-
/* TODO: @import(s) of carbon components and other package components. */
|
30
|
-
|
31
|
-
// The block part of our conventional BEM class names (blockClass__E--M).
|
32
28
|
var blockClass = "".concat(settings.pkg.prefix, "--checklist__chart");
|
33
29
|
var componentName = 'ChecklistChart';
|
34
|
-
|
35
|
-
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
36
|
-
|
37
|
-
// Default values can be included here and then assigned to the prop params,
|
38
|
-
// e.g. prop = defaults.prop,
|
39
|
-
// This gathers default values together neatly and ensures non-primitive
|
40
|
-
// values are initialized early to avoid react making unnecessary re-renders.
|
41
|
-
// Note that default values are not required for props that are 'required',
|
42
|
-
// nor for props where the component can apply undefined values reasonably.
|
43
|
-
// Default values should be provided when the component needs to make a choice
|
44
|
-
// or assumption when a prop is not supplied.
|
45
|
-
|
46
|
-
// Default values for props
|
47
30
|
var defaults = {
|
48
31
|
theme: 'light'
|
49
32
|
};
|
50
33
|
|
51
34
|
/**
|
52
|
-
*
|
35
|
+
* Custom chart component used within Checklist PLG component
|
53
36
|
*/
|
54
37
|
var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
55
38
|
var className = _ref.className,
|
@@ -58,9 +41,8 @@ var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
58
41
|
theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
|
59
42
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
60
43
|
var numDegrees = clamp__default["default"](value * 360, 0, 360);
|
61
|
-
var circleColor = theme === 'light' ?
|
62
|
-
var progressColor =
|
63
|
-
|
44
|
+
var circleColor = theme === 'light' ? index$1.gray20 : index$1.gray70; // $ui-03 (-ish)
|
45
|
+
var progressColor = index$1.purple50;
|
64
46
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
65
47
|
className: cx__default["default"](blockClass, className),
|
66
48
|
style: {
|
@@ -71,13 +53,7 @@ var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
71
53
|
role: "img"
|
72
54
|
}, devtools.getDevtoolsProps(componentName)));
|
73
55
|
});
|
74
|
-
|
75
|
-
// Return a placeholder if not released and not enabled by feature flag
|
76
|
-
// ChecklistChart = pkg.checkComponentEnabled(ChecklistChart, componentName);
|
77
|
-
|
78
|
-
// The display name of the component, used by React. Note that displayName
|
79
|
-
// is used in preference to relying on function.name.
|
80
|
-
// ChecklistChart.displayName = componentName;
|
56
|
+
ChecklistChart.displayName = componentName;
|
81
57
|
|
82
58
|
// The types and DocGen commentary for the component props,
|
83
59
|
// in alphabetical order (for consistency).
|
@@ -1,7 +1,70 @@
|
|
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, { MutableRefObject, ReactNode } from 'react';
|
8
|
+
interface CoachmarkProps {
|
9
|
+
/**
|
10
|
+
* Where to render the Coachmark relative to its target.
|
11
|
+
* Applies only to Floating and Tooltip Coachmarks.
|
12
|
+
* @see COACHMARK_ALIGNMENT
|
13
|
+
*/
|
14
|
+
align?: 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'top' | 'top-left' | 'top-right';
|
15
|
+
/**
|
16
|
+
* Coachmark should use a single CoachmarkOverlayElements component as a child.
|
17
|
+
* @see CoachmarkOverlayElements
|
18
|
+
*/
|
19
|
+
children: ReactNode;
|
20
|
+
/**
|
21
|
+
* Optional class name for this component.
|
22
|
+
*/
|
23
|
+
className?: string;
|
24
|
+
/**
|
25
|
+
* Function to call when the Coachmark closes.
|
26
|
+
*/
|
27
|
+
onClose?: () => void;
|
28
|
+
/**
|
29
|
+
* Optional class name for the Coachmark Overlay component.
|
30
|
+
*/
|
31
|
+
overlayClassName?: string;
|
32
|
+
/**
|
33
|
+
* What kind or style of Coachmark to render.
|
34
|
+
*/
|
35
|
+
overlayKind?: 'tooltip' | 'floating' | 'stacked';
|
36
|
+
overlayRef?: MutableRefObject<HTMLElement | null>;
|
37
|
+
/**
|
38
|
+
* By default, the Coachmark will be appended to the end of `document.body`.
|
39
|
+
* The Coachmark will remain persistent as the user navigates the app until
|
40
|
+
* the user closes the Coachmark.
|
41
|
+
*
|
42
|
+
* Alternatively, the app developer can tightly couple the Coachmark to a DOM
|
43
|
+
* element or other component by specifying a CSS selector. The Coachmark will
|
44
|
+
* remain visible as long as that element remains visible or mounted. When the
|
45
|
+
* element is hidden or component is unmounted, the Coachmark will disappear.
|
46
|
+
*/
|
47
|
+
portalTarget?: string;
|
48
|
+
/**
|
49
|
+
* Fine tune the position of the target in pixels. Applies only to Beacons.
|
50
|
+
*/
|
51
|
+
positionTune?: {
|
52
|
+
x: number;
|
53
|
+
y: number;
|
54
|
+
} | object;
|
55
|
+
/**
|
56
|
+
* The optional button or beacon that the user will click to show the Coachmark.
|
57
|
+
*/
|
58
|
+
target: React.ReactNode;
|
59
|
+
/**
|
60
|
+
* Determines the theme of the component.
|
61
|
+
*/
|
62
|
+
theme?: 'light' | 'dark';
|
63
|
+
}
|
1
64
|
/**
|
2
65
|
* Coachmarks are used to call out specific functionality or concepts
|
3
66
|
* within the UI that may not be intuitive but are important for the
|
4
67
|
* user to gain understanding of the product's main value and discover new use cases.
|
5
68
|
*/
|
6
|
-
export let Coachmark: React.ForwardRefExoticComponent<React.RefAttributes<
|
7
|
-
|
69
|
+
export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
|
70
|
+
export {};
|
@@ -38,7 +38,6 @@ var defaults = {
|
|
38
38
|
overlayKind: 'tooltip',
|
39
39
|
theme: 'light'
|
40
40
|
};
|
41
|
-
|
42
41
|
/**
|
43
42
|
* Coachmarks are used to call out specific functionality or concepts
|
44
43
|
* within the UI that may not be intuitive but are important for the
|
@@ -186,7 +185,9 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
186
185
|
onClose: handleClose,
|
187
186
|
theme: theme,
|
188
187
|
className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
|
189
|
-
}, children),
|
188
|
+
}, children),
|
189
|
+
// Default to `document.body` when `portalNode` is `null`
|
190
|
+
portalNode || document.body)));
|
190
191
|
});
|
191
192
|
|
192
193
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -227,13 +228,9 @@ exports.Coachmark.propTypes = {
|
|
227
228
|
* What kind or style of Coachmark to render.
|
228
229
|
*/
|
229
230
|
overlayKind: index["default"].oneOf(['tooltip', 'floating', 'stacked']),
|
230
|
-
overlayRef: index["default"].
|
231
|
-
|
232
|
-
|
233
|
-
// Or the instance of a DOM native element (see the note about SSR)
|
234
|
-
index["default"].shape({
|
235
|
-
current: index["default"].instanceOf(index.propTypesExports.Component)
|
236
|
-
})]),
|
231
|
+
overlayRef: index["default"].shape({
|
232
|
+
current: index["default"].instanceOf(HTMLElement)
|
233
|
+
}),
|
237
234
|
/**
|
238
235
|
* By default, the Coachmark will be appended to the end of `document.body`.
|
239
236
|
* The Coachmark will remain persistent as the user navigates the app until
|
@@ -1,6 +1,44 @@
|
|
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 from 'react';
|
8
|
+
interface CoachmarkDragbarProps {
|
9
|
+
/**
|
10
|
+
* Handler to manage keyboard interactions with the dragbar.
|
11
|
+
*/
|
12
|
+
a11yKeyboardHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
|
13
|
+
/**
|
14
|
+
* Tooltip text and aria label for the Close button icon.
|
15
|
+
*/
|
16
|
+
closeIconDescription?: string;
|
17
|
+
/**
|
18
|
+
* Function to call when the close button is clicked.
|
19
|
+
*/
|
20
|
+
onClose?: () => void;
|
21
|
+
/**
|
22
|
+
* Function to call when the user clicks and drags the Coachmark.
|
23
|
+
* For internal use only by the parent CoachmarkOverlay.
|
24
|
+
*/
|
25
|
+
onDrag?: (movementX: number, movementY: number) => void;
|
26
|
+
/**
|
27
|
+
* Show/hide the "X" close button.
|
28
|
+
*/
|
29
|
+
showCloseButton?: boolean;
|
30
|
+
/**
|
31
|
+
* Determines the theme of the component.
|
32
|
+
*/
|
33
|
+
theme?: 'light' | 'dark';
|
34
|
+
/**
|
35
|
+
* Additional props passed to the component.
|
36
|
+
*/
|
37
|
+
[key: string]: any;
|
38
|
+
}
|
1
39
|
/**
|
2
40
|
* DO NOT USE. This component is for the exclusive use
|
3
41
|
* of other Novice to Pro components.
|
4
42
|
*/
|
5
|
-
export let CoachmarkDragbar: React.ForwardRefExoticComponent<React.RefAttributes<
|
6
|
-
|
43
|
+
export declare let CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
44
|
+
export {};
|
@@ -40,7 +40,6 @@ var defaults = {
|
|
40
40
|
showCloseButton: true,
|
41
41
|
theme: 'light'
|
42
42
|
};
|
43
|
-
|
44
43
|
/**
|
45
44
|
* DO NOT USE. This component is for the exclusive use
|
46
45
|
* of other Novice to Pro components.
|
@@ -100,6 +99,9 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
100
99
|
className: "".concat(overlayBlockClass, "__handle"),
|
101
100
|
onMouseDown: handleDragStart,
|
102
101
|
onKeyDown: a11yKeyboardHandler
|
102
|
+
// TODO: i18n
|
103
|
+
,
|
104
|
+
title: "Drag Handle"
|
103
105
|
}, _Draggable || (_Draggable = /*#__PURE__*/React__default["default"].createElement(icons.Draggable, {
|
104
106
|
size: "16"
|
105
107
|
}))), showCloseButton && /*#__PURE__*/React__default["default"].createElement(react.Button, {
|
@@ -1,6 +1,31 @@
|
|
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 from 'react';
|
8
|
+
interface CoachmarkHeaderProps {
|
9
|
+
/**
|
10
|
+
* Tooltip text and aria label for the Close button icon.
|
11
|
+
*/
|
12
|
+
closeIconDescription?: string;
|
13
|
+
/**
|
14
|
+
* Function to call when the close button is clicked.
|
15
|
+
*/
|
16
|
+
onClose?: () => void;
|
17
|
+
/**
|
18
|
+
* Show/hide the "X" close button.
|
19
|
+
*/
|
20
|
+
showCloseButton?: boolean;
|
21
|
+
/**
|
22
|
+
* Determines the theme of the component.
|
23
|
+
*/
|
24
|
+
theme?: 'light' | 'dark';
|
25
|
+
}
|
1
26
|
/**
|
2
27
|
* DO NOT USE. This component is for the exclusive use
|
3
28
|
* of other Novice to Pro components.
|
4
29
|
*/
|
5
|
-
export let CoachmarkHeader: React.ForwardRefExoticComponent<React.RefAttributes<
|
6
|
-
|
30
|
+
export declare let CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
|
31
|
+
export {};
|
@@ -1,6 +1,46 @@
|
|
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
|
+
import { COACHMARK_OVERLAY_KIND } from './utils/enums';
|
9
|
+
interface CoachmarkOverlayProps {
|
10
|
+
/**
|
11
|
+
* The CoachmarkOverlayElements child components.
|
12
|
+
* Validation is handled in the parent Coachmark component.
|
13
|
+
*/
|
14
|
+
children: ReactNode;
|
15
|
+
/**
|
16
|
+
* Optional class name for this component.
|
17
|
+
*/
|
18
|
+
className?: string;
|
19
|
+
/**
|
20
|
+
* The visibility of CoachmarkOverlay is
|
21
|
+
* managed in the parent Coachmark component.
|
22
|
+
*/
|
23
|
+
fixedIsVisible: boolean;
|
24
|
+
/**
|
25
|
+
* What kind or style of Coachmark to render.
|
26
|
+
*/
|
27
|
+
kind?: COACHMARK_OVERLAY_KIND;
|
28
|
+
/**
|
29
|
+
* Function to call when the Coachmark closes.
|
30
|
+
*/
|
31
|
+
onClose: () => void;
|
32
|
+
/**
|
33
|
+
* Determines the theme of the component.
|
34
|
+
*/
|
35
|
+
theme?: 'light' | 'dark';
|
36
|
+
/**
|
37
|
+
* Additional props passed to the component.
|
38
|
+
*/
|
39
|
+
[key: string]: any;
|
40
|
+
}
|
1
41
|
/**
|
2
42
|
* DO NOT USE. This component is for the exclusive use
|
3
43
|
* of other Novice to Pro components.
|
4
44
|
*/
|
5
|
-
export let CoachmarkOverlay: React.ForwardRefExoticComponent<React.RefAttributes<
|
6
|
-
|
45
|
+
export declare let CoachmarkOverlay: React.ForwardRefExoticComponent<Omit<CoachmarkOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
46
|
+
export {};
|