@carbon/ibm-products 1.2.3 → 1.4.0

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -2,18 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreateInfluencer = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,28 +15,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _UIShell = require("carbon-components-react/lib/components/UIShell");
-
-var _motion = require("@carbon/motion");
-
-var _hasValidType = require("../../global/js/utils/hasValidType");
-
 require("../../global/js/utils/props-helper");
 
 var _settings = require("../../settings");
 
-var _constants = require("../CreateTearsheet/constants");
-
-var _constants2 = require("../CreateFullPage/constants");
-
-var _CreateTearsheet = require("../CreateTearsheet");
-
-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.
@@ -53,153 +31,36 @@ var blockClass = "".concat(_settings.pkg.prefix, "--create-influencer");
 var componentName = 'CreateInfluencer';
 
 var CreateInfluencer = function CreateInfluencer(_ref) {
-  var activeSectionIndex = _ref.activeSectionIndex,
-      className = _ref.className,
-      componentBlockClass = _ref.componentBlockClass,
-      createComponentName = _ref.createComponentName,
-      createComponents = _ref.createComponents,
+  var className = _ref.className,
       currentStep = _ref.currentStep,
-      handleToggleState = _ref.handleToggleState,
-      handleActiveSectionIndex = _ref.handleActiveSectionIndex,
-      includeViewAllToggle = _ref.includeViewAllToggle,
-      open = _ref.open,
-      previousState = _ref.previousState,
-      sideNavAriaLabel = _ref.sideNavAriaLabel,
-      toggleState = _ref.toggleState,
-      viewAllToggleLabelText = _ref.viewAllToggleLabelText,
-      viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
-      viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      progressIndicatorState = _useState2[0],
-      setProgressIndicatorState = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sideNavState = _useState4[0],
-      setSideNavState = _useState4[1]; // Animating states need to be reset here otherwise things won't render
-  // the way they should after the component mounts/unmounts
-
-  /* istanbul ignore next */
-
-
-  (0, _react.useEffect)(function () {
-    if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
-      setSideNavState('');
-      setProgressIndicatorState('');
-    }
-  }, [open, previousState]);
-  /* istanbul ignore next */
-
-  var handleViewAllToggle = function handleViewAllToggle(newToggleValue) {
-    if (newToggleValue) {
-      setProgressIndicatorState('closing');
-      setTimeout(function () {
-        handleToggleState(newToggleValue);
-        setSideNavState('opening');
-      }, _motion.moderate02);
-    } else {
-      setSideNavState('closing');
-      setTimeout(function () {
-        handleToggleState(newToggleValue);
-        setProgressIndicatorState('opening');
-      }, _motion.moderate02);
-    }
-
-    handleActiveSectionIndex(0);
-    var createComponentContainer = document.querySelector(".".concat(componentBlockClass));
-
-    if (createComponentContainer) {
-      createComponentContainer.scrollTop = 0;
-    }
-  };
-
-  var renderViewAllToggle = function renderViewAllToggle() {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
-      id: "".concat(blockClass, "__view-all-toggle"),
-      toggled: toggleState,
-      labelText: viewAllToggleLabelText,
-      labelA: viewAllToggleOffLabelText,
-      labelB: viewAllToggleOnLabelText,
-      onToggle: function onToggle(value) {
-        return handleViewAllToggle(value);
-      },
-      className: "".concat(blockClass, "__view-all-toggle"),
-      defaultToggled: false
-    });
-  }; // renders the step progression components in the left influencer area
-
+      stepData = _ref.stepData;
 
+  // renders the step progression components in the left influencer area
   var renderProgressSteps = function renderProgressSteps() {
-    var _createComponents$ste, _createComponents$ste2, _cx2;
-
-    /* istanbul ignore next */
-    if (toggleState) {
-      var _cx, _createComponents$sec;
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(blockClass, "__left-nav")
-      }, /*#__PURE__*/_react.default.createElement(_UIShell.SideNav, {
-        expanded: true,
-        isFixedNav: true,
-        "aria-label": sideNavAriaLabel,
-        className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-opening"), sideNavState === 'opening'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-closing"), sideNavState === 'closing'), _cx))
-      }, /*#__PURE__*/_react.default.createElement(_UIShell.SideNavItems, null, ((_createComponents$sec = createComponents.sections) === null || _createComponents$sec === void 0 ? void 0 : _createComponents$sec.length) && createComponents.sections.map(function (sectionComponent, sectionIndex) {
-        var _sectionComponent$pro;
-
-        return /*#__PURE__*/_react.default.createElement(_UIShell.SideNavLink, {
-          href: "#".concat(sectionComponent === null || sectionComponent === void 0 ? void 0 : (_sectionComponent$pro = sectionComponent.props) === null || _sectionComponent$pro === void 0 ? void 0 : _sectionComponent$pro.id),
-          key: sectionIndex,
-          isActive: activeSectionIndex === sectionIndex,
-          onClick: function onClick(event) {
-            event.preventDefault();
-            handleActiveSectionIndex(sectionIndex);
+    var _stepData$, _stepData$2;
 
-            if (sectionComponent.props.id) {
-              var _scrollTarget$getBoun;
-
-              var scrollTarget = document.querySelector("#".concat(sectionComponent.props.id));
-              var scrollContainer = document.querySelector(".".concat(componentBlockClass, "__content"));
-              var scrollTopValue = createComponentName === 'CreateFullPage' ? (scrollTarget === null || scrollTarget === void 0 ? void 0 : (_scrollTarget$getBoun = scrollTarget.getBoundingClientRect()) === null || _scrollTarget$getBoun === void 0 ? void 0 : _scrollTarget$getBoun.y) + (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) : scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.offsetTop;
-              scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
-                top: scrollTopValue,
-                behavior: 'smooth'
-              });
-            } else {
-              console.warn("".concat(createComponentName, ": ").concat(createComponentName, "Section component is missing a required prop of 'id'"));
-            }
-          }
-        }, sectionComponent.props.title);
-      }))));
-    }
-
-    var extractedSteps = (0, _hasValidType.getExtractedSteps)(createComponents.steps, createComponentName === _CreateTearsheet.CreateTearsheet.displayName ? _constants.CREATE_TEARSHEET_STEP : _constants2.CREATE_FULL_PAGE_STEP);
-    var stepsWithoutIntroStep = extractedSteps.filter(function (item) {
-      return !item.props.introStep;
+    var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
+      return !(item !== null && item !== void 0 && item.introStep);
     });
