@carbon/ibm-products 1.3.0 → 1.6.1

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -7,12 +7,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CreateTearsheet = void 0;
+exports.StepsContext = exports.StepNumberContext = exports.CreateTearsheet = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,29 +31,35 @@ var _CreateInfluencer = require("../CreateInfluencer");
 
 var _settings = require("../../settings");
 
-var _constants = require("./constants");
-
 var _hooks = require("../../global/js/hooks");
 
-var _hasValidType = require("../../global/js/utils/hasValidType");
-
 var _devtools = require("../../global/js/utils/devtools");
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "includeViewAllToggle", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "sideNavAriaLabel", "submitButtonText", "title", "verticalPosition", "viewAllToggleLabelText", "viewAllToggleOffLabelText", "viewAllToggleOnLabelText"];
+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); }
 
 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; }
 
 var componentName = 'CreateTearsheet';
-var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create");
+var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
+// containing information about the state of the container
+// and providing some callback methods for steps to use
+
+var StepsContext = /*#__PURE__*/(0, _react.createContext)(null); // This is a context supplied separately to each step in the container
+// to let it know what number it is in the sequence of steps
+
+exports.StepsContext = StepsContext;
+var StepNumberContext = /*#__PURE__*/(0, _react.createContext)(-1);
+exports.StepNumberContext = StepNumberContext;
 var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var backButtonText = _ref.backButtonText,
       cancelButtonText = _ref.cancelButtonText,
       children = _ref.children,
       className = _ref.className,
       description = _ref.description,
-      includeViewAllToggle = _ref.includeViewAllToggle,
       influencerWidth = _ref.influencerWidth,
       initialStep = _ref.initialStep,
       label = _ref.label,
@@ -63,13 +67,9 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
       open = _ref.open,
-      sideNavAriaLabel = _ref.sideNavAriaLabel,
       submitButtonText = _ref.submitButtonText,
       title = _ref.title,
       verticalPosition = _ref.verticalPosition,
-      viewAllToggleLabelText = _ref.viewAllToggleLabelText,
-      viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
-      viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)([]),
@@ -92,40 +92,83 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isSubmitting = _useState8[0],
       setIsSubmitting = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
+  var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      activeSectionIndex = _useState10[0],
-      setActiveSectionIndex = _useState10[1];
+      isDisabled = _useState10[0],
+      setIsDisabled = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      onNext = _useState12[0],
+      _setOnNext = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      onMount = _useState14[0],
+      _setOnMount = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      stepData = _useState16[0],
+      setStepData = _useState16[1];
+
+  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)(); // returns an array of tearsheet steps
-
-  var getTearsheetSteps = (0, _react.useCallback)(function () {
-    var childrenArray = Array.isArray(children) ? children : [children];
-    var steps = (0, _hasValidType.getExtractedSteps)(childrenArray, _constants.CREATE_TEARSHEET_STEP);
-    return steps;
-  }, [children]);
-  (0, _hooks.useCreateComponentFocus)(previousState, currentStep, getTearsheetSteps, blockClass);
-  (0, _hooks.useValidCreateStepCount)(getTearsheetSteps, componentName);
+  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,
+    blockClass: blockClass,
+    onMount: onMount
+  });
+  (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useResetCreateComponent)({
+    firstIncludedStep: firstIncludedStep,
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
     initialStep: initialStep,
-    totalSteps: getTearsheetSteps().length,
+    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
   });
   (0, _hooks.useCreateComponentStepChange)({
+    firstIncludedStep: firstIncludedStep,
+    lastIncludedStep: lastIncludedStep,
+    stepData: stepData,
+    onNext: onNext,
+    isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
     setShouldViewAll: setShouldViewAll,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
     componentName: componentName,
-    getComponentSteps: getTearsheetSteps,
     currentStep: currentStep,
     shouldViewAll: shouldViewAll,
     backButtonText: backButtonText,
@@ -135,62 +178,10 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
     setCreateComponentActions: setCreateTearsheetActions
-  });
-
-  var getTearsheetComponents = function getTearsheetComponents(childrenElements) {
-    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
-    var tearsheetStepComponents = (0, _hasValidType.getExtractedSteps)(childrenArray, _constants.CREATE_TEARSHEET_STEP);
-    var tearsheetSectionComponents = [];
-    tearsheetStepComponents.forEach(function (child) {
-      var _child$props, _child$props$children;
-
-      // we have received an array of children, lets check to see that each child is
-      // a CreateTearsheetSection component before adding it to tearsheetSectionComponents
-      if (shouldViewAll && child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && (_child$props$children = _child$props.children) !== null && _child$props$children !== void 0 && _child$props$children.length && typeof child.props.children !== 'string') {
-        child.props.children.forEach(function (stepChild) {
-          if ((0, _hasValidType.hasValidChildType)({
-            child: stepChild,
-            type: _constants.CREATE_TEARSHEET_SECTION
-          })) {
-            tearsheetSectionComponents.push(stepChild);
-          }
-        });
-      } // we have received a single child element, lets check to see that it is
-      // a CreateTearsheetSection component before adding it to tearsheetSectionComponents
-
-
-      if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
-        if ((0, _hasValidType.hasValidChildType)({
-          child: child.props.children,
-          type: _constants.CREATE_TEARSHEET_SECTION
-        })) {
-          tearsheetSectionComponents.push(child.props.children);
-        }
-      }
-    });
-    return {
-      sections: tearsheetSectionComponents,
-      steps: tearsheetStepComponents
-    };
-  }; // renders all children (CreateTearsheetSteps)
-
-
-  var renderChildren = function renderChildren(childrenElements) {
-    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
-    var extractedSteps = (0, _hasValidType.getExtractedSteps)(childrenArray, _constants.CREATE_TEARSHEET_STEP);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extractedSteps.map(function (child, stepIndex) {
-      var _cx;
-
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        className: (0, _classnames.default)(child.props.className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== stepIndex + 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === stepIndex + 1), _cx)),
-        key: "key_".concat(stepIndex)
-      });
-    }));
-  }; // adds focus trap functionality
+  }); // adds focus trap functionality
 
   /* istanbul ignore next */
 
