@carbon/ibm-products 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/css/index-full-carbon.css +124 -40
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-without-carbon-released-only.css +124 -40
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +1 -1
  7. package/css/index-without-carbon.css +124 -40
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +1 -1
  10. package/css/index.css +124 -40
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +1 -1
  13. package/es/components/ActionSet/ActionSet.js +22 -10
  14. package/es/components/ActionSet/actions.js +25 -17
  15. package/es/components/CreateFullPage/CreateFullPage.js +30 -5
  16. package/es/components/CreateFullPage/CreateFullPageStep.js +40 -32
  17. package/es/components/CreateInfluencer/CreateInfluencer.js +25 -3
  18. package/es/components/CreateTearsheet/CreateTearsheet.js +32 -6
  19. package/es/components/CreateTearsheet/CreateTearsheetStep.js +45 -38
  20. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +24 -4
  21. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  22. package/es/components/ExportModal/ExportModal.js +39 -12
  23. package/es/components/SidePanel/SidePanel.js +1 -1
  24. package/es/components/Tearsheet/Tearsheet.js +1 -1
  25. package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
  26. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  27. package/es/global/js/hooks/index.js +1 -0
  28. package/es/global/js/hooks/useCreateComponentStepChange.js +31 -11
  29. package/es/global/js/hooks/useResetCreateComponent.js +7 -4
  30. package/es/global/js/hooks/useRetrieveStepData.js +51 -0
  31. package/es/global/js/utils/lastIndexInArray.js +26 -0
  32. package/lib/components/ActionSet/ActionSet.js +22 -10
  33. package/lib/components/ActionSet/actions.js +25 -17
  34. package/lib/components/CreateFullPage/CreateFullPage.js +29 -4
  35. package/lib/components/CreateFullPage/CreateFullPageStep.js +38 -30
  36. package/lib/components/CreateInfluencer/CreateInfluencer.js +25 -3
  37. package/lib/components/CreateTearsheet/CreateTearsheet.js +31 -5
  38. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +43 -36
  39. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +22 -2
  40. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  41. package/lib/components/ExportModal/ExportModal.js +36 -11
  42. package/lib/components/SidePanel/SidePanel.js +1 -1
  43. package/lib/components/Tearsheet/Tearsheet.js +1 -1
  44. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
  45. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  46. package/lib/global/js/hooks/index.js +8 -0
  47. package/lib/global/js/hooks/useCreateComponentStepChange.js +31 -11
  48. package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
  49. package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
  50. package/lib/global/js/utils/lastIndexInArray.js +35 -0
  51. package/package.json +15 -15
  52. package/scss/components/StatusIcon/_status-icon.scss +2 -0
@@ -33,6 +33,8 @@ var _ActionSet = require("../ActionSet");
33
33
 
34
34
  var _hooks = require("../../global/js/hooks");
35
35
 
36
+ var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
37
+
36
38
  var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
37
39
 
38
40
  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); }
@@ -116,8 +118,30 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
116
118
  stepData = _useState18[0],
117
119
  setStepData = _useState18[1];
118
120
 
119
- var totalStepCount = _react.default.Children.count(children);
121
+ var _useState19 = (0, _react.useState)(1),
122
+ _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
123
+ firstIncludedStep = _useState20[0],
124
+ setFirstIncludedStep = _useState20[1];
125
+
126
+ var _useState21 = (0, _react.useState)(null),
127
+ _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
128
+ lastIncludedStep = _useState22[0],
129
+ setLastIncludedStep = _useState22[1];
120
130
 
131
+ (0, _react.useEffect)(function () {
132
+ var firstItem = stepData.findIndex(function (item) {
133
+ return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
134
+ }) + 1;
135
+ var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
136
+
137
+ if (firstItem !== firstIncludedStep) {
138
+ setFirstIncludedStep(firstItem);
139
+ }
140
+
141
+ if (lastItem !== lastIncludedStep) {
142
+ setLastIncludedStep(lastItem);
143
+ }
144
+ }, [stepData, firstIncludedStep, lastIncludedStep]);
121
145
  (0, _hooks.useCreateComponentFocus)({
122
146
  previousState: previousState,
123
147
  currentStep: currentStep,
@@ -126,7 +150,9 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
126
150
  });