-    var introStepFound = !!createComponents.steps.filter(function (item) {
-      return item.props.introStep;
-    }).length;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_createComponents$ste = createComponents.steps[0]) !== null && _createComponents$ste !== void 0 && (_createComponents$ste2 = _createComponents$ste.props) !== null && _createComponents$ste2 !== void 0 && _createComponents$ste2.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
-      currentIndex: introStepFound ? currentStep - 2 : currentStep - 1,
+    }, 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,
       spaceEqually: true,
       vertical: true,
-      className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__progress-indicator-opening"), progressIndicatorState === 'opening'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__progress-indicator-closing"), progressIndicatorState === 'closing'), _cx2))
-    }, stepsWithoutIntroStep.map(function (child, stepIndex) {
+      className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
+    }, extractedSteps.map(function (step, stepIndex) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
-        label: child.props.title,
+        label: step.title,
         key: stepIndex,
-        secondaryLabel: child.props.secondaryLabel
+        secondaryLabel: step.secondaryLabel
       });
     })));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(blockClass, className)
-  }, renderProgressSteps(), includeViewAllToggle && renderViewAllToggle());
+  }, renderProgressSteps());
 }; // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 
@@ -207,98 +68,22 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
 exports.CreateInfluencer = CreateInfluencer;
 CreateInfluencer.displayName = componentName;
 CreateInfluencer.propTypes = {
-  /**
-   * Sets the active side nav item when toggle is on
-   */
-  activeSectionIndex: _propTypes.default.number.isRequired,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
 
-  /**
-   * The blockClass for the create component (Tearsheet or FullPage)
-   */
-  componentBlockClass: _propTypes.default.string.isRequired,
-
-  /**
-   * Used to mark the current step on the ProgressIndicator component
-   */
-  createComponentName: _propTypes.default.string.isRequired,
-
-  /**
-   * An object with section and step components, needed to render the progress steps. This is where the titles are retrieved from.
-   */
-  createComponents: _propTypes.default.shape({
-    steps: _propTypes.default.arrayOf(_propTypes.default.element),
-    sections: _propTypes.default.arrayOf(_propTypes.default.element)
-  }).isRequired,
-
   /**
    * Used to mark the current step on the ProgressIndicator component
    */
   currentStep: _propTypes.default.number.isRequired,
 
   /**
-   * Handler used to set the active section index
-   */
-  handleActiveSectionIndex: _propTypes.default.func,
-
-  /**
-   * Handler used to track the state of the toggle
-   */
-  handleToggleState: _propTypes.default.func,
-
-  /**
-   * Used to optionally include view all toggle
-   */
-  includeViewAllToggle: _propTypes.default.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  open: _propTypes.default.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  previousState: _propTypes.default.object,
-
-  /**
-   * The aria label to be used for the UI Shell SideNav Carbon component
-   */
-  sideNavAriaLabel: _propTypes.default.string.isRequired.if(function (_ref2) {
-    var includeViewAllToggle = _ref2.includeViewAllToggle;
-    return includeViewAllToggle;
-  }),
-
-  /**
-   * The current toggled state to be provided to the Toggle component
-   */
-  toggleState: _propTypes.default.bool,
-
-  /**
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: _propTypes.default.string.isRequired.if(function (_ref3) {
-    var includeViewAllToggle = _ref3.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * Sets the label text for the view all toggle `off` text
-   */
-  viewAllToggleOffLabelText: _propTypes.default.string.isRequired.if(function (_ref4) {
-    var includeViewAllToggle = _ref4.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * Sets the label text for the view all toggle `on` text
+   * The step data that renders the progress items
    */
-  viewAllToggleOnLabelText: _propTypes.default.string.isRequired.if(function (_ref5) {
-    var includeViewAllToggle = _ref5.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  })
+  stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    introStep: _propTypes.default.bool,
+    secondaryLabel: _propTypes.default.string,
+    title: _propTypes.default.node
+  }))
 };

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,33 @@ 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 _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 +65,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 +90,58 @@ 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 totalStepCount = _react.default.Children.count(children);
 
   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, _hooks.useCreateComponentFocus)({
+    previousState: previousState,
+    currentStep: currentStep,
+    blockClass: blockClass,
+    onMount: onMount
+  });
+  (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useResetCreateComponent)({
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
     initialStep: initialStep,
-    totalSteps: getTearsheetSteps().length,
+    totalSteps: totalStepCount,
     componentName: componentName
   });
   (0, _hooks.useCreateComponentStepChange)({
+    totalStepCount: totalStepCount,
+    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 +151,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 +175,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 +191,29 @@ 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,
+      totalStepCount: totalStepCount
+    }
+  }, _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 +237,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 +249,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 +291,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 +308,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 +316,5 @@ CreateTearsheet.propTypes = {
 
 CreateTearsheet.defaultProps = {
   verticalPosition: 'normal',
-  includeViewAllToggle: false,
   influencerWidth: 'narrow'
 };