@carbon/ibm-products 1.4.0 → 1.5.0

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 () {

package/lib/components/ExportModal/ExportModal.js

@@ -33,7 +33,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
+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"];
 
 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); }
 
@@ -52,7 +52,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       error = _ref.error,
       errorMessage = _ref.errorMessage,
       filename = _ref.filename,
+      hidePasswordLabel = _ref.hidePasswordLabel,
       inputLabel = _ref.inputLabel,
+      inputType = _ref.inputType,
       invalidInputText = _ref.invalidInputText,
       loading = _ref.loading,
       loadingMessage = _ref.loadingMessage,
@@ -63,6 +65,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
       primaryButtonText = _ref.primaryButtonText,
       secondaryButtonText = _ref.secondaryButtonText,
+      showPasswordLabel = _ref.showPasswordLabel,
       successMessage = _ref.successMessage,
       successful = _ref.successful,
       title = _ref.title,
@@ -124,6 +127,15 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
   var submitted = loading || error || successful;
+  var commonInputProps = (0, _defineProperty2.default)({
+    id: "text-input--".concat(internalId.current),
+    value: name,
+    onChange: onNameChangeHandler,
+    labelText: inputLabel,
+    invalid: hasInvalidExtension(),
+    invalidText: invalidInputText,
+    onBlur: onBlurHandler
+  }, 'data-modal-primary-focus', true);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "aria-label": title,
@@ -155,16 +167,13 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       labelText: "".concat(o.extension, " (").concat(o.description, ")"),
       "data-modal-primary-focus": true
     });
-  }))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
-    id: "text-input--".concat(internalId.current),
-    value: name,
-    onChange: onNameChangeHandler,
-    labelText: inputLabel,
-    invalid: hasInvalidExtension(),
-    invalidText: invalidInputText,
-    onBlur: onBlurHandler,
-    "data-modal-primary-focus": true
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__input-container")
+  }, inputType === 'text' ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, commonInputProps) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, (0, _extends2.default)({}, commonInputProps, {
+    showPasswordLabel: showPasswordLabel,
+    hidePasswordLabel: hidePasswordLabel,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {
     small: true,
@@ -215,11 +224,21 @@ ExportModal.propTypes = {
    */
   filename: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to hide key
+   */
+  hidePasswordLabel: _propTypes.default.string,
+
   /**
    * label for the text input
    */
   inputLabel: _propTypes.default.string,
 
+  /**
+   * specify the type of text input
+   */
+  inputType: _propTypes.default.oneOf(['text', 'password']),
+
   /**
    * text for an invalid input
    */
@@ -273,6 +292,11 @@ ExportModal.propTypes = {
    */
   secondaryButtonText: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to show key
+   */
+  showPasswordLabel: _propTypes.default.string,
+
   /**
    * messaging to display if the export was successful
    */
@@ -294,6 +318,7 @@ ExportModal.propTypes = {
   validExtensions: _propTypes.default.array
 };
 ExportModal.defaultProps = {
+  inputType: 'text',
   preformattedExtensions: [],
   validExtensions: []
 };

package/lib/components/SidePanel/SidePanel.js

@@ -533,7 +533,7 @@ SidePanel.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here

package/lib/components/Tearsheet/Tearsheet.js

@@ -94,7 +94,7 @@ Tearsheet.propTypes = _objectSpread({
   actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
     return 'max';
   }), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here