127
151
  (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
128
152
  (0, _hooks.useCreateComponentStepChange)({
129
- totalStepCount: totalStepCount,
153
+ firstIncludedStep: firstIncludedStep,
154
+ lastIncludedStep: lastIncludedStep,
155
+ stepData: stepData,
130
156
  onNext: onNext,
131
157
  isSubmitDisabled: isDisabled,
132
158
  setCurrentStep: setCurrentStep,
@@ -180,8 +206,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
180
206
  });
181
207
  },
182
208
  setStepData: setStepData,
183
- stepData: stepData,
184
- totalStepCount: totalStepCount
209
+ stepData: stepData
185
210
  }
186
211
  }, _react.default.Children.map(children, function (child, index) {
187
212
  return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
@@ -11,7 +11,7 @@ exports.CreateFullPageStep = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
13
 
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
 
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
 
@@ -49,6 +49,7 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
49
49
  subtitle = _ref.subtitle,
50
50
  description = _ref.description,
51
51
  disableSubmit = _ref.disableSubmit,
52
+ includeStep = _ref.includeStep,
52
53
  introStep = _ref.introStep,
53
54
  title = _ref.title,
54
55
  hasFieldset = _ref.hasFieldset,
@@ -56,47 +57,45 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
56
57
  onNext = _ref.onNext,
57
58
  onMount = _ref.onMount,
58
59
  secondaryLabel = _ref.secondaryLabel;
59
- var steps = (0, _react.useContext)(_CreateFullPage.StepsContext);
60
+ var stepsContext = (0, _react.useContext)(_CreateFullPage.StepsContext);
60
61
  var stepNumber = (0, _react.useContext)(_CreateFullPage.StepNumberContext);
62
+
63
+ var _useState = (0, _react.useState)(),
64
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
65
+ shouldIncludeStep = _useState2[0],
66
+ setShouldIncludeStep = _useState2[1];
67
+
61
68
  var previousState = (0, _hooks.usePreviousValue)({
62
- currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
69
+ currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
70
+ });
71
+ (0, _hooks.useRetrieveStepData)({
72
+ stepsContext: stepsContext,
73
+ stepNumber: stepNumber,
74
+ introStep: introStep,
75
+ shouldIncludeStep: shouldIncludeStep,
76
+ secondaryLabel: secondaryLabel,
77
+ title: title
63
78
  }); // This useEffect reports back the onNext and onMount values so that they can be used
64
79
  // in the appropriate custom hooks.
65
80
 
66
81
  (0, _react.useEffect)(function () {
67
- 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)) {
68
- steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
69
- steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
82
+ if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
83
+ stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
84
+ stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
70
85
  }
71
- }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
72
- // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
73
-
86
+ }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
74
87
  (0, _react.useEffect)(function () {
75
- var _steps$stepData, _steps$stepData2;
76
-
77
- 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) {
78
- return item.title === title;
79
- });
80
-
81
- 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)) {
82
- steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
83
- return [].concat((0, _toConsumableArray2.default)(prev), [{
84
- title: title,
85
- secondaryLabel: secondaryLabel,
86
- introStep: introStep
87
- }]);
88
- });
89
- }
90
- }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
88
+ setShouldIncludeStep(includeStep);
89
+ }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
91
90
  // steps container context so that it can manage the 'Next' button appropriately.
92
91
 
