@carbon/ibm-products 1.3.0 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. package/css/index-full-carbon.css +1766 -1701
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-without-carbon-released-only.css +32 -41
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +2 -2
  7. package/css/index-without-carbon.css +228 -163
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index.css +1767 -1702
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +2 -2
  13. package/es/components/APIKeyModal/APIKeyModal.js +25 -29
  14. package/es/components/ActionBar/ActionBar.js +4 -1
  15. package/es/components/AddSelect/AddSelect.js +65 -19
  16. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +19 -15
  17. package/es/components/CancelableTextEdit/CancelableTextEdit.js +60 -22
  18. package/es/components/CreateFullPage/CreateFullPage.js +78 -259
  19. package/es/components/CreateFullPage/CreateFullPageStep.js +58 -14
  20. package/es/components/CreateFullPage/index.js +1 -2
  21. package/es/components/CreateInfluencer/CreateInfluencer.js +23 -225
  22. package/es/components/CreateTearsheet/CreateTearsheet.js +69 -146
  23. package/es/components/CreateTearsheet/CreateTearsheetStep.js +59 -16
  24. package/es/components/CreateTearsheet/index.js +0 -1
  25. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +66 -27
  26. package/es/components/ExportModal/ExportModal.js +4 -2
  27. package/es/components/ImportModal/ImportModal.js +2 -1
  28. package/es/components/InlineEdit/InlineEdit.js +224 -0
  29. package/es/components/InlineEdit/index.js +7 -0
  30. package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
  31. package/es/components/MultiAddSelect/index.js +1 -0
  32. package/es/components/OptionsTile/OptionsTile.js +36 -15
  33. package/es/components/PageHeader/PageHeader.js +54 -33
  34. package/es/components/PageHeader/PageHeaderTitle.js +78 -7
  35. package/es/components/PageHeader/PageHeaderUtils.js +21 -2
  36. package/es/components/RemoveModal/RemoveModal.js +4 -2
  37. package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
  38. package/es/components/SingleAddSelect/index.js +1 -0
  39. package/es/components/TagSet/TagSet.js +4 -1
  40. package/es/components/Toolbar/Toolbar.js +69 -8
  41. package/es/components/index.js +4 -2
  42. package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
  43. package/es/global/js/hooks/useCreateComponentStepChange.js +44 -74
  44. package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
  45. package/es/global/js/package-settings.js +4 -2
  46. package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
  47. package/lib/components/ActionBar/ActionBar.js +4 -1
  48. package/lib/components/AddSelect/AddSelect.js +64 -19
  49. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -14
  50. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +61 -22
  51. package/lib/components/CreateFullPage/CreateFullPage.js +78 -259
  52. package/lib/components/CreateFullPage/CreateFullPageStep.js +61 -14
  53. package/lib/components/CreateFullPage/index.js +1 -9
  54. package/lib/components/CreateInfluencer/CreateInfluencer.js +21 -236
  55. package/lib/components/CreateTearsheet/CreateTearsheet.js +71 -148
  56. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +61 -15
  57. package/lib/components/CreateTearsheet/index.js +0 -8
  58. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +67 -35
  59. package/lib/components/ExportModal/ExportModal.js +4 -2
  60. package/lib/components/ImportModal/ImportModal.js +2 -1
  61. package/lib/components/InlineEdit/InlineEdit.js +242 -0
  62. package/lib/components/InlineEdit/index.js +13 -0
  63. package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
  64. package/lib/components/MultiAddSelect/index.js +13 -0
  65. package/lib/components/OptionsTile/OptionsTile.js +36 -15
  66. package/lib/components/PageHeader/PageHeader.js +54 -33
  67. package/lib/components/PageHeader/PageHeaderTitle.js +87 -9
  68. package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
  69. package/lib/components/RemoveModal/RemoveModal.js +4 -2
  70. package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
  71. package/lib/components/SingleAddSelect/index.js +13 -0
  72. package/lib/components/TagSet/TagSet.js +4 -1
  73. package/lib/components/Toolbar/Toolbar.js +69 -6
  74. package/lib/components/index.js +25 -9
  75. package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
  76. package/lib/global/js/hooks/useCreateComponentStepChange.js +44 -74
  77. package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
  78. package/lib/global/js/package-settings.js +4 -2
  79. package/package.json +8 -8
  80. package/scss/components/AddSelect/_add-select.scss +14 -3
  81. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
  82. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +141 -70
  83. package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
  84. package/scss/components/CreateTearsheet/_create-tearsheet.scss +4 -8
  85. package/scss/components/InlineEdit/_index.scss +8 -0
  86. package/scss/components/InlineEdit/_inline-edit.scss +44 -0
  87. package/scss/components/InlineEdit/_storybook-styles.scss +15 -0
  88. package/scss/components/MultiAddSelect/_index.scss +1 -0
  89. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
  90. package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
  91. package/scss/components/PageHeader/_page-header.scss +14 -4
  92. package/scss/components/SingleAddSelect/_index.scss +1 -0
  93. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
  94. package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
  95. package/scss/components/_index.scss +3 -1
  96. package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
  97. package/es/components/CreateFullPage/constants.js +0 -8
  98. package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
  99. package/es/components/CreateTearsheet/constants.js +0 -8
  100. package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
  101. package/es/global/js/utils/hasValidType.js +0 -94
  102. package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
  103. package/lib/components/CreateFullPage/constants.js +0 -16
  104. package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
  105. package/lib/components/CreateTearsheet/constants.js +0 -17
  106. package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
  107. package/lib/global/js/utils/hasValidType.js +0 -110
