@carbon/ibm-products 1.4.0 → 1.7.0

package/lib/components/CancelableTextEdit/CancelableTextEdit.js

@@ -149,7 +149,7 @@ var CancelableTextEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     hasIconOnly: true,
     iconDescription: revertDescription,
     onClick: handleRevert,
-    renderIcon: _iconsReact.Reset16
+    renderIcon: _iconsReact.Close16
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     className: "".concat(blockClass, "__save"),
     kind: "ghost",

package/lib/components/Card/Card.js

@@ -30,7 +30,8 @@ var _CardFooter = require("./CardFooter");
 var _settings = require("../../settings");
 
 var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
-    _excluded2 = ["id"];
+    _excluded2 = ["id"],
+    _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
 
 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); }
 
@@ -105,10 +106,11 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
           onKeyDown = _ref3.onKeyDown,
-          href = _ref3.href;
+          href = _ref3.href,
+          rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
 
       if (productive) {
-        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
           key: id,
           renderIcon: Icon,
           hasIconOnly: true,
@@ -117,7 +119,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
-        });
+        }));
       }
 
       if (href) {

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -33,6 +33,8 @@ var _ActionSet = require("../ActionSet");
 
 var _hooks = require("../../global/js/hooks");
 
+var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
+
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
 
 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)
       stepData = _useState18[0],
       setStepData = _useState18[1];
 
-  var totalStepCount = _react.default.Children.count(children);
+  var _useState19 = (0, _react.useState)(1),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      firstIncludedStep = _useState20[0],
+      setFirstIncludedStep = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(null),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      lastIncludedStep = _useState22[0],
+      setLastIncludedStep = _useState22[1];
 
+  (0, _react.useEffect)(function () {
+    var firstItem = stepData.findIndex(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }) + 1;
+    var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
+
+    if (firstItem !== firstIncludedStep) {
+      setFirstIncludedStep(firstItem);
+    }
+
+    if (lastItem !== lastIncludedStep) {
+      setLastIncludedStep(lastItem);
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -126,7 +150,9 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useCreateComponentStepChange)({
-    totalStepCount: totalStepCount,
+    firstIncludedStep: firstIncludedStep,
+    lastIncludedStep: lastIncludedStep,
+    stepData: stepData,
     onNext: onNext,
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
@@ -180,8 +206,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
         });
       },
       setStepData: setStepData,
-      stepData: stepData,
-      totalStepCount: totalStepCount
+      stepData: stepData
     }
   }, _react.default.Children.map(children, function (child, index) {
     return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -11,7 +11,7 @@ exports.CreateFullPageStep = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -49,6 +49,7 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
       subtitle = _ref.subtitle,
       description = _ref.description,
       disableSubmit = _ref.disableSubmit,
+      includeStep = _ref.includeStep,
       introStep = _ref.introStep,
       title = _ref.title,
       hasFieldset = _ref.hasFieldset,
@@ -56,47 +57,45 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
       onNext = _ref.onNext,
       onMount = _ref.onMount,
       secondaryLabel = _ref.secondaryLabel;
-  var steps = (0, _react.useContext)(_CreateFullPage.StepsContext);
+  var stepsContext = (0, _react.useContext)(_CreateFullPage.StepsContext);
   var stepNumber = (0, _react.useContext)(_CreateFullPage.StepNumberContext);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      shouldIncludeStep = _useState2[0],
+      setShouldIncludeStep = _useState2[1];
+
   var previousState = (0, _hooks.usePreviousValue)({
-    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+  });
+  (0, _hooks.useRetrieveStepData)({
+    stepsContext: stepsContext,
+    stepNumber: stepNumber,
+    introStep: introStep,
+    shouldIncludeStep: shouldIncludeStep,
+    secondaryLabel: secondaryLabel,
+    title: title
   }); // This useEffect reports back the onNext and onMount values so that they can be used
   // in the appropriate custom hooks.
 
   (0, _react.useEffect)(function () {
-    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)) {
-      steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
-      steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
+    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)) {
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
-  // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
-
+  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
   (0, _react.useEffect)(function () {
-    var _steps$stepData, _steps$stepData2;
-
-    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) {
-      return item.title === title;
-    });
-
-    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)) {
-      steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
-        return [].concat((0, _toConsumableArray2.default)(prev), [{
-          title: title,
-          secondaryLabel: secondaryLabel,
-          introStep: introStep
-        }]);
-      });
-    }
-  }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
+    setShouldIncludeStep(includeStep);
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   (0, _react.useEffect)(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps.setIsDisabled(disableSubmit);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
     }