93
92
  (0, _react.useEffect)(function () {
94
- if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
95
- steps.setIsDisabled(disableSubmit);
93
+ if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
94
+ stepsContext.setIsDisabled(disableSubmit);
96
95
  }
97
- }, [steps, stepNumber, disableSubmit, onNext]);
98
- return steps ? /*#__PURE__*/_react.default.createElement("section", {
99
- className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
96
+ }, [stepsContext, stepNumber, disableSubmit, onNext]);
97
+ return stepsContext ? /*#__PURE__*/_react.default.createElement("section", {
98
+ className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
100
99
  ref: ref
101
100
  }, /*#__PURE__*/_react.default.createElement("h5", {
102
101
  className: "".concat(blockClass, "-title")
@@ -146,6 +145,12 @@ CreateFullPageStep.propTypes = {
146
145
  */
147
146
  hasFieldset: _propTypes.default.bool,
148
147
 
148
+ /**
149
+ * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
150
+ * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
151
+ */
152
+ includeStep: _propTypes.default.bool,
153
+
149
154
  /**
150
155
  * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
151
156
  */
@@ -178,4 +183,7 @@ CreateFullPageStep.propTypes = {
178
183
  * Sets the title text for a create full page step
179
184
  */
180
185
  title: _propTypes.default.node.isRequired
186
+ };
187
+ CreateFullPageStep.defaultProps = {
188
+ includeStep: true
181
189
  };
@@ -35,21 +35,42 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
35
35
  currentStep = _ref.currentStep,
36
36
  stepData = _ref.stepData;
37
37
 
38
- // renders the step progression components in the left influencer area
38
+ var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
39
+ var dynamicSteps = [];
40
+ array.forEach(function (item, index) {
41
+ var _array$index;
42
+
43
+ if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
44
+ dynamicSteps.push(item);
45
+ }
46
+ });
47
+ return dynamicSteps.length;
48
+ }; // renders the step progression components in the left influencer area
49
+
50
+
39
51
  var renderProgressSteps = function renderProgressSteps() {
40
52
  var _stepData$, _stepData$2;
41
53
 
42
54
  var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
43
55
  return !(item !== null && item !== void 0 && item.introStep);
44
56
  });
57
+ var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
58
+ return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
59
+ }); // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
60
+ // we need to subtract the number of !shouldIncludeStep/s before the current step
61
+ // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
62
+
63
+ var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
45
64
  return /*#__PURE__*/_react.default.createElement("div", {
46
65
  className: "".concat(blockClass, "__left-nav")
47
66
  }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
48
- currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - 2 : currentStep - 1,
67
+ currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
68
+ : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
69
+ ,
49
70
  spaceEqually: true,
50
71
  vertical: true,
51
72
  className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
52
- }, extractedSteps.map(function (step, stepIndex) {
73
+ }, progressSteps.map(function (step, stepIndex) {
53
74
  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
54
75
  label: step.title,
55
76
  key: stepIndex,
@@ -84,6 +105,7 @@ CreateInfluencer.propTypes = {
84
105
  stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
85
106
  introStep: _propTypes.default.bool,
86
107
  secondaryLabel: _propTypes.default.string,
108
+ shouldIncludeStep: _propTypes.default.bool,
87
109
  title: _propTypes.default.node
88
110
  }))
89
111
  };
@@ -35,6 +35,8 @@ var _hooks = require("../../global/js/hooks");
35
35
 
36
36
  var _devtools = require("../../global/js/utils/devtools");
37
37
 
38
+ var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
39
+
38
40
  var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
39
41
 
40
42
  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); }
@@ -110,13 +112,35 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
110
112
  stepData = _useState16[0],
111
113
  setStepData = _useState16[1];
112
114
 
113
- var totalStepCount = _react.default.Children.count(children);
115
+ var _useState17 = (0, _react.useState)(1),
116
+ _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
117
+ firstIncludedStep = _useState18[0],
118
+ setFirstIncludedStep = _useState18[1];
119
+
120
+ var _useState19 = (0, _react.useState)(null),
121
+ _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
122
+ lastIncludedStep = _useState20[0],
123
+ setLastIncludedStep = _useState20[1];
114
124
 
115
125
  var previousState = (0, _hooks.usePreviousValue)({
116
126
  currentStep: currentStep,
117
127
  open: open
118
128
  });
119
129
  var contentRef = (0, _react.useRef)();
130
+ (0, _react.useEffect)(function () {
131
+ var firstItem = stepData.findIndex(function (item) {
132
+ return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
133
+ }) + 1;
134
+ var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
135
+
136
+ if (firstItem !== firstIncludedStep) {
137
+ setFirstIncludedStep(firstItem);
138
+ }
139
+
140
+ if (lastItem !== lastIncludedStep) {
141
+ setLastIncludedStep(lastItem);
142
+ }
143
+ }, [stepData, firstIncludedStep, lastIncludedStep]);
120
144
  (0, _hooks.useCreateComponentFocus)({
121
145
  previousState: previousState,
122
146
  currentStep: currentStep,
@@ -125,15 +149,18 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
125
149
  });
126
150
  (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
127
151
  (0, _hooks.useResetCreateComponent)({
152
+ firstIncludedStep: firstIncludedStep,
128
153
  previousState: previousState,
129
154
  open: open,
130
155
  setCurrentStep: setCurrentStep,
131
156
  initialStep: initialStep,
132
- totalSteps: totalStepCount,
157
+ totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
133
158
  componentName: componentName
134
159
  });
135
160
  (0, _hooks.useCreateComponentStepChange)({
136
- totalStepCount: totalStepCount,
161
+ firstIncludedStep: firstIncludedStep,
162
+ lastIncludedStep: lastIncludedStep,
163
+ stepData: stepData,
137
164
  onNext: onNext,
138
165
  isSubmitDisabled: isDisabled,
139
166
  setCurrentStep: setCurrentStep,
@@ -206,8 +233,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
206
233
  });
207
234
  },
208
235
  setStepData: setStepData,
209
- stepData: stepData,
210
- totalStepCount: totalStepCount
236
+ stepData: stepData
211
237
  }
212
238
  }, _react.default.Children.map(children, function (child, index) {
213
239
  return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
@@ -11,7 +11,7 @@ exports.CreateTearsheetStep = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
13
 
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
 
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
 
@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
34
34
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
35
 
36
36
  /**
37
- * Copyright IBM Corp. 2021, 2021
37
+ * Copyright IBM Corp. 2021, 2022
38
38
  *
39
39
  * This source code is licensed under the Apache-2.0 license found in the
40
40
  * LICENSE file in the root directory of this source tree.
@@ -46,57 +46,57 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
46
46
 
47
47
  var children = _ref.children,
48
48
  className = _ref.className,
49
- subtitle = _ref.subtitle,
50
49
  description = _ref.description,
51
50
  disableSubmit = _ref.disableSubmit,
52
- introStep = _ref.introStep,
53
- title = _ref.title,
54
- hasFieldset = _ref.hasFieldset,
55
51
  fieldsetLegendText = _ref.fieldsetLegendText,
52
+ hasFieldset = _ref.hasFieldset,
53
+ includeStep = _ref.includeStep,
54
+ introStep = _ref.introStep,
56
55
  onNext = _ref.onNext,
57
56
  onMount = _ref.onMount,
58
- secondaryLabel = _ref.secondaryLabel;
59
- var steps = (0, _react.useContext)(_CreateTearsheet.StepsContext);
57
+ secondaryLabel = _ref.secondaryLabel,
58
+ subtitle = _ref.subtitle,
59
+ title = _ref.title;
60
+ var stepsContext = (0, _react.useContext)(_CreateTearsheet.StepsContext);
60
61
  var stepNumber = (0, _react.useContext)(_CreateTearsheet.StepNumberContext);
62
+
63
+ var _useState = (0, _react.useState)(),
64
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
65
+ shouldIncludeStep = _useState2[0],
66
+ setShouldIncludeStep = _useState2[1];
67
+
61
68
  var previousState = (0, _hooks.usePreviousValue)({
62
- currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
69
+ currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
70
+ });
71
+ (0, _hooks.useRetrieveStepData)({
72
+ stepsContext: stepsContext,
73
+ stepNumber: stepNumber,
74
+ introStep: introStep,
75
+ shouldIncludeStep: shouldIncludeStep,
76
+ secondaryLabel: secondaryLabel,
77
+ title: title
63
78
  }); // This useEffect reports back the onNext and onMount values so that they can be used
64
79
  // in the appropriate custom hooks.
65
80
 
66
81
  (0, _react.useEffect)(function () {
67
- 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)) {
68
- steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
69
- steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
82
+ if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
83
+ stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
84
+ stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
70
85
  }
71
- }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
72
- // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
86
+ }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
73
87
 
74
88
  (0, _react.useEffect)(function () {
75
- var _steps$stepData, _steps$stepData2;
76
-
77
- 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) {
78
- return item.title === title;
79
- });
80
-
81
- 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)) {
82
- steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
83
- return [].concat((0, _toConsumableArray2.default)(prev), [{
84
- title: title,
85
- secondaryLabel: secondaryLabel,
86
- introStep: introStep
87
- }]);
88
- });
89
- }
90
- }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
89
+ setShouldIncludeStep(includeStep);
90
+ }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
91
91
  // steps container context so that it can manage the 'Next' button appropriately.
92
92
 
93
93
  (0, _react.useEffect)(function () {
94
- if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
95
- steps.setIsDisabled(disableSubmit);
94
+ if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
95
+ stepsContext.setIsDisabled(disableSubmit);
96
96
  }
97
- }, [steps, stepNumber, disableSubmit, onNext]);
98
- return steps ? /*#__PURE__*/_react.default.createElement("div", {
99
- className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
97
+ }, [stepsContext, stepNumber, disableSubmit, onNext]);
98
+ return stepsContext ? /*#__PURE__*/_react.default.createElement("div", {
99
+ className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
100
100
  ref: ref
101
101
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
102
102
  xlg: 12,
@@ -155,6 +155,12 @@ CreateTearsheetStep.propTypes = {
155
155
  */
156
156
  hasFieldset: _propTypes.default.bool,
157
157
 
158
+ /**
159
+ * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
160
+ * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
161
+ */
162
+ includeStep: _propTypes.default.bool,
163
+
158
164
  /**
159
165
  * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
160
166
  */
@@ -193,5 +199,6 @@ CreateTearsheetStep.propTypes = {
193
199
  // component needs to make a choice or assumption when a prop is not supplied.
194
200
 
195
201
  CreateTearsheetStep.defaultProps = {
196
- hasFieldset: true
202
+ hasFieldset: true,
203
+ includeStep: true
197
204
  };
@@ -122,6 +122,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
122
122
  isInvalid = _useState22[0],
123
123
  setIsInvalid = _useState22[1];
124
124
 
125
+ var _useState23 = (0, _react.useState)(false),
126
+ _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
127
+ shouldIncludeAdditionalStep = _useState24[0],
128
+ setShouldIncludeAdditionalStep = _useState24[1];
129
+
125
130
  var clearCreateData = function clearCreateData() {
126
131
  setStepOneTextInputValue('');
127
132
  setTopicDescriptionValue('');
@@ -132,6 +137,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
132
137
  setIsInvalid(false);
133
138
  setOpen(false);
134
139
  setValue1('');
140
+ setShouldIncludeAdditionalStep(false);
135
141
  };
136
142
 
137
143
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -234,12 +240,26 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
234
240
  onToggle: function onToggle(event) {
235
241
  return setShouldReject(event);
236
242
  }
237
- })))), /*#__PURE__*/_react.default.createElement(CustomStep, {
243
+ }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
244
+ labelText: "Include additional step",
245
+ id: "include-additional-step-checkbox",
246
+ onChange: function onChange(value) {
247
+ return setShouldIncludeAdditionalStep(value);
248
+ },
249
+ checked: shouldIncludeAdditionalStep
250
+ })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
251
+ title: "Dynamic step",
252
+ subtitle: "Dynamic step subtitle",
253
+ description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
254
+ hasFieldset: false,
255
+ includeStep: shouldIncludeAdditionalStep
256
+ }, "dynamic step content"), /*#__PURE__*/_react.default.createElement(CustomStep, {
238
257
  title: "Location",
239
258
  subtitle: "Custom step subtitle",
240
259
  description: "Custom step description (see storybook implementation for new custom step capability)",
241
260
  value1: value1,
242
- setValue1: setValue1
261
+ setValue1: setValue1,
262
+ hasFieldset: false
243
263
  }), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