@@ -1,37 +1,40 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "includeViewAllToggle", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "sideNavAriaLabel", "submitButtonText", "viewAllToggleLabelText", "viewAllToggleOffLabelText", "viewAllToggleOnLabelText"];
4
+ var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
6
5
 
7
6
  /**
8
- * Copyright IBM Corp. 2021, 2021
7
+ * Copyright IBM Corp. 2021, 2022
9
8
  *
10
9
  * This source code is licensed under the Apache-2.0 license found in the
11
10
  * LICENSE file in the root directory of this source tree.
12
11
  */
13
12
  // Import portions of React that are needed.
14
- import React, { useEffect, useCallback, useState } from 'react'; // Other standard imports.
13
+ import React, { useState, createContext } from 'react'; // Other standard imports.
15
14
 
16
15
  import PropTypes from 'prop-types';
17
16
  import cx from 'classnames';
18
17
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
19
- import { pkg } from '../../settings';
20
- import { CREATE_FULL_PAGE_SECTION, CREATE_FULL_PAGE_STEP } from './constants'; // Carbon and package components we use.
18
+ import { pkg } from '../../settings'; // Carbon and package components we use.
21
19
 
22
20
  import { Grid, ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form } from 'carbon-components-react';
23
21
  import { CreateInfluencer } from '../CreateInfluencer';
24
22
  import { ActionSet } from '../ActionSet';