-  }, [steps, stepNumber, disableSubmit, onNext]);
-  return steps ? /*#__PURE__*/_react.default.createElement("section", {
-    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)),
+  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  return stepsContext ? /*#__PURE__*/_react.default.createElement("section", {
+    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)),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("h5", {
     className: "".concat(blockClass, "-title")
@@ -146,6 +145,12 @@ CreateFullPageStep.propTypes = {
    */
   hasFieldset: _propTypes.default.bool,
 
+  /**
+   * 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
+   * 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
+   */
+  includeStep: _propTypes.default.bool,
+
   /**
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
@@ -178,4 +183,7 @@ CreateFullPageStep.propTypes = {
    * Sets the title text for a create full page step
    */
   title: _propTypes.default.node.isRequired
+};
+CreateFullPageStep.defaultProps = {
+  includeStep: true
 };

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -35,21 +35,42 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
       currentStep = _ref.currentStep,
       stepData = _ref.stepData;
 
-  // renders the step progression components in the left influencer area
+  var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
+    var dynamicSteps = [];
+    array.forEach(function (item, index) {
+      var _array$index;
+
+      if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
+        dynamicSteps.push(item);
+      }
+    });
+    return dynamicSteps.length;
+  }; // renders the step progression components in the left influencer area
+
+
   var renderProgressSteps = function renderProgressSteps() {
     var _stepData$, _stepData$2;
 
     var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
       return !(item !== null && item !== void 0 && item.introStep);
     });
+    var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }); // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
+    // we need to subtract the number of !shouldIncludeStep/s before the current step
+    // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
+
+    var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
     }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
-      currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - 2 : currentStep - 1,
+      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
+      : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
+      ,
       spaceEqually: true,
       vertical: true,
       className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
-    }, extractedSteps.map(function (step, stepIndex) {
+    }, progressSteps.map(function (step, stepIndex) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
         label: step.title,
         key: stepIndex,
@@ -84,6 +105,7 @@ CreateInfluencer.propTypes = {
   stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
     introStep: _propTypes.default.bool,
     secondaryLabel: _propTypes.default.string,
+    shouldIncludeStep: _propTypes.default.bool,
     title: _propTypes.default.node
   }))
 };

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -35,6 +35,8 @@ var _hooks = require("../../global/js/hooks");
 
 var _devtools = require("../../global/js/utils/devtools");
 
+var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
+
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
 
 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) {
       stepData = _useState16[0],
       setStepData = _useState16[1];
 
-  var totalStepCount = _react.default.Children.count(children);
+  var _useState17 = (0, _react.useState)(1),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      firstIncludedStep = _useState18[0],
+      setFirstIncludedStep = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(null),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      lastIncludedStep = _useState20[0],
+      setLastIncludedStep = _useState20[1];
 
   var previousState = (0, _hooks.usePreviousValue)({
     currentStep: currentStep,
     open: open
   });
   var contentRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var firstItem = stepData.findIndex(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }) + 1;
+    var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
+
+    if (firstItem !== firstIncludedStep) {
+      setFirstIncludedStep(firstItem);
+    }
+
+    if (lastItem !== lastIncludedStep) {
+      setLastIncludedStep(lastItem);
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -125,15 +149,18 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useResetCreateComponent)({
+    firstIncludedStep: firstIncludedStep,
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
     initialStep: initialStep,
-    totalSteps: totalStepCount,
+    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
   });
   (0, _hooks.useCreateComponentStepChange)({
-    totalStepCount: totalStepCount,
+    firstIncludedStep: firstIncludedStep,
+    lastIncludedStep: lastIncludedStep,
+    stepData: stepData,
     onNext: onNext,
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
@@ -206,8 +233,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         });
       },
       setStepData: setStepData,
