@carbon/ibm-products 1.2.4 → 1.5.0

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -1,273 +1,93 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
- * 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.
  */
 // Import portions of React that are needed.
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ProgressIndicator, ProgressStep, Toggle } from 'carbon-components-react';
-import { SideNav, SideNavItems, SideNavLink } from 'carbon-components-react/lib/components/UIShell';
-import { moderate02 } from '@carbon/motion';
-import { getExtractedSteps } from '../../global/js/utils/hasValidType';
+import { ProgressIndicator, ProgressStep } from 'carbon-components-react';
 import '../../global/js/utils/props-helper';
-import { pkg } from '../../settings';
-import { CREATE_TEARSHEET_STEP } from '../CreateTearsheet/constants';
-import { CREATE_FULL_PAGE_STEP } from '../CreateFullPage/constants';
-import { CreateTearsheet } from '../CreateTearsheet'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--create-influencer");
 var componentName = 'CreateInfluencer';
 export 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 = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      progressIndicatorState = _useState2[0],
-      setProgressIndicatorState = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_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 */
-
-
-  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');
-      }, moderate02);
-    } else {
-      setSideNavState('closing');
-      setTimeout(function () {
-        handleToggleState(newToggleValue);
-        setProgressIndicatorState('opening');
-      }, moderate02);
-    }
+      stepData = _ref.stepData;
 
-    handleActiveSectionIndex(0);
-    var createComponentContainer = document.querySelector(".".concat(componentBlockClass));
+  var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
+    var dynamicSteps = [];
+    array.forEach(function (item, index) {
+      var _array$index;
 
-    if (createComponentContainer) {
-      createComponentContainer.scrollTop = 0;
-    }
-  };
-
-  var renderViewAllToggle = function renderViewAllToggle() {
-    return /*#__PURE__*/React.createElement(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
+      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 _createComponents$ste, _createComponents$ste2, _cx2;
-
-    /* istanbul ignore next */
-    if (toggleState) {
-      var _cx, _createComponents$sec;
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(blockClass, "__left-nav")
-      }, /*#__PURE__*/React.createElement(SideNav, {
-        expanded: true,
-        isFixedNav: true,
-        "aria-label": sideNavAriaLabel,
-        className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__side-nav-opening"), sideNavState === 'opening'), _defineProperty(_cx, "".concat(blockClass, "__side-nav-closing"), sideNavState === 'closing'), _cx))
-      }, /*#__PURE__*/React.createElement(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.createElement(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);
-
-            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 _stepData$, _stepData$2;
 
-    var extractedSteps = getExtractedSteps(createComponents.steps, createComponentName === CreateTearsheet.displayName ? CREATE_TEARSHEET_STEP : 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;
+    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.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.createElement(ProgressIndicator, {
-      currentIndex: introStepFound ? currentStep - 2 : currentStep - 1,
+    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React.createElement(ProgressIndicator, {
+      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: cx("".concat(blockClass, "__progress-indicator"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__progress-indicator-opening"), progressIndicatorState === 'opening'), _defineProperty(_cx2, "".concat(blockClass, "__progress-indicator-closing"), progressIndicatorState === 'closing'), _cx2))
-    }, stepsWithoutIntroStep.map(function (child, stepIndex) {
+      className: cx("".concat(blockClass, "__progress-indicator"))
+    }, progressSteps.map(function (step, stepIndex) {
       return /*#__PURE__*/React.createElement(ProgressStep, {
-        label: child.props.title,
+        label: step.title,
         key: stepIndex,
-        secondaryLabel: child.props.secondaryLabel
+        secondaryLabel: step.secondaryLabel
       });
     })));
   };
 
   return /*#__PURE__*/React.createElement("div", {
     className: cx(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.
 
 CreateInfluencer.displayName = componentName;
 CreateInfluencer.propTypes = {
-  /**
-   * Sets the active side nav item when toggle is on
-   */
-  activeSectionIndex: PropTypes.number.isRequired,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
 
-  /**
-   * The blockClass for the create component (Tearsheet or FullPage)
-   */
-  componentBlockClass: PropTypes.string.isRequired,
-
-  /**
-   * Used to mark the current step on the ProgressIndicator component
-   */
-  createComponentName: PropTypes.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.shape({
-    steps: PropTypes.arrayOf(PropTypes.element),
-    sections: PropTypes.arrayOf(PropTypes.element)
-  }).isRequired,
-
   /**
    * Used to mark the current step on the ProgressIndicator component
    */
   currentStep: PropTypes.number.isRequired,
 
   /**
-   * Handler used to set the active section index
-   */
-  handleActiveSectionIndex: PropTypes.func,
-
-  /**
-   * Handler used to track the state of the toggle
-   */
-  handleToggleState: PropTypes.func,
-
-  /**
-   * Used to optionally include view all toggle
-   */
-  includeViewAllToggle: PropTypes.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  open: PropTypes.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  previousState: PropTypes.object,
-
-  /**
-   * The aria label to be used for the UI Shell SideNav Carbon component
-   */
-  sideNavAriaLabel: PropTypes.string.isRequired.if(function (_ref2) {
-    var includeViewAllToggle = _ref2.includeViewAllToggle;
-    return includeViewAllToggle;
-  }),
-
-  /**
-   * The current toggled state to be provided to the Toggle component
-   */
-  toggleState: PropTypes.bool,
-
-  /**
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: PropTypes.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.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.string.isRequired.if(function (_ref5) {
-    var includeViewAllToggle = _ref5.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  })
+  stepData: PropTypes.arrayOf(PropTypes.shape({
+    introStep: PropTypes.bool,
+    secondaryLabel: PropTypes.string,
+    shouldIncludeStep: PropTypes.bool,
+    title: PropTypes.node
+  }))
 };

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 
 /**
- * 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.
  */
-import React, { forwardRef, useCallback, useState, useRef } from 'react';
+import React, { forwardRef, useState, useRef, createContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Grid, Form } from 'carbon-components-react';
@@ -18,19 +17,24 @@ import wrapFocus from '../../global/js/utils/wrapFocus';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell';
 import { CreateInfluencer } from '../CreateInfluencer';
 import { pkg } from '../../settings';
-import { CREATE_TEARSHEET_SECTION, CREATE_TEARSHEET_STEP } from './constants';
 import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
-import { hasValidChildrenType, hasValidChildType, getExtractedSteps } from '../../global/js/utils/hasValidType';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 var componentName = 'CreateTearsheet';
-var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
+var blockClass = "".concat(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
+
+export var StepsContext = /*#__PURE__*/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
+
+export var StepNumberContext = /*#__PURE__*/createContext(-1);
 export var CreateTearsheet = /*#__PURE__*/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,
@@ -38,13 +42,9 @@ export var CreateTearsheet = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState([]),
@@ -67,40 +67,83 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isSubmitting = _useState8[0],
       setIsSubmitting = _useState8[1];
 
-  var _useState9 = useState(0),
+  var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      activeSectionIndex = _useState10[0],
-      setActiveSectionIndex = _useState10[1];
+      isDisabled = _useState10[0],
+      setIsDisabled = _useState10[1];
+
+  var _useState11 = useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      onNext = _useState12[0],
+      _setOnNext = _useState12[1];
+
+  var _useState13 = useState(),
+      _useState14 = _slicedToArray(_useState13, 2),
+      onMount = _useState14[0],
+      _setOnMount = _useState14[1];
+
+  var _useState15 = useState([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      stepData = _useState16[0],
+      setStepData = _useState16[1];
+
+  var _useState17 = useState(1),
+      _useState18 = _slicedToArray(_useState17, 2),
+      firstIncludedStep = _useState18[0],
+      setFirstIncludedStep = _useState18[1];
+
+  var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      lastIncludedStep = _useState20[0],
+      setLastIncludedStep = _useState20[1];
 
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
   });
-  var contentRef = useRef(); // returns an array of tearsheet steps
-
-  var getTearsheetSteps = useCallback(function () {
-    var childrenArray = Array.isArray(children) ? children : [children];
-    var steps = getExtractedSteps(childrenArray, CREATE_TEARSHEET_STEP);
-    return steps;
-  }, [children]);
-  useCreateComponentFocus(previousState, currentStep, getTearsheetSteps, blockClass);
-  useValidCreateStepCount(getTearsheetSteps, componentName);
+  var contentRef = useRef();
+  useEffect(function () {
+    var firstItem = stepData.findIndex(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }) + 1;
+    var lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
+
+    if (firstItem !== firstIncludedStep) {
+      setFirstIncludedStep(firstItem);
+    }
+
+    if (lastItem !== lastIncludedStep) {
+      setLastIncludedStep(lastItem);
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep]);
+  useCreateComponentFocus({
+    previousState: previousState,
+    currentStep: currentStep,
+    blockClass: blockClass,
+    onMount: onMount
+  });
+  useValidCreateStepCount(stepData.length, componentName);
   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
   });
   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,
@@ -110,62 +153,10 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
     setCreateComponentActions: setCreateTearsheetActions
-  });
-
-  var getTearsheetComponents = function getTearsheetComponents(childrenElements) {
-    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
-    var tearsheetStepComponents = getExtractedSteps(childrenArray, 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 (hasValidChildType({
-            child: stepChild,
-            type: 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 (hasValidChildType({
-          child: child.props.children,
-          type: 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 = getExtractedSteps(childrenArray, CREATE_TEARSHEET_STEP);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, extractedSteps.map(function (child, stepIndex) {
-      var _cx;
-
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: cx(child.props.className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== stepIndex + 1), _defineProperty(_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;
@@ -186,25 +177,8 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     description: description,
     hasCloseIcon: false,
     influencer: /*#__PURE__*/React.createElement(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,
@@ -219,7 +193,28 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null, renderChildren(children)))));
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.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.Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
+      value: index + 1
+    }, child);
+  }))))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName); // The display name of the component, used by React. Note that displayName
@@ -242,10 +237,7 @@ CreateTearsheet.propTypes = {
   /**
    * The main content of the tearsheet
    */
-  children: hasValidChildrenType({
-    componentName: componentName,
-    childType: CREATE_TEARSHEET_STEP
-  }),
+  children: PropTypes.node,
 
   /**
    * An optional class or classes to be added to the outermost element.
@@ -257,12 +249,6 @@ CreateTearsheet.propTypes = {
    */
   description: PropTypes.node,
 
-  /**
-   * @ignore
-   * Used to optionally include view all toggle
-   */
-  includeViewAllToggle: PropTypes.bool,
-
   /**
    * Used to set the size of the influencer
    */
@@ -305,15 +291,6 @@ CreateTearsheet.propTypes = {
    */
   open: PropTypes.bool,
 
-  /**
-   * @ignore
-   * The aria label to be used for the UI Shell SideNav Carbon component
-   */
-  sideNavAriaLabel: PropTypes.string.isRequired.if(function (_ref3) {
-    var includeViewAllToggle = _ref3.includeViewAllToggle;
-    return includeViewAllToggle;
-  }),
-
   /**
    * The submit button text
    */
@@ -331,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.oneOf(['normal', 'lower']),
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: PropTypes.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.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.string.isRequired.if(function (_ref6) {
-    var includeViewAllToggle = _ref6.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  })
+  verticalPosition: PropTypes.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
@@ -366,6 +316,5 @@ CreateTearsheet.propTypes = {
 
 CreateTearsheet.defaultProps = {
   verticalPosition: 'normal',
-  includeViewAllToggle: false,
   influencerWidth: 'narrow'
 };