25
23
  import { usePreviousValue, useValidCreateStepCount, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
26
- import { hasValidChildrenType } from '../../global/js/utils/hasValidType';
27
24
  var blockClass = "".concat(pkg.prefix, "--create-full-page");
28
- var componentName = 'CreateFullPage';
25
+ var componentName = 'CreateFullPage'; // This is a general context for the steps container
26
+ // containing information about the state of the container
27
+ // and providing some callback methods for steps to use
28
+
29
+ export var StepsContext = /*#__PURE__*/createContext(null); // This is a context supplied separately to each step in the container
30
+ // to let it know what number it is in the sequence of steps
31
+
32
+ export var StepNumberContext = /*#__PURE__*/createContext(-1);
29
33
  export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
30
34
  var backButtonText = _ref.backButtonText,
31
35
  cancelButtonText = _ref.cancelButtonText,
32
36
  children = _ref.children,
33
37
  className = _ref.className,
34
- includeViewAllToggle = _ref.includeViewAllToggle,
35
38
  modalDangerButtonText = _ref.modalDangerButtonText,
36
39
  modalDescription = _ref.modalDescription,
37
40
  modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -39,11 +42,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
39
42
  nextButtonText = _ref.nextButtonText,
40
43
  onClose = _ref.onClose,
41
44
  onRequestSubmit = _ref.onRequestSubmit,
42
- sideNavAriaLabel = _ref.sideNavAriaLabel,
43
45
  submitButtonText = _ref.submitButtonText,
44
- viewAllToggleLabelText = _ref.viewAllToggleLabelText,
45
- viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
46
- viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
47
46
  rest = _objectWithoutProperties(_ref, _excluded);
48
47
 
49
48
  var _useState = useState([]),
@@ -61,49 +60,59 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
61
60
  currentStep = _useState6[0],
62
61
  setCurrentStep = _useState6[1];
63
62
 
64
- var _useState7 = useState(0),
63
+ var _useState7 = useState(false),
65
64
  _useState8 = _slicedToArray(_useState7, 2),
66
- activeSectionIndex = _useState8[0],
67
- setActiveSectionIndex = _useState8[1];
65
+ isSubmitting = _useState8[0],
66
+ setIsSubmitting = _useState8[1];
68
67
 
69
68
  var _useState9 = useState(false),
70
69
  _useState10 = _slicedToArray(_useState9, 2),
71
- isSubmitting = _useState10[0],
72
- setIsSubmitting = _useState10[1];
73
-
74
- var _useState11 = useState(false),
75
- _useState12 = _slicedToArray(_useState11, 2),
76
- modalIsOpen = _useState12[0],
77
- setModalIsOpen = _useState12[1];
70
+ modalIsOpen = _useState10[0],
71
+ setModalIsOpen = _useState10[1];
78
72
 
79
73
  var previousState = usePreviousValue({
80
74
  currentStep: currentStep,
81
75
  open: open
82
- }); // returns an array of full page steps
83
-
84
- var getFullPageSteps = useCallback(function () {
85
- var _childrenArray$;
86
-
87
- var steps = [];
88
- var childrenArray = Array.isArray(children) ? children : [children];
89
- var extractedChildren = childrenArray && ((_childrenArray$ = childrenArray[0]) === null || _childrenArray$ === void 0 ? void 0 : _childrenArray$.type) === React.Fragment ? childrenArray[0].props.children : childrenArray;
90
- extractedChildren.forEach(function (child) {
91
- if (isFullPageStep(child)) {
92
- steps.push(child);
93
- }
94
- });
95
- return steps;
96
- }, [children]);
97
- useCreateComponentFocus(previousState, currentStep, getFullPageSteps, blockClass);
98
- useValidCreateStepCount(getFullPageSteps, componentName);
76
+ });
77
+
78
+ var _useState11 = useState(false),
79
+ _useState12 = _slicedToArray(_useState11, 2),
80
+ isDisabled = _useState12[0],
81
+ setIsDisabled = _useState12[1];
82
+
83
+ var _useState13 = useState(),
84
+ _useState14 = _slicedToArray(_useState13, 2),
85
+ onNext = _useState14[0],
86
+ _setOnNext = _useState14[1];
87
+
88
+ var _useState15 = useState(),
89
+ _useState16 = _slicedToArray(_useState15, 2),
90
+ onMount = _useState16[0],
91
+ _setOnMount = _useState16[1];
92
+
93
+ var _useState17 = useState([]),
94
+ _useState18 = _slicedToArray(_useState17, 2),
95
+ stepData = _useState18[0],
96
+ setStepData = _useState18[1];
97
+
98
+ var totalStepCount = React.Children.count(children);
99
+ useCreateComponentFocus({
100
+ previousState: previousState,
101
+ currentStep: currentStep,
102
+ blockClass: blockClass,
103
+ onMount: onMount
104
+ });
105
+ useValidCreateStepCount(stepData.length, componentName);
99
106
  useCreateComponentStepChange({
107
+ totalStepCount: totalStepCount,
108
+ onNext: onNext,
109
+ isSubmitDisabled: isDisabled,
100
110
  setCurrentStep: setCurrentStep,
101
111
  setIsSubmitting: setIsSubmitting,
102
112
  setShouldViewAll: setShouldViewAll,
103
113
  onClose: onClose,
104
114
  onRequestSubmit: onRequestSubmit,
105
115
  componentName: componentName,
106
- getComponentSteps: getFullPageSteps,
107
116
  currentStep: currentStep,
108
117
  shouldViewAll: shouldViewAll,
109
118
  backButtonText: backButtonText,
@@ -114,200 +123,18 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
114
123
  componentBlockClass: blockClass,
115
124
  setCreateComponentActions: setCreateFullPageActions,
116
125
  setModalIsOpen: setModalIsOpen
117
- }); // Log a warning to the console in the event there are no CreateFullPageSection components
118
- // inside of the CreateFullPageSteps when the viewAll toggle is provided and turned on.
119
- // currently, we are not supporting the use of FullPageSections -- this may be a future feature
120
-
121
- /* istanbul ignore next */
122
-
123
- useEffect(function () {
124
- if (includeViewAllToggle && shouldViewAll) {
125
- var childrenArray = Array.isArray(children) ? children : [children];
126
- var fullPageStepComponents = childrenArray.filter(function (child) {
127
- return isFullPageStep(child);
128
- });
129
- var fullPageSectionComponents = [];
130
- fullPageStepComponents.forEach(function (child, index) {
131
- // We have received children for a FullPageStep
132
- if (shouldViewAll && typeof child.props.children !== 'undefined') {
133
- // Only a string was provided as children of CreateFullPageStep, this is not permitted when using view all toggle
134
- if (typeof child.props.children === 'string') {
135
- console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
136
- } else {
137
- // The FullPageStep has an array of children, lets check each one to see if it is a FullPageSection
138
- if (child.props.children.length) {
139
- child.props.children.forEach(function (stepChild) {
140
- if (isFullPageSection(stepChild)) {
141
- fullPageSectionComponents.push(stepChild);
142
- }
143
- });
144
- } else {
145
- // The FullPageStep only has a single React element as a child, lets check to see if it is a FullPageSection
146
- if (isFullPageSection(child.props.children)) {
147
- fullPageSectionComponents.push(child.props.children);
148
- }
149
- }
150
- }
151
- } // If there are fewer CreateFullPageSection components than CreateFullPageStep components
152
- // it means that each CreateFullPageStep does not have at least one CreateFullPageSection
153
- // this is not permitted when using view all toggle
154
-
155
-
156
- if (fullPageSectionComponents.length < fullPageStepComponents.length && index === fullPageStepComponents.length - 1 // wait until we've finished checking each FullPageStep before giving a warning
157
- ) {
158
- console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
159
- } // We have received a single child element, lets check to see that it is
160
- // a CreateFullPageSection component, if it is not we should add a console
161
- // warning, as each CreateFullPageStep required at least one CreateFullPageSection,
162
- // when using the view all toggle
163
-
164
-
165
- if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
166
- if (!isFullPageSection(child.props.children)) {
167
- console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
168
- }
169
- }
170
- });
171
- }
172
- }, [includeViewAllToggle, shouldViewAll, children]); // check if child is a full page step component
173
-
174
- var isFullPageStep = function isFullPageStep(child) {
175
- if (child && child.props && child.props.type === CREATE_FULL_PAGE_STEP) {
176
- return true;
177
- }
178
-
179
- return false;
180
- }; // check if child is a full page section component
181
- // currently, we are not supporting the use of FullPageSections -- this may be a future feature
182
-
183
- /* istanbul ignore next */
184
-
185
-
186
- var isFullPageSection = function isFullPageSection(child) {
187
- if (child && child.props && child.props.type === CREATE_FULL_PAGE_SECTION) {
188
- return true;
189
- }
190
-
191
- return false;
192
- }; // renders the step progression components in the left influencer area
193
-
194
-
195
- var getFullPageComponents = function getFullPageComponents(childrenElements) {
196
- var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
197
- var fullPageStepComponents = childrenArray.filter(function (child) {
198
- return isFullPageStep(child);
199
- });
200
- var sectionChildElements = [];
201
- fullPageStepComponents.forEach(function (child) {
202
- // we have received an array of children, lets check to see that each child is
203
- // a FullPageSection component before adding it to sectionChildElements
204
- // currently, we are not supporting the use of FullPageSections -- this may be a future feature
205
-
206
- /* istanbul ignore next */
207
- if (shouldViewAll && child.props.children.length) {
208
- child.props.children.forEach(function (stepChild) {
209
- if (isFullPageSection(stepChild)) {
210
- sectionChildElements.push(stepChild);
211
- }
212
- });
213
- } // we have received a single child element, lets check to see that it is
214
- // a CreateFullPageSection component before adding it to sectionChildElements
215
-
216
-
217
- if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
218
- // currently, we are not supporting the use of FullPageSections -- this may be a future feature
219
-
220
- /* istanbul ignore next */
221
- if (isFullPageSection(child.props.children)) {
222
- sectionChildElements.push(child.props.children);
223
- }
224
- }
225
- });
226
- return {
227
- sections: sectionChildElements,
228
- steps: fullPageStepComponents
229
- };
230
- }; // renders all children (CreateFullPageSteps and regular children elements)
231
-
232
-
233
- var renderChildren = function renderChildren(childrenElements) {
234
- var step = 0;
235
- var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
236
- var indexOfLastFullPageStep = childrenArray.map(function (el) {
237
- var _el$props;
238
-
239
- return el === null || el === void 0 ? void 0 : (_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.type;
240
- }).lastIndexOf(CREATE_FULL_PAGE_STEP);
241
- return /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray.map(function (child, stepIndex) {
242
- var _cx;
243
-
244
- if (!isFullPageStep(child)) {
245
- return child;
246
- }
247
-
248
- step++;
249
- return /*#__PURE__*/React.cloneElement(child, {
250
- className: cx(child.props.className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== step), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === step), _cx)),
251
- key: "key_".concat(stepIndex)
252
- }, /*#__PURE__*/React.createElement(React.Fragment, null, renderStepChildren(child.props.children, indexOfLastFullPageStep === step - 1)));
253
- }));
254
- };
255
-
256
- var renderStepChildren = function renderStepChildren(fullPageStepComponent, isLastFullPageStep) {
257
- var fullPageStepComponents = Array.isArray(fullPageStepComponent) ? fullPageStepComponent : [fullPageStepComponent];
258
- return /*#__PURE__*/React.createElement(React.Fragment, null, fullPageStepComponents.map(function (child, index) {
259
- var _cx2;
260
-
261
- if (!isFullPageSection(child)) {
262
- return child;
263
- } // Needed to be able to not render the divider
264
- // line on the last section of the last step
265
- // currently, we are not supporting the use of FullPageSections -- this may be a future feature
266
-
267
- /* istanbul ignore next */
268
-
269
-
270
- var isLastSectionOfLastStep = isLastFullPageStep && fullPageStepComponents.length - 1 === index;
271
- /* istanbul ignore next */
272
-
273
- return /*#__PURE__*/React.cloneElement(child, {
274
- className: cx(child.props.className, (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__step--hidden-section"), child.props.viewAllOnly && !shouldViewAll), _defineProperty(_cx2, "".concat(blockClass, "__step--visible-section"), !child.props.viewAllOnly || child.props.viewAllOnly && shouldViewAll), _cx2)),
275
- key: "key_".concat(index)
276
- }, /*#__PURE__*/React.createElement(React.Fragment, null, shouldViewAll && /*#__PURE__*/React.createElement("h4", {
277
- className: "".concat(blockClass, "__step-title")
278
- }, child.props.title), child, shouldViewAll && !isLastSectionOfLastStep && /*#__PURE__*/React.createElement("span", {
279
- className: "".concat(blockClass, "__section-divider")
280
- })));
281
- }));
282
- }; // currently, we are not supporting the use of 'view all' toggle state or CreateFullPageSection -- this may be a future feature
126
+ }); // currently, we are not supporting the use of 'view all' toggle state
283
127
 