-      stepData: stepData,
-      totalStepCount: totalStepCount
+      stepData: stepData
     }
   }, _react.default.Children.map(children, function (child, index) {
     return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -11,7 +11,7 @@ exports.CreateTearsheetStep = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -46,57 +46,57 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
 
   var children = _ref.children,
       className = _ref.className,
-      subtitle = _ref.subtitle,
       description = _ref.description,
       disableSubmit = _ref.disableSubmit,
-      introStep = _ref.introStep,
-      title = _ref.title,
-      hasFieldset = _ref.hasFieldset,
       fieldsetLegendText = _ref.fieldsetLegendText,
+      hasFieldset = _ref.hasFieldset,
+      includeStep = _ref.includeStep,
+      introStep = _ref.introStep,
       onNext = _ref.onNext,
       onMount = _ref.onMount,
-      secondaryLabel = _ref.secondaryLabel;
-  var steps = (0, _react.useContext)(_CreateTearsheet.StepsContext);
+      secondaryLabel = _ref.secondaryLabel,
+      subtitle = _ref.subtitle,
+      title = _ref.title;
+  var stepsContext = (0, _react.useContext)(_CreateTearsheet.StepsContext);
   var stepNumber = (0, _react.useContext)(_CreateTearsheet.StepNumberContext);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      shouldIncludeStep = _useState2[0],
+      setShouldIncludeStep = _useState2[1];
+
   var previousState = (0, _hooks.usePreviousValue)({
-    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+  });
+  (0, _hooks.useRetrieveStepData)({
+    stepsContext: stepsContext,
+    stepNumber: stepNumber,
+    introStep: introStep,
+    shouldIncludeStep: shouldIncludeStep,
+    secondaryLabel: secondaryLabel,
+    title: title
   }); // This useEffect reports back the onNext and onMount values so that they can be used
   // in the appropriate custom hooks.
 
   (0, _react.useEffect)(function () {
-    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)) {
-      steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
-      steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
+    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)) {
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
-  // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
+  }, [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
 
   (0, _react.useEffect)(function () {
-    var _steps$stepData, _steps$stepData2;
-
-    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) {
-      return item.title === title;
-    });
-
-    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)) {
-      steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
-        return [].concat((0, _toConsumableArray2.default)(prev), [{
-          title: title,
-          secondaryLabel: secondaryLabel,
-          introStep: introStep
-        }]);
-      });
-    }
-  }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
+    setShouldIncludeStep(includeStep);
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   (0, _react.useEffect)(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps.setIsDisabled(disableSubmit);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
     }
-  }, [steps, stepNumber, disableSubmit, onNext]);
-  return steps ? /*#__PURE__*/_react.default.createElement("div", {
-    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)),
+  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  return stepsContext ? /*#__PURE__*/_react.default.createElement("div", {
+    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)),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
     xlg: 12,
@@ -155,6 +155,12 @@ CreateTearsheetStep.propTypes = {
    */
   hasFieldset: _propTypes.default.bool,
 
+  /**
+   * 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
+   * 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
+   */
+  includeStep: _propTypes.default.bool,
+
   /**
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
@@ -193,5 +199,6 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  hasFieldset: true
+  hasFieldset: true,
+  includeStep: true
 };

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -122,6 +122,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       isInvalid = _useState22[0],
       setIsInvalid = _useState22[1];
 
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
+
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
     setTopicDescriptionValue('');
@@ -132,6 +137,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     setIsInvalid(false);
     setOpen(false);
     setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   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) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  })))), /*#__PURE__*/_react.default.createElement(CustomStep, {
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
+  })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Dynamic step",
+    subtitle: "Dynamic step subtitle",
+    description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
+    hasFieldset: false,
+    includeStep: shouldIncludeAdditionalStep
+  }, "dynamic step content"), /*#__PURE__*/_react.default.createElement(CustomStep, {
     title: "Location",
     subtitle: "Custom step subtitle",
     description: "Custom step description (see storybook implementation for new custom step capability)",
     value1: value1,
-    setValue1: setValue1
+    setValue1: setValue1,
+    hasFieldset: false
   }), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,

package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -177,14 +177,16 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {