@carbon/ibm-products 1.2.5 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +1028 -517
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-without-carbon-released-only.css +187 -108
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon.css +580 -114
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index.css +804 -116
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/es/components/APIKeyModal/APIKeyModal.js +25 -29
- package/es/components/ActionBar/ActionBar.js +4 -1
- package/es/components/ActionSet/ActionSet.js +22 -10
- package/es/components/ActionSet/actions.js +25 -17
- package/es/components/AddSelect/AddSelect.js +198 -0
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
- package/es/components/AddSelect/AddSelectList.js +94 -0
- package/es/components/AddSelect/AddSelectSidebar.js +46 -0
- package/es/components/AddSelect/index.js +7 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +24 -17
- package/es/components/CancelableTextEdit/CancelableTextEdit.js +245 -0
- package/es/components/{CreateTearsheet/constants.js → CancelableTextEdit/index.js} +1 -2
- package/es/components/Card/Card.js +6 -4
- package/es/components/CreateFullPage/CreateFullPage.js +102 -258
- package/es/components/CreateFullPage/CreateFullPageStep.js +65 -13
- package/es/components/CreateFullPage/index.js +1 -2
- package/es/components/CreateInfluencer/CreateInfluencer.js +40 -220
- package/es/components/CreateTearsheet/CreateTearsheet.js +95 -146
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +70 -20
- package/es/components/CreateTearsheet/index.js +0 -1
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +87 -28
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
- package/es/components/ExportModal/ExportModal.js +41 -12
- package/es/components/ImportModal/ImportModal.js +2 -1
- package/es/components/InlineEdit/InlineEdit.js +373 -0
- package/es/components/InlineEdit/index.js +7 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
- package/es/components/MultiAddSelect/index.js +1 -0
- package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
- package/es/components/OptionsTile/OptionsTile.js +36 -15
- package/es/components/PageHeader/PageHeader.js +59 -35
- package/es/components/PageHeader/PageHeaderTitle.js +82 -7
- package/es/components/PageHeader/PageHeaderUtils.js +21 -2
- package/es/components/RemoveModal/RemoveModal.js +4 -2
- package/es/components/SidePanel/SidePanel.js +33 -16
- package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
- package/es/components/SingleAddSelect/index.js +1 -0
- package/es/components/TagSet/TagSet.js +4 -1
- package/es/components/Tearsheet/Tearsheet.js +1 -1
- package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/es/components/Toolbar/Toolbar.js +69 -8
- package/es/components/WebTerminal/WebTerminal.js +1 -1
- package/es/components/index.js +5 -1
- package/es/global/js/hooks/index.js +1 -0
- package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
- package/es/global/js/hooks/useCreateComponentStepChange.js +69 -79
- package/es/global/js/hooks/useResetCreateComponent.js +7 -4
- package/es/global/js/hooks/useRetrieveStepData.js +51 -0
- package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
- package/es/global/js/package-settings.js +5 -1
- package/es/global/js/utils/lastIndexInArray.js +26 -0
- package/es/settings.js +0 -5
- package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
- package/lib/components/ActionBar/ActionBar.js +4 -1
- package/lib/components/ActionSet/ActionSet.js +22 -10
- package/lib/components/ActionSet/actions.js +25 -17
- package/lib/components/AddSelect/AddSelect.js +223 -0
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
- package/lib/components/AddSelect/AddSelectList.js +112 -0
- package/lib/components/AddSelect/AddSelectSidebar.js +63 -0
- package/lib/components/AddSelect/index.js +13 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +23 -16
- package/lib/components/CancelableTextEdit/CancelableTextEdit.js +265 -0
- package/lib/components/CancelableTextEdit/index.js +13 -0
- package/lib/components/Card/Card.js +6 -4
- package/lib/components/CreateFullPage/CreateFullPage.js +102 -258
- package/lib/components/CreateFullPage/CreateFullPageStep.js +68 -13
- package/lib/components/CreateFullPage/index.js +1 -9
- package/lib/components/CreateInfluencer/CreateInfluencer.js +38 -231
- package/lib/components/CreateTearsheet/CreateTearsheet.js +97 -148
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +72 -19
- package/lib/components/CreateTearsheet/index.js +0 -8
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +86 -34
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
- package/lib/components/ExportModal/ExportModal.js +38 -11
- package/lib/components/ImportModal/ImportModal.js +2 -1
- package/lib/components/InlineEdit/InlineEdit.js +389 -0
- package/lib/components/InlineEdit/index.js +13 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
- package/lib/components/MultiAddSelect/index.js +13 -0
- package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
- package/lib/components/OptionsTile/OptionsTile.js +36 -15
- package/lib/components/PageHeader/PageHeader.js +59 -35
- package/lib/components/PageHeader/PageHeaderTitle.js +91 -9
- package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
- package/lib/components/RemoveModal/RemoveModal.js +4 -2
- package/lib/components/SidePanel/SidePanel.js +33 -16
- package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
- package/lib/components/SingleAddSelect/index.js +13 -0
- package/lib/components/TagSet/TagSet.js +4 -1
- package/lib/components/Tearsheet/Tearsheet.js +1 -1
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/Toolbar/Toolbar.js +69 -6
- package/lib/components/WebTerminal/WebTerminal.js +1 -1
- package/lib/components/index.js +33 -1
- package/lib/global/js/hooks/index.js +8 -0
- package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
- package/lib/global/js/hooks/useCreateComponentStepChange.js +69 -79
- package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
- package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
- package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
- package/lib/global/js/package-settings.js +5 -1
- package/lib/global/js/utils/lastIndexInArray.js +35 -0
- package/lib/settings.js +0 -6
- package/package.json +19 -19
- package/scss/components/AddSelect/_add-select.scss +108 -0
- package/scss/components/AddSelect/_index.scss +10 -0
- package/scss/components/AddSelect/_storybook-styles.scss +6 -0
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
- package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
- package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +212 -0
- package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss} +2 -2
- package/scss/components/CancelableTextEdit/_storybook-styles.scss +15 -0
- package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
- package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +6 -10
- package/scss/components/InlineEdit/_index.scss +8 -0
- package/scss/components/InlineEdit/_inline-edit.scss +245 -0
- package/scss/components/InlineEdit/_storybook-styles.scss +28 -0
- package/scss/components/MultiAddSelect/_index.scss +1 -0
- package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
- package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
- package/scss/components/PageHeader/_index.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +15 -5
- package/scss/components/ProductiveCard/_productive-card.scss +0 -4
- package/scss/components/SidePanel/_side-panel.scss +15 -6
- package/scss/components/SingleAddSelect/_index.scss +1 -0
- package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
- package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
- package/scss/components/StatusIcon/_index.scss +1 -1
- package/scss/components/StatusIcon/_status-icon.scss +2 -0
- package/scss/components/TagSet/_index.scss +1 -1
- package/scss/components/UserProfileImage/_index.scss +1 -1
- package/scss/components/WebTerminal/_web-terminal.scss +2 -2
- package/scss/components/_index.scss +4 -0
- package/scss/global/styles/_project-settings.scss +5 -1
- package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
- package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
- package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
- package/es/generated/feature-flags/feature-flags.js +0 -15
- package/es/global/js/utils/hasValidType.js +0 -94
- package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
- package/lib/components/CreateFullPage/constants.js +0 -16
- package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
- package/lib/components/CreateTearsheet/constants.js +0 -17
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
- package/lib/generated/feature-flags/feature-flags.js +0 -22
- package/lib/global/js/utils/hasValidType.js +0 -110
- package/scss/generated/feature-flags/_feature-flags.scss +0 -19
@@ -38,7 +38,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
|
|
38
38
|
var _settings = require("../../settings");
|
39
39
|
|
40
40
|
var _excluded = ["align", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
41
|
-
_excluded2 = ["label"],
|
41
|
+
_excluded2 = ["label", "id"],
|
42
42
|
_excluded3 = ["label"];
|
43
43
|
|
44
44
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -108,6 +108,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
108
108
|
|
109
109
|
setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
|
110
110
|
var label = _ref2.label,
|
111
|
+
id = _ref2.id,
|
111
112
|
other = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
112
113
|
return /*#__PURE__*/_react.default.createElement("div", {
|
113
114
|
key: index,
|
@@ -116,6 +117,8 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
116
117
|
return newSizingTags[index] = el;
|
117
118
|
}
|
118
119
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
|
120
|
+
// ensure id is not duplicated
|
121
|
+
"data-original-id": id,
|
119
122
|
filter: false
|
120
123
|
}), label));
|
121
124
|
}) : []);
|
@@ -94,7 +94,7 @@ Tearsheet.propTypes = _objectSpread({
|
|
94
94
|
actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
|
95
95
|
return 'max';
|
96
96
|
}), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
|
97
|
-
kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
|
97
|
+
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
98
98
|
label: _propTypes.default.string,
|
99
99
|
loading: _propTypes.default.bool,
|
100
100
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -90,7 +90,7 @@ TearsheetNarrow.propTypes = _objectSpread({
|
|
90
90
|
actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
|
91
91
|
return 'lg';
|
92
92
|
}), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
|
93
|
-
kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
|
93
|
+
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
94
94
|
label: _propTypes.default.string,
|
95
95
|
loading: _propTypes.default.bool,
|
96
96
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -311,7 +311,7 @@ TearsheetShell.propTypes = _objectSpread({
|
|
311
311
|
actions: _propTypes.default.arrayOf( // NB we don't include the validator here, as the component wrapping this
|
312
312
|
// one should ensure appropriate validation is done.
|
313
313
|
_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
|
314
|
-
kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
|
314
|
+
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
315
315
|
label: _propTypes.default.string,
|
316
316
|
loading: _propTypes.default.bool,
|
317
317
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
13
13
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
15
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17
|
+
|
16
18
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
17
19
|
|
18
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
@@ -21,6 +23,8 @@ var _propTypes = require("prop-types");
|
|
21
23
|
|
22
24
|
var _react = _interopRequireWildcard(require("react"));
|
23
25
|
|
26
|
+
var _getFocusableElements2 = require("../../global/js/utils/getFocusableElements");
|
27
|
+
|
24
28
|
var _settings = require("../../settings");
|
25
29
|
|
26
30
|
var _excluded = ["children", "className", "vertical"];
|
@@ -37,14 +41,73 @@ var ToolbarContext = /*#__PURE__*/(0, _react.createContext)();
|
|
37
41
|
/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
|
38
42
|
|
39
43
|
exports.ToolbarContext = ToolbarContext;
|
40
|
-
var Toolbar = /*#__PURE__*/(0, _react.forwardRef)(function (
|
41
|
-
var children =
|
42
|
-
className =
|
43
|
-
vertical =
|
44
|
-
rest = (0, _objectWithoutProperties2.default)(
|
44
|
+
var Toolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, r) {
|
45
|
+
var children = _ref2.children,
|
46
|
+
className = _ref2.className,
|
47
|
+
vertical = _ref2.vertical,
|
48
|
+
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
49
|
+
var focusableElements = (0, _react.useRef)();
|
50
|
+
var getFocusableElements = (0, _react.useCallback)(function () {
|
51
|
+
return focusableElements.current;
|
52
|
+
}, [focusableElements]);
|
53
|
+
|
54
|
+
var _ref = (0, _react.useRef)();
|
55
|
+
|
56
|
+
var ref = r || _ref;
|
57
|
+
|
58
|
+
var _useState = (0, _react.useState)(),
|
59
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
60
|
+
focus = _useState2[0],
|
61
|
+
setFocus = _useState2[1];
|
62
|
+
|
63
|
+
(0, _react.useEffect)(function () {
|
64
|
+
focusableElements.current = (0, _getFocusableElements2.getFocusableElements)(ref.current);
|
65
|
+
typeof focus !== 'undefined' && getFocusableElements().forEach(function (element, index) {
|
66
|
+
element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
|
67
|
+
});
|
68
|
+
});
|
69
|
+
(0, _react.useEffect)(function () {
|
70
|
+
typeof focus !== 'undefined' && getFocusableElements()[focus].focus();
|
71
|
+
}, [focus, getFocusableElements]);
|
72
|
+
|
73
|
+
var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
|
74
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
75
|
+
arrowNext = _ref4[0],
|
76
|
+
arrowPrevious = _ref4[1];
|
77
|
+
|
78
|
+
function onArrowDown(increment) {
|
79
|
+
var nextFocus = focus + increment;
|
80
|
+
getFocusableElements()[nextFocus] && setFocus(nextFocus);
|
81
|
+
}
|
82
|
+
|
83
|
+
function onFocus(_ref5) {
|
84
|
+
var target = _ref5.target;
|
85
|
+
var elements = getFocusableElements();
|
86
|
+
elements.includes(target) && setFocus(elements.indexOf(target));
|
87
|
+
}
|
88
|
+
|
89
|
+
function onKeyDown(_ref6) {
|
90
|
+
var key = _ref6.key,
|
91
|
+
target = _ref6.target;
|
92
|
+
|
93
|
+
if (getFocusableElements().includes(target)) {
|
94
|
+
switch (key) {
|
95
|
+
case arrowNext:
|
96
|
+
onArrowDown(1);
|
97
|
+
break;
|
98
|
+
|
99
|
+
case arrowPrevious:
|
100
|
+
onArrowDown(-1);
|
101
|
+
break;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
45
106
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
46
107
|
ref: ref,
|
47
|
-
className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--vertical"), vertical))
|
108
|
+
className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--vertical"), vertical)),
|
109
|
+
onFocus: onFocus,
|
110
|
+
onKeyDown: onKeyDown
|
48
111
|
}, vertical && {
|
49
112
|
'aria-orientation': 'vertical'
|
50
113
|
}, {
|
@@ -80,7 +80,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
80
80
|
ref: ref,
|
81
81
|
className: (0, _classnames.default)([blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), (0, _defineProperty2.default)(_ref2, className, className), _ref2)]),
|
82
82
|
style: {
|
83
|
-
animation: "".concat(open ? '
|
83
|
+
animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
|
84
84
|
},
|
85
85
|
onAnimationEnd: onAnimationEnd
|
86
86
|
}), /*#__PURE__*/_react.default.createElement("header", {
|
package/lib/components/index.js
CHANGED
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "AboutModal", {
|
|
15
15
|
return _AboutModal.AboutModal;
|
16
16
|
}
|
17
17
|
});
|
18
|
+
Object.defineProperty(exports, "CancelableTextEdit", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _CancelableTextEdit.CancelableTextEdit;
|
22
|
+
}
|
23
|
+
});
|
18
24
|
Object.defineProperty(exports, "Cascade", {
|
19
25
|
enumerable: true,
|
20
26
|
get: function get() {
|
@@ -135,6 +141,12 @@ Object.defineProperty(exports, "ImportModal", {
|
|
135
141
|
return _ImportModal.ImportModal;
|
136
142
|
}
|
137
143
|
});
|
144
|
+
Object.defineProperty(exports, "InlineEdit", {
|
145
|
+
enumerable: true,
|
146
|
+
get: function get() {
|
147
|
+
return _InlineEdit.InlineEdit;
|
148
|
+
}
|
149
|
+
});
|
138
150
|
Object.defineProperty(exports, "LoadingBar", {
|
139
151
|
enumerable: true,
|
140
152
|
get: function get() {
|
@@ -147,6 +159,12 @@ Object.defineProperty(exports, "ModifiedTabs", {
|
|
147
159
|
return _ModifiedTabs.ModifiedTabs;
|
148
160
|
}
|
149
161
|
});
|
162
|
+
Object.defineProperty(exports, "MultiAddSelect", {
|
163
|
+
enumerable: true,
|
164
|
+
get: function get() {
|
165
|
+
return _MultiAddSelect.MultiAddSelect;
|
166
|
+
}
|
167
|
+
});
|
150
168
|
Object.defineProperty(exports, "NoDataEmptyState", {
|
151
169
|
enumerable: true,
|
152
170
|
get: function get() {
|
@@ -213,6 +231,12 @@ Object.defineProperty(exports, "SidePanel", {
|
|
213
231
|
return _SidePanel.SidePanel;
|
214
232
|
}
|
215
233
|
});
|
234
|
+
Object.defineProperty(exports, "SingleAddSelect", {
|
235
|
+
enumerable: true,
|
236
|
+
get: function get() {
|
237
|
+
return _SingleAddSelect.SingleAddSelect;
|
238
|
+
}
|
239
|
+
});
|
216
240
|
Object.defineProperty(exports, "StatusIcon", {
|
217
241
|
enumerable: true,
|
218
242
|
get: function get() {
|
@@ -306,6 +330,8 @@ var _LoadingBar = require("./LoadingBar");
|
|
306
330
|
|
307
331
|
var _ModifiedTabs = require("./ModifiedTabs");
|
308
332
|
|
333
|
+
var _MultiAddSelect = require("./MultiAddSelect");
|
334
|
+
|
309
335
|
var _NotificationsPanel = require("./NotificationsPanel");
|
310
336
|
|
311
337
|
var _PageHeader = require("./PageHeader");
|
@@ -318,6 +344,8 @@ var _Saving = require("./Saving");
|
|
318
344
|
|
319
345
|
var _SidePanel = require("./SidePanel");
|
320
346
|
|
347
|
+
var _SingleAddSelect = require("./SingleAddSelect");
|
348
|
+
|
321
349
|
var _StatusIcon = require("./StatusIcon");
|
322
350
|
|
323
351
|
var _TagSet = require("./TagSet");
|
@@ -332,4 +360,8 @@ var _WebTerminal = require("./WebTerminal");
|
|
332
360
|
|
333
361
|
var _EditSidePanel = require("./EditSidePanel");
|
334
362
|
|
335
|
-
var _OptionsTile = require("./OptionsTile");
|
363
|
+
var _OptionsTile = require("./OptionsTile");
|
364
|
+
|
365
|
+
var _CancelableTextEdit = require("./CancelableTextEdit");
|
366
|
+
|
367
|
+
var _InlineEdit = require("./InlineEdit");
|
@@ -39,6 +39,12 @@ Object.defineProperty(exports, "useResetCreateComponent", {
|
|
39
39
|
return _useResetCreateComponent.useResetCreateComponent;
|
40
40
|
}
|
41
41
|
});
|
42
|
+
Object.defineProperty(exports, "useRetrieveStepData", {
|
43
|
+
enumerable: true,
|
44
|
+
get: function get() {
|
45
|
+
return _useRetrieveStepData.useRetrieveStepData;
|
46
|
+
}
|
47
|
+
});
|
42
48
|
Object.defineProperty(exports, "useValidCreateStepCount", {
|
43
49
|
enumerable: true,
|
44
50
|
get: function get() {
|
@@ -72,4 +78,6 @@ var _usePreviousValue = require("./usePreviousValue");
|
|
72
78
|
|
73
79
|
var _useResetCreateComponent = require("./useResetCreateComponent");
|
74
80
|
|
81
|
+
var _useRetrieveStepData = require("./useRetrieveStepData");
|
82
|
+
|
75
83
|
var _useValidCreateStepCount = require("./useValidCreateStepCount");
|
@@ -15,34 +15,30 @@ var _getFocusableElements = require("../utils/getFocusableElements");
|
|
15
15
|
* This source code is licensed under the Apache-2.0 license found in the
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
17
17
|
*/
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
18
|
+
// Focus the first focusable element and call the onMount prop for the current step if one is provided
|
19
|
+
var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
|
20
|
+
var previousState = _ref.previousState,
|
21
|
+
currentStep = _ref.currentStep,
|
22
|
+
blockClass = _ref.blockClass,
|
23
|
+
onMount = _ref.onMount;
|
24
|
+
(0, _react.useEffect)(function () {
|
25
|
+
if (typeof onMount === 'function') {
|
26
|
+
onMount();
|
27
|
+
}
|
28
|
+
}, [onMount]);
|
27
29
|
(0, _react.useEffect)(function () {
|
28
30
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
|
29
|
-
var visibleStepInnerContent = document.querySelector(".".concat(
|
30
|
-
var
|
31
|
-
var focusableStepElements = createComponentSteps && createComponentSteps.length && (0, _getFocusableElements.getFocusableElements)(visibleStepInnerContent);
|
32
|
-
var activeStepComponent = createComponentSteps && createComponentSteps.length && createComponentSteps[currentStep - 1];
|
33
|
-
|
34
|
-
if (activeStepComponent && activeStepComponent.props.onMount) {
|
35
|
-
activeStepComponent.props.onMount();
|
36
|
-
}
|
31
|
+
var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
|
32
|
+
var focusableStepElements = visibleStepInnerContent ? (0, _getFocusableElements.getFocusableElements)(visibleStepInnerContent) : [];
|
37
33
|
|
38
34
|
if (focusableStepElements && focusableStepElements.length) {
|
39
35
|
focusableStepElements[0].focus();
|
40
36
|
} else {
|
41
|
-
var nextButton = document.querySelector(".".concat(
|
37
|
+
var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
|
42
38
|
nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
|
43
39
|
}
|
44
40
|
}
|
45
|
-
}, [currentStep,
|
41
|
+
}, [currentStep, previousState, blockClass, onMount]);
|
46
42
|
};
|
47
43
|
|
48
44
|
exports.useCreateComponentFocus = useCreateComponentFocus;
|
@@ -14,19 +14,23 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
14
14
|
var _react = require("react");
|
15
15
|
|
16
16
|
/**
|
17
|
-
* Copyright IBM Corp. 2021,
|
17
|
+
* Copyright IBM Corp. 2021, 2022
|
18
18
|
*
|
19
19
|
* This source code is licensed under the Apache-2.0 license found in the
|
20
20
|
* LICENSE file in the root directory of this source tree.
|
21
21
|
*/
|
22
22
|
var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
23
|
-
var
|
23
|
+
var firstIncludedStep = _ref.firstIncludedStep,
|
24
|
+
lastIncludedStep = _ref.lastIncludedStep,
|
25
|
+
stepData = _ref.stepData,
|
26
|
+
onNext = _ref.onNext,
|
27
|
+
isSubmitDisabled = _ref.isSubmitDisabled,
|
28
|
+
setCurrentStep = _ref.setCurrentStep,
|
24
29
|
setIsSubmitting = _ref.setIsSubmitting,
|
25
30
|
setShouldViewAll = _ref.setShouldViewAll,
|
26
31
|
onClose = _ref.onClose,
|
27
32
|
onRequestSubmit = _ref.onRequestSubmit,
|
28
33
|
componentName = _ref.componentName,
|
29
|
-
getComponentSteps = _ref.getComponentSteps,
|
30
34
|
currentStep = _ref.currentStep,
|
31
35
|
shouldViewAll = _ref.shouldViewAll,
|
32
36
|
backButtonText = _ref.backButtonText,
|
@@ -39,8 +43,6 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
|
39
43
|
setModalIsOpen = _ref.setModalIsOpen;
|
40
44
|
// useEffect to handle multi step logic
|
41
45
|
(0, _react.useEffect)(function () {
|
42
|
-
var _getComponentSteps;
|
43
|
-
|
44
46
|
var onUnmount = function onUnmount() {
|
45
47
|
if (componentName !== 'CreateFullPage') {
|
46
48
|
setCurrentStep(0);
|
@@ -85,73 +87,47 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
|
85
87
|
};
|
86
88
|
}();
|
87
89
|
|
88
|
-
var isSubmitDisabled = function isSubmitDisabled() {
|
89
|
-
var step = 0;
|
90
|
-
var submitDisabled = false;
|
91
|
-
var viewAllSubmitDisabled = false;
|
92
|
-
var createComponentSteps = getComponentSteps();
|
93
|
-
createComponentSteps.forEach(function (child) {
|
94
|
-
step++;
|
95
|
-
|
96
|
-
if (currentStep === step) {
|
97
|
-
submitDisabled = child.props.disableSubmit;
|
98
|
-
}
|
99
|
-
|
100
|
-
if (shouldViewAll && child.props.disableSubmit) {
|
101
|
-
viewAllSubmitDisabled = true;
|
102
|
-
}
|
103
|
-
});
|
104
|
-
|
105
|
-
if (!shouldViewAll) {
|
106
|
-
return submitDisabled;
|
107
|
-
}
|
108
|
-
|
109
|
-
return viewAllSubmitDisabled;
|
110
|
-
};
|
111
|
-
|
112
90
|
var handleNext = /*#__PURE__*/function () {
|
113
91
|
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
|
114
|
-
var createSteps;
|
115
92
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
116
93
|
while (1) {
|
117
94
|
switch (_context2.prev = _context2.next) {
|
118
95
|
case 0:
|
119
96
|
setIsSubmitting(true);
|
120
|
-
createSteps = getComponentSteps();
|
121
97
|
|
122
|
-
if (!
|
123
|
-
_context2.next =
|
98
|
+
if (!(typeof onNext === 'function')) {
|
99
|
+
_context2.next = 14;
|
124
100
|
break;
|
125
101
|
}
|
126
102
|
|
127
|
-
_context2.prev =
|
128
|
-
_context2.next =
|
129
|
-
return
|
103
|
+
_context2.prev = 2;
|
104
|
+
_context2.next = 5;
|
105
|
+
return onNext();
|
130
106
|
|
131
|
-
case
|
107
|
+
case 5:
|
132
108
|
continueToNextStep();
|
133
|
-
_context2.next =
|
109
|
+
_context2.next = 12;
|
134
110
|
break;
|
135
111
|
|
136
|
-
case
|
137
|
-
_context2.prev =
|
138
|
-
_context2.t0 = _context2["catch"](
|
112
|
+
case 8:
|
113
|
+
_context2.prev = 8;
|
114
|
+
_context2.t0 = _context2["catch"](2);
|
139
115
|
setIsSubmitting(false);
|
140
116
|
console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
|
141
117
|
|
142
|
-
case
|
143
|
-
_context2.next =
|
118
|
+
case 12:
|
119
|
+
_context2.next = 15;
|
144
120
|
break;
|
145
121
|
|
146
|
-
case
|
122
|
+
case 14:
|
147
123
|
continueToNextStep();
|
148
124
|
|
149
|
-
case
|
125
|
+
case 15:
|
150
126
|
case "end":
|
151
127
|
return _context2.stop();
|
152
128
|
}
|
153
129
|
}
|
154
|
-
}, _callee2, null, [[
|
130
|
+
}, _callee2, null, [[2, 8]]);
|
155
131
|
}));
|
156
132
|
|
157
133
|
return function handleNext() {
|
@@ -161,51 +137,49 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
|
161
137
|
|
162
138
|
var handleSubmit = /*#__PURE__*/function () {
|
163
139
|
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
|
164
|
-
var createSteps;
|
165
140
|
return _regenerator.default.wrap(function _callee3$(_context3) {
|
166
141
|
while (1) {
|
167
142
|
switch (_context3.prev = _context3.next) {
|
168
143
|
case 0:
|
169
|
-
setIsSubmitting(true);
|
170
|
-
createSteps = getComponentSteps(); // last step should have onNext as well
|
144
|
+
setIsSubmitting(true); // last step should have onNext as well
|
171
145
|
|
172
|
-
if (!
|
173
|
-
_context3.next =
|
146
|
+
if (!(typeof onNext === 'function')) {
|
147
|
+
_context3.next = 15;
|
174
148
|
break;
|
175
149
|
}
|
176
150
|
|
177
|
-
_context3.prev =
|
178
|
-
_context3.next =
|
179
|
-
return
|
151
|
+
_context3.prev = 2;
|
152
|
+
_context3.next = 5;
|
153
|
+
return onNext();
|
180
154
|
|
181
|
-
case
|
182
|
-
_context3.next =
|
155
|
+
case 5:
|
156
|
+
_context3.next = 7;
|
183
157
|
return handleOnRequestSubmit();
|
184
158
|
|
185
|
-
case
|
186
|
-
_context3.next =
|
159
|
+
case 7:
|
160
|
+
_context3.next = 13;
|
187
161
|
break;
|
188
162
|
|
189
|
-
case
|
190
|
-
_context3.prev =
|
191
|
-
_context3.t0 = _context3["catch"](
|
163
|
+
case 9:
|
164
|
+
_context3.prev = 9;
|
165
|
+
_context3.t0 = _context3["catch"](2);
|
192
166
|
setIsSubmitting(false);
|
193
167
|
console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
|
194
168
|
|
195
|
-
case
|
196
|
-
_context3.next =
|
169
|
+
case 13:
|
170
|
+
_context3.next = 17;
|
197
171
|
break;
|
198
172
|
|
199
|
-
case
|
200
|
-
_context3.next =
|
173
|
+
case 15:
|
174
|
+
_context3.next = 17;
|
201
175
|
return handleOnRequestSubmit();
|
202
176
|
|
203
|
-
case
|
177
|
+
case 17:
|
204
178
|
case "end":
|
205
179
|
return _context3.stop();
|
206
180
|
}
|
207
181
|
}
|
208
|
-
}, _callee3, null, [[
|
182
|
+
}, _callee3, null, [[2, 9]]);
|
209
183
|
}));
|
210
184
|
|
211
185
|
return function handleSubmit() {
|
@@ -213,22 +187,29 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
|
213
187
|
};
|
214
188
|
}();
|
215
189
|
|
216
|
-
if ((
|
217
|
-
var createSteps = getComponentSteps();
|
218
|
-
var total = createSteps.length;
|
190
|
+
if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
|
219
191
|
var buttons = [];
|
220
192
|
|
221
|
-
if (
|
193
|
+
if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
|
222
194
|
buttons.push({
|
223
195
|
key: 'create-action-button-back',
|
224
196
|
label: backButtonText,
|
225
197
|
onClick: function onClick() {
|
226
198
|
return setCurrentStep(function (prev) {
|
227
|
-
|
199
|
+
// Find previous included step to render
|
200
|
+
// There will always be a previous step otherwise we will
|
201
|
+
// have disabled the back button since we have reached the first visible step
|
202
|
+
do {
|
203
|
+
var _stepData;
|
204
|
+
|
205
|
+
prev--;
|
206
|
+
} while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
|
207
|
+
|
208
|
+
return prev;
|
228
209
|
});
|
229
210
|
},
|
230
211
|
kind: 'secondary',
|
231
|
-
disabled: currentStep ===
|
212
|
+
disabled: currentStep === firstIncludedStep
|
232
213
|
});
|
233
214
|
}
|
234
215
|
|
@@ -242,22 +223,31 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
|
|
242
223
|
});
|
243
224
|
buttons.push({
|
244
225
|
key: 'create-action-button-submit',
|
245
|
-
label: shouldViewAll ? submitButtonText : currentStep <
|
246
|
-
onClick: shouldViewAll ? handleSubmit : currentStep <
|
247
|
-
disabled: isSubmitDisabled
|
226
|
+
label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
|
227
|
+
onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
|
228
|
+
disabled: isSubmitDisabled,
|
248
229
|
kind: 'primary',
|
249
230
|
loading: isSubmitting,
|
250
231
|
className: "".concat(componentBlockClass, "__create-button")
|
251
232
|
});
|
252
233
|
setCreateComponentActions(buttons);
|
253
234
|
}
|
254
|
-
}, [
|
235
|
+
}, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
|
255
236
|
var continueToNextStep = (0, _react.useCallback)(function () {
|
256
237
|
setIsSubmitting(false);
|
257
238
|
setCurrentStep(function (prev) {
|
258
|
-
|
239
|
+
// Find next included step to render
|
240
|
+
// There will always be a next step otherwise we will
|
241
|
+
// have reach the onSubmit
|
242
|
+
do {
|
243
|
+
var _stepData2;
|
244
|
+
|
245
|
+
prev++;
|
246
|
+
} while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
|
247
|
+
|
248
|
+
return prev;
|
259
249
|
});
|
260
|
-
}, [setCurrentStep, setIsSubmitting]);
|
250
|
+
}, [setCurrentStep, setIsSubmitting, stepData]);
|
261
251
|
};
|
262
252
|
|
263
253
|
exports.useCreateComponentStepChange = useCreateComponentStepChange;
|
@@ -8,7 +8,7 @@ exports.useResetCreateComponent = void 0;
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
10
|
/**
|
11
|
-
* Copyright IBM Corp. 2021,
|
11
|
+
* Copyright IBM Corp. 2021, 2022
|
12
12
|
*
|
13
13
|
* This source code is licensed under the Apache-2.0 license found in the
|
14
14
|
* LICENSE file in the root directory of this source tree.
|
@@ -17,6 +17,7 @@ var _react = require("react");
|
|
17
17
|
/**
|
18
18
|
* Resets the current step of the create component if it has been closed.
|
19
19
|
* @param {object} useResetCreateComponent - Create component that uses this custom hook
|
20
|
+
* @param {object} useResetCreateComponent.firstIncludedStep
|
20
21
|
* @param {object} useResetCreateComponent.previousState
|
21
22
|
* @param {boolean} useResetCreateComponent.open
|
22
23
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
@@ -25,7 +26,8 @@ var _react = require("react");
|
|
25
26
|
* @param {string} useResetCreateComponent.componentName
|
26
27
|
*/
|
27
28
|
var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
28
|
-
var
|
29
|
+
var firstIncludedStep = _ref.firstIncludedStep,
|
30
|
+
previousState = _ref.previousState,
|
29
31
|
open = _ref.open,
|
30
32
|
setCurrentStep = _ref.setCurrentStep,
|
31
33
|
initialStep = _ref.initialStep,
|
@@ -36,7 +38,8 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
36
38
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
37
39
|
setCurrentStep(Number(initialStep));
|
38
40
|
} else {
|
39
|
-
|
41
|
+
// default should be fist includedStep instead of just 1
|
42
|
+
setCurrentStep(firstIncludedStep);
|
40
43
|
} // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
|
41
44
|
|
42
45
|
|
@@ -44,7 +47,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
44
47
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
45
48
|
}
|
46
49
|
}
|
47
|
-
}, [open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
50
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
48
51
|
};
|
49
52
|
|
50
53
|
exports.useResetCreateComponent = useResetCreateComponent;
|