284
128
  /* istanbul ignore next */
285
129
 
286
-
287
130
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
288
131
  ref: ref,
289
132
  className: cx(blockClass, className)
290
133
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
291
134
  className: "".concat(blockClass, "__influencer")
292
135
  }, /*#__PURE__*/React.createElement(CreateInfluencer, {
293
- activeSectionIndex: activeSectionIndex,
294
- componentBlockClass: blockClass,
295
- createComponentName: componentName,
296
- currentStep: currentStep,
297
- createComponents: getFullPageComponents(children),
298
- includeViewAllToggle: includeViewAllToggle,
299
- handleToggleState: function handleToggleState(toggleState) {
300
- return setShouldViewAll(toggleState);
301
- },
302
- handleActiveSectionIndex: function handleActiveSectionIndex(index) {
303
- return setActiveSectionIndex(index);
304
- },
305
- previousState: previousState,
306
- sideNavAriaLabel: sideNavAriaLabel,
307
- toggleState: shouldViewAll,
308
- viewAllToggleLabelText: viewAllToggleLabelText,
309
- viewAllToggleOffLabelText: viewAllToggleOffLabelText,
310
- viewAllToggleOnLabelText: viewAllToggleOnLabelText
136
+ stepData: stepData,
137
+ currentStep: currentStep
311
138
  })), /*#__PURE__*/React.createElement("div", {
312
139
  className: "".concat(blockClass, "__body")
313
140
  }, /*#__PURE__*/React.createElement("div", {
@@ -316,7 +143,29 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
316
143
  className: "".concat(blockClass, "__content")
317
144
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, {
318
145
  className: "".concat(blockClass, "__form")
319
- }, renderChildren(children)))), /*#__PURE__*/React.createElement(ActionSet, {
146
+ }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
147
+ value: {
148
+ currentStep: currentStep,
149
+ setIsDisabled: setIsDisabled,
150
+ setOnNext: function setOnNext(fn) {
151
+ return _setOnNext(function () {
152
+ return fn;
153
+ });
154
+ },
155
+ setOnMount: function setOnMount(fn) {
156
+ return _setOnMount(function () {
157
+ return fn;
158
+ });
159
+ },
160
+ setStepData: setStepData,
161
+ stepData: stepData,
162
+ totalStepCount: totalStepCount
163
+ }
164
+ }, React.Children.map(children, function (child, index) {
165
+ return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
166
+ value: index + 1
167
+ }, child);
168
+ }))))), /*#__PURE__*/React.createElement(ActionSet, {
320
169
  className: "".concat(blockClass, "__buttons"),
321
170
  actions: createFullPageActions,
322
171
  size: "max"
@@ -361,22 +210,13 @@ CreateFullPage.propTypes = {
361
210
  /**
362
211
  * The main content of the full page
363
212
  */
364
- children: hasValidChildrenType({
365
- componentName: componentName,
366
- childType: CREATE_FULL_PAGE_STEP
367
- }),
213
+ children: PropTypes.node,
368
214
 
369
215
  /**
370
216
  * Provide an optional class to be applied to the containing node.
371
217
  */
372
218
  className: PropTypes.string,
373
219
 
374
- /**
375
- * @ignore
376
- * An optional prop that provides a toggle element in the left side influencer panel
377
- */
378
- includeViewAllToggle: PropTypes.bool,
379
-
380
220
  /**
381
221
  * The primary 'danger' button text in the modal
382
222
  */
@@ -429,26 +269,5 @@ CreateFullPage.propTypes = {
429
269
  /**
430
270
  * The main title of the full page, displayed in the header area.
431
271
  */
432
- title: PropTypes.node,
433
-
434
- /**
435
- * @ignore
436
- * Sets the label text for the view all toggle component
437
- */
438
- viewAllToggleLabelText: PropTypes.string,
439
-
440
- /**
441
- * @ignore
442
- * Sets the label text for the view all toggle `off` text
443
- */
444
- viewAllToggleOffLabelText: PropTypes.string,
445
-
446
- /**
447
- * @ignore
448
- * Sets the label text for the view all toggle `on` text
449
- */
450
- viewAllToggleOnLabelText: PropTypes.string
451
- };
452
- CreateFullPage.defaultProps = {
453
- includeViewAllToggle: false
272
+ title: PropTypes.node
454
273
  };
@@ -1,27 +1,78 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
+
1
4
  /**
2
- * Copyright IBM Corp. 2021, 2021
5
+ * Copyright IBM Corp. 2021, 2022
3
6
  *
4
7
  * This source code is licensed under the Apache-2.0 license found in the
5
8
  * LICENSE file in the root directory of this source tree.
6
9
  */
7
- import React, { forwardRef } from 'react';
10
+ import React, { forwardRef, useContext, useEffect } from 'react';
8
11
  import PropTypes from 'prop-types';
9
12
  import cx from 'classnames';
10
13
  import { pkg } from '../../settings';
11
- import { CREATE_FULL_PAGE_STEP } from './constants.js';
12
14
  import { FormGroup } from 'carbon-components-react';
15
+ import { StepsContext, StepNumberContext } from './CreateFullPage';
16
+ import { usePreviousValue } from '../../global/js/hooks';
17
+ import pconsole from '../../global/js/utils/pconsole';
13
18
  var componentName = 'CreateFullPageStep';
14
19
  var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
15
20
  export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
21
+ var _cx;
22
+
16
23
  var children = _ref.children,
17
24
  className = _ref.className,
18
25
  subtitle = _ref.subtitle,
19
26
  description = _ref.description,
27
+ disableSubmit = _ref.disableSubmit,
28
+ introStep = _ref.introStep,
20
29
  title = _ref.title,
21
30
  hasFieldset = _ref.hasFieldset,
22
- fieldsetLegendText = _ref.fieldsetLegendText;
23
- return /*#__PURE__*/React.createElement("section", {
24
- className: cx(blockClass, className),
31
+ fieldsetLegendText = _ref.fieldsetLegendText,
32
+ onNext = _ref.onNext,
33
+ onMount = _ref.onMount,
34
+ secondaryLabel = _ref.secondaryLabel;
35
+ var steps = useContext(StepsContext);
36
+ var stepNumber = useContext(StepNumberContext);
37
+ var previousState = usePreviousValue({
38
+ currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
39
+ }); // This useEffect reports back the onNext and onMount values so that they can be used
40
+ // in the appropriate custom hooks.
41
+
42
+ useEffect(function () {
43
+ if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
44
+ steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
45
+ steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
46
+ }
47
+ }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
48
+ // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
49
+
50
+ useEffect(function () {
51
+ var _steps$stepData, _steps$stepData2;
52
+
53
+ var stepHasReported = steps === null || steps === void 0 ? void 0 : (_steps$stepData = steps.stepData) === null || _steps$stepData === void 0 ? void 0 : _steps$stepData.includes(function (item) {
54
+ return item.title === title;
55
+ });
56
+
57
+ if (!stepHasReported && (steps === null || steps === void 0 ? void 0 : (_steps$stepData2 = steps.stepData) === null || _steps$stepData2 === void 0 ? void 0 : _steps$stepData2.length) < (steps === null || steps === void 0 ? void 0 : steps.totalStepCount)) {
58
+ steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
59
+ return [].concat(_toConsumableArray(prev), [{
60
+ title: title,
61
+ secondaryLabel: secondaryLabel,
62
+ introStep: introStep
63
+ }]);
64
+ });
65
+ }
66
+ }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
67
+ // steps container context so that it can manage the 'Next' button appropriately.
68
+
69
+ useEffect(function () {
70
+ if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
71
+ steps.setIsDisabled(disableSubmit);
72
+ }
73
+ }, [steps, stepNumber, disableSubmit, onNext]);
74
+ return steps ? /*#__PURE__*/React.createElement("section", {
75
+ className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
25
76
  ref: ref
26
77
  }, /*#__PURE__*/React.createElement("h5", {
27
78
  className: "".concat(blockClass, "-title")
@@ -32,7 +83,7 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
32
83
  }, description), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
33
84
  legendText: fieldsetLegendText,
34
85
  className: "".concat(blockClass, "-fieldset")
35
- }, children) : children);
86
+ }, children) : children) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
36
87
  }); // Return a placeholder if not released and not enabled by feature flag
37
88
 
38
89
  CreateFullPageStep = pkg.checkComponentEnabled(CreateFullPageStep, componentName);
@@ -102,11 +153,4 @@ CreateFullPageStep.propTypes = {
102
153
  * Sets the title text for a create full page step
103
154
  */
104
155
  title: PropTypes.node.isRequired
105
- }; // Default values for component props. Default values are not required for
106
- // props that are required, nor for props where the component can apply
107
- // 'undefined' values reasonably. Default values should be provided when the
108
- // component needs to make a choice or assumption when a prop is not supplied.
109
-
110
- CreateFullPageStep.defaultProps = {
111
- type: CREATE_FULL_PAGE_STEP
112
156
  };
@@ -5,5 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  export { CreateFullPage } from './CreateFullPage';
8
- export { CreateFullPageStep } from './CreateFullPageStep';
9
- export { CreateFullPageSection } from './CreateFullPageSection';
8
+ export { CreateFullPageStep } from './CreateFullPageStep';