244
264
  title: "Partitions",
245
265
  disableSubmit: !stepTwoTextInputValue,
@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
32
32
  /* eslint-disable react/prop-types */
33
33
 
34
34
  /**
35
- * Copyright IBM Corp. 2021, 2021
35
+ * Copyright IBM Corp. 2021, 2022
36
36
  *
37
37
  * This source code is licensed under the Apache-2.0 license found in the
38
38
  * LICENSE file in the root directory of this source tree.
@@ -177,14 +177,16 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
177
177
  size: "lg"
178
178
  }), /*#__PURE__*/_react.default.createElement("span", {
179
179
  className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
180
- }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
180
+ }, "Plus")))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
181
181
  title: "Conditional step",
182
182
  subtitle: "This step will only show for plus category creation flows",
183
- hasFieldset: false
184
- }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
183
+ hasFieldset: false,
184
+ includeStep: selectedCategory === 'plus'
185
+ }, "This step will only show for plus create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
185
186
  title: "Standard step only",
186
- hasFieldset: false
187
- }, "This step will only show for standard flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
187
+ hasFieldset: false,
188
+ includeStep: selectedCategory === 'standard'
189
+ }, "This step will only show for standard create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
188
190
  onNext: function onNext() {
189
191
  return new Promise(function (resolve, reject) {
190
192
  setTimeout(function () {
@@ -33,7 +33,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
33
33
 
34
34
  var _settings = require("../../settings");
35
35
 
36
- var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
36
+ var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"];
37
37
 
38
38
  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); }
39
39
 
@@ -52,7 +52,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
52
52
  error = _ref.error,
53
53
  errorMessage = _ref.errorMessage,
54
54
  filename = _ref.filename,
55
+ hidePasswordLabel = _ref.hidePasswordLabel,
55
56
  inputLabel = _ref.inputLabel,
57
+ inputType = _ref.inputType,
56
58
  invalidInputText = _ref.invalidInputText,
57
59
  loading = _ref.loading,
58
60
  loadingMessage = _ref.loadingMessage,
@@ -63,6 +65,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
63
65
  preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
64
66
  primaryButtonText = _ref.primaryButtonText,
65
67
  secondaryButtonText = _ref.secondaryButtonText,
68
+ showPasswordLabel = _ref.showPasswordLabel,
66
69
  successMessage = _ref.successMessage,
67
70
  successful = _ref.successful,
68
71
  title = _ref.title,
@@ -124,6 +127,15 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
124
127
  var internalId = (0, _react.useRef)((0, _uuidv.default)());
125
128
  var primaryButtonDisabled = loading || !name || hasInvalidExtension();
126
129
  var submitted = loading || error || successful;
130
+ var commonInputProps = (0, _defineProperty2.default)({
131
+ id: "text-input--".concat(internalId.current),
132
+ value: name,
133
+ onChange: onNameChangeHandler,
134
+ labelText: inputLabel,
135
+ invalid: hasInvalidExtension(),
136
+ invalidText: invalidInputText,
137
+ onBlur: onBlurHandler
138
+ }, 'data-modal-primary-focus', true);
127
139
  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
128
140
  className: (0, _classnames.default)(blockClass, className),
129
141
  "aria-label": title,
@@ -155,16 +167,13 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
155
167
  labelText: "".concat(o.extension, " (").concat(o.description, ")"),
156
168
  "data-modal-primary-focus": true
157
169
  });
158
- }))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
159
- id: "text-input--".concat(internalId.current),
160
- value: name,
161
- onChange: onNameChangeHandler,
162
- labelText: inputLabel,
163
- invalid: hasInvalidExtension(),
164
- invalidText: invalidInputText,
165
- onBlur: onBlurHandler,
166
- "data-modal-primary-focus": true
167
- })), /*#__PURE__*/_react.default.createElement("div", {
170
+ }))) : /*#__PURE__*/_react.default.createElement("div", {
171
+ className: "".concat(blockClass, "__input-container")
172
+ }, inputType === 'text' ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, commonInputProps) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, (0, _extends2.default)({}, commonInputProps, {
173
+ showPasswordLabel: showPasswordLabel,
174
+ hidePasswordLabel: hidePasswordLabel,
175
+ tooltipPosition: "left"
176
+ })))), /*#__PURE__*/_react.default.createElement("div", {
168
177
  className: "".concat(blockClass, "__messaging")
169
178
  }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {
170
179
  small: true,
@@ -215,11 +224,21 @@ ExportModal.propTypes = {
215
224
  */
216
225
  filename: _propTypes.default.string.isRequired,
217
226
 
227
+ /**
228
+ * label text that's displayed when hovering over visibility toggler to hide key
229
+ */
230
+ hidePasswordLabel: _propTypes.default.string,
231
+
218
232
  /**
219
233
  * label for the text input
220
234
  */
221
235
  inputLabel: _propTypes.default.string,
222
236
 
237
+ /**
238
+ * specify the type of text input
239
+ */
240
+ inputType: _propTypes.default.oneOf(['text', 'password']),
241
+
223
242
  /**
224
243
  * text for an invalid input
225
244
  */
@@ -273,6 +292,11 @@ ExportModal.propTypes = {
273
292
  */
274
293
  secondaryButtonText: _propTypes.default.string.isRequired,
275
294
 
295
+ /**
296
+ * label text that's displayed when hovering over visibility toggler to show key
297
+ */
298
+ showPasswordLabel: _propTypes.default.string,
299
+
276
300
  /**
277
301
  * messaging to display if the export was successful
278
302
  */
@@ -294,6 +318,7 @@ ExportModal.propTypes = {
294
318
  validExtensions: _propTypes.default.array
295
319
  };
296
320
  ExportModal.defaultProps = {
321
+ inputType: 'text',
297
322
  preformattedExtensions: [],
298
323
  validExtensions: []
299
324
  };
@@ -533,7 +533,7 @@ SidePanel.propTypes = {
533
533
  * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
534
534
  */
535
535
  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
536
- kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
536
+ kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
537
537
  label: _propTypes.default.string,
538
538
  loading: _propTypes.default.bool,
539
539
  // we duplicate this Button prop to improve the DocGen here
@@ -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