-
   var handleBlur = function handleBlur(_ref2) {
     var oldActiveNode = _ref2.target,
         currentActiveNode = _ref2.relatedTarget;
@@ -211,25 +202,8 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     description: description,
     hasCloseIcon: false,
     influencer: /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
-      activeSectionIndex: activeSectionIndex,
-      componentBlockClass: blockClass,
-      createComponentName: componentName,
       currentStep: currentStep,
-      createComponents: getTearsheetComponents(children),
-      includeViewAllToggle: includeViewAllToggle,
-      handleToggleState: function handleToggleState(toggleState) {
-        return setShouldViewAll(toggleState);
-      },
-      handleActiveSectionIndex: function handleActiveSectionIndex(index) {
-        return setActiveSectionIndex(index);
-      },
-      open: open,
-      previousState: previousState,
-      sideNavAriaLabel: sideNavAriaLabel,
-      toggleState: shouldViewAll,
-      viewAllToggleLabelText: viewAllToggleLabelText,
-      viewAllToggleOffLabelText: viewAllToggleOffLabelText,
-      viewAllToggleOnLabelText: viewAllToggleOnLabelText
+      stepData: stepData
     }),
     influencerPosition: "left",
     influencerWidth: influencerWidth,
@@ -244,7 +218,28 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, renderChildren(children)))));
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
+    value: {
+      currentStep: currentStep,
+      setIsDisabled: setIsDisabled,
+      setOnNext: function setOnNext(fn) {
+        return _setOnNext(function () {
+          return fn;
+        });
+      },
+      setOnMount: function setOnMount(fn) {
+        return _setOnMount(function () {
+          return fn;
+        });
+      },
+      setStepData: setStepData,
+      stepData: stepData
+    }
+  }, _react.default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
+      value: index + 1
+    }, child);
+  }))))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 exports.CreateTearsheet = CreateTearsheet;
@@ -268,10 +263,7 @@ CreateTearsheet.propTypes = {
   /**
    * The main content of the tearsheet
    */
-  children: (0, _hasValidType.hasValidChildrenType)({
-    componentName: componentName,
-    childType: _constants.CREATE_TEARSHEET_STEP
-  }),
+  children: _propTypes.default.node,
 
   /**
    * An optional class or classes to be added to the outermost element.
@@ -283,12 +275,6 @@ CreateTearsheet.propTypes = {
    */
   description: _propTypes.default.node,
 
-  /**
-   * @ignore
-   * Used to optionally include view all toggle
-   */
-  includeViewAllToggle: _propTypes.default.bool,
-
   /**
    * Used to set the size of the influencer
    */
@@ -331,15 +317,6 @@ CreateTearsheet.propTypes = {
    */
   open: _propTypes.default.bool,
 
-  /**
-   * @ignore
-   * The aria label to be used for the UI Shell SideNav Carbon component
-   */
-  sideNavAriaLabel: _propTypes.default.string.isRequired.if(function (_ref3) {
-    var includeViewAllToggle = _ref3.includeViewAllToggle;
-    return includeViewAllToggle;
-  }),
-
   /**
    * The submit button text
    */
@@ -357,34 +334,7 @@ CreateTearsheet.propTypes = {
    * from below. The 'lower' position provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: _propTypes.default.oneOf(['normal', 'lower']),
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: _propTypes.default.string.isRequired.if(function (_ref4) {
-    var includeViewAllToggle = _ref4.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle `off` text
-   */
-  viewAllToggleOffLabelText: _propTypes.default.string.isRequired.if(function (_ref5) {
-    var includeViewAllToggle = _ref5.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle `on` text
-   */
-  viewAllToggleOnLabelText: _propTypes.default.string.isRequired.if(function (_ref6) {
-    var includeViewAllToggle = _ref6.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  })
+  verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
 }; // Default values for component props. Default values are not required for
 // props that are required, nor for props where the component can apply
 // 'undefined' values reasonably. Default values should be provided when the
@@ -392,6 +342,5 @@ CreateTearsheet.propTypes = {
 
 CreateTearsheet.defaultProps = {
   verticalPosition: 'normal',
-  includeViewAllToggle: false,
   influencerWidth: 'narrow'
 };

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CreateTearsheetStep = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,16 +21,20 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _CreateTearsheet = require("./CreateTearsheet");
+
 var _settings = require("../../settings");
 
-var _constants = require("./constants");
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
+
+var _hooks = require("../../global/js/hooks");
 
 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); }
 
 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.
@@ -34,32 +42,77 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create__step");
 var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _cx;
+
   var children = _ref.children,
       className = _ref.className,
-      subtitle = _ref.subtitle,
       description = _ref.description,
-      title = _ref.title,
-      hasFieldset = _ref.hasFieldset,
+      disableSubmit = _ref.disableSubmit,
       fieldsetLegendText = _ref.fieldsetLegendText,
-      isViewingAllStepsTogether = _ref.isViewingAllStepsTogether;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, className),
+      hasFieldset = _ref.hasFieldset,
+      includeStep = _ref.includeStep,
+      introStep = _ref.introStep,
+      onNext = _ref.onNext,
+      onMount = _ref.onMount,
+      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: 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 === (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, 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 () {
+    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 === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
+    }
+  }, [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,
     lg: 12,
     md: 8,
     sm: 8
-  }, !isViewingAllStepsTogether && /*#__PURE__*/_react.default.createElement("h4", {
+  }, /*#__PURE__*/_react.default.createElement("h4", {
     className: "".concat(blockClass, "--title")
-  }, title), !isViewingAllStepsTogether && subtitle && /*#__PURE__*/_react.default.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/_react.default.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
-  }, subtitle), !isViewingAllStepsTogether && description && /*#__PURE__*/_react.default.createElement("p", {
+  }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "--description")
   }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
-  }, children) : children);
+  }, children) : children) : _pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 exports.CreateTearsheetStep = CreateTearsheetStep;
@@ -103,15 +156,15 @@ CreateTearsheetStep.propTypes = {
   hasFieldset: _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
+   * 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
    */
-  introStep: _propTypes.default.bool,
+  includeStep: _propTypes.default.bool,
 
   /**
-   * @ignore
-   * The is an internal prop set in CreateTearsheet so the step knows when to render it's title
+   * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
-  isViewingAllStepsTogether: _propTypes.default.bool,
+  introStep: _propTypes.default.bool,
 
   /**
    * Optional function to be called on initial mount of a step.
@@ -146,6 +199,6 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  type: _constants.CREATE_TEARSHEET_STEP,
-  hasFieldset: true
+  hasFieldset: true,
+  includeStep: true
 };

package/lib/components/CreateTearsheet/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "CreateTearsheetDivider", {
     return _CreateTearsheetDivider.CreateTearsheetDivider;
   }
 });
-Object.defineProperty(exports, "CreateTearsheetSection", {
-  enumerable: true,
-  get: function get() {
-    return _CreateTearsheetSection.CreateTearsheetSection;
-  }
-});
 Object.defineProperty(exports, "CreateTearsheetStep", {
   enumerable: true,
   get: function get() {
@@ -32,6 +26,4 @@ var _CreateTearsheet = require("./CreateTearsheet");
 
 var _CreateTearsheetStep = require("./CreateTearsheetStep");
 
-var _CreateTearsheetSection = require("./CreateTearsheetSection");
-
 var _CreateTearsheetDivider = require("./CreateTearsheetDivider");