@carbon/ibm-products 1.2.3 → 1.4.0

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -7,12 +7,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CreateFullPage = void 0;
+exports.StepsContext = exports.StepNumberContext = exports.CreateFullPage = 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"));
@@ -27,8 +25,6 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
-var _constants = require("./constants");
-
 var _carbonComponentsReact = require("carbon-components-react");
 
 var _CreateInfluencer = require("../CreateInfluencer");
@@ -37,23 +33,29 @@ var _ActionSet = require("../ActionSet");
 
 var _hooks = require("../../global/js/hooks");
 
-var _hasValidType = require("../../global/js/utils/hasValidType");
-
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "includeViewAllToggle", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "sideNavAriaLabel", "submitButtonText", "viewAllToggleLabelText", "viewAllToggleOffLabelText", "viewAllToggleOnLabelText"];
+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); }
 
 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 blockClass = "".concat(_settings.pkg.prefix, "--create-full-page");
-var componentName = 'CreateFullPage';
+var componentName = 'CreateFullPage'; // 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 CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var backButtonText = _ref.backButtonText,
       cancelButtonText = _ref.cancelButtonText,
       children = _ref.children,
       className = _ref.className,
-      includeViewAllToggle = _ref.includeViewAllToggle,
       modalDangerButtonText = _ref.modalDangerButtonText,
       modalDescription = _ref.modalDescription,
       modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -61,11 +63,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       nextButtonText = _ref.nextButtonText,
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
-      sideNavAriaLabel = _ref.sideNavAriaLabel,
       submitButtonText = _ref.submitButtonText,
-      viewAllToggleLabelText = _ref.viewAllToggleLabelText,
-      viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
-      viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)([]),
@@ -83,49 +81,60 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       currentStep = _useState6[0],
       setCurrentStep = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(0),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      activeSectionIndex = _useState8[0],
-      setActiveSectionIndex = _useState8[1];
+      isSubmitting = _useState8[0],
+      setIsSubmitting = _useState8[1];
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      isSubmitting = _useState10[0],
-      setIsSubmitting = _useState10[1];
+      modalIsOpen = _useState10[0],
+      setModalIsOpen = _useState10[1];
+
+  var previousState = (0, _hooks.usePreviousValue)({
+    currentStep: currentStep,
+    open: open
+  });
 
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      modalIsOpen = _useState12[0],
-      setModalIsOpen = _useState12[1];
+      isDisabled = _useState12[0],
+      setIsDisabled = _useState12[1];
 
-  var previousState = (0, _hooks.usePreviousValue)({
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      onNext = _useState14[0],
+      _setOnNext = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      onMount = _useState16[0],
+      _setOnMount = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      stepData = _useState18[0],
+      setStepData = _useState18[1];
+
+  var totalStepCount = _react.default.Children.count(children);
+
+  (0, _hooks.useCreateComponentFocus)({
+    previousState: previousState,
     currentStep: currentStep,
-    open: open
-  }); // returns an array of full page steps
-
-  var getFullPageSteps = (0, _react.useCallback)(function () {
-    var _childrenArray$;
-
-    var steps = [];
-    var childrenArray = Array.isArray(children) ? children : [children];
-    var extractedChildren = childrenArray && ((_childrenArray$ = childrenArray[0]) === null || _childrenArray$ === void 0 ? void 0 : _childrenArray$.type) === _react.default.Fragment ? childrenArray[0].props.children : childrenArray;
-    extractedChildren.forEach(function (child) {
-      if (isFullPageStep(child)) {
-        steps.push(child);
-      }
-    });
-    return steps;
-  }, [children]);
-  (0, _hooks.useCreateComponentFocus)(previousState, currentStep, getFullPageSteps, blockClass);
-  (0, _hooks.useValidCreateStepCount)(getFullPageSteps, componentName);
+    blockClass: blockClass,
+    onMount: onMount
+  });
+  (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useCreateComponentStepChange)({
+    totalStepCount: totalStepCount,
+    onNext: onNext,
+    isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
     setShouldViewAll: setShouldViewAll,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
     componentName: componentName,
-    getComponentSteps: getFullPageSteps,
     currentStep: currentStep,
     shouldViewAll: shouldViewAll,
     backButtonText: backButtonText,
@@ -136,200 +145,18 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     componentBlockClass: blockClass,
     setCreateComponentActions: setCreateFullPageActions,
     setModalIsOpen: setModalIsOpen
-  }); // Log a warning to the console in the event there are no CreateFullPageSection components
-  // inside of the CreateFullPageSteps when the viewAll toggle is provided and turned on.
-  // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-  /* istanbul ignore next */
-
-  (0, _react.useEffect)(function () {
-    if (includeViewAllToggle && shouldViewAll) {
-      var childrenArray = Array.isArray(children) ? children : [children];
-      var fullPageStepComponents = childrenArray.filter(function (child) {
-        return isFullPageStep(child);
-      });
-      var fullPageSectionComponents = [];
-      fullPageStepComponents.forEach(function (child, index) {
-        // We have received children for a FullPageStep
-        if (shouldViewAll && typeof child.props.children !== 'undefined') {
-          // Only a string was provided as children of CreateFullPageStep, this is not permitted when using view all toggle
-          if (typeof child.props.children === 'string') {
-            console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
-          } else {
-            // The FullPageStep has an array of children, lets check each one to see if it is a FullPageSection
-            if (child.props.children.length) {
-              child.props.children.forEach(function (stepChild) {
-                if (isFullPageSection(stepChild)) {
-                  fullPageSectionComponents.push(stepChild);
-                }
-              });
-            } else {
-              // The FullPageStep only has a single React element as a child, lets check to see if it is a FullPageSection
-              if (isFullPageSection(child.props.children)) {
-                fullPageSectionComponents.push(child.props.children);
-              }
-            }
-          }
-        } // If there are fewer CreateFullPageSection components than CreateFullPageStep components
-        // it means that each CreateFullPageStep does not have at least one CreateFullPageSection
-        // this is not permitted when using view all toggle
-
-
-        if (fullPageSectionComponents.length < fullPageStepComponents.length && index === fullPageStepComponents.length - 1 // wait until we've finished checking each FullPageStep before giving a warning
-        ) {
-          console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
-        } // We have received a single child element, lets check to see that it is
-        // a CreateFullPageSection component, if it is not we should add a console
-        // warning, as each CreateFullPageStep required at least one CreateFullPageSection,
-        // when using the view all toggle
-
-
-        if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
-          if (!isFullPageSection(child.props.children)) {
-            console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
-          }
-        }
-      });
-    }
-  }, [includeViewAllToggle, shouldViewAll, children]); // check if child is a full page step component
-
-  var isFullPageStep = function isFullPageStep(child) {
-    if (child && child.props && child.props.type === _constants.CREATE_FULL_PAGE_STEP) {
-      return true;
-    }
-
-    return false;
-  }; // check if child is a full page section component
-  // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-  /* istanbul ignore next */
-
-
-  var isFullPageSection = function isFullPageSection(child) {
-    if (child && child.props && child.props.type === _constants.CREATE_FULL_PAGE_SECTION) {
-      return true;
-    }
-
-    return false;
-  }; // renders the step progression components in the left influencer area
-
-
-  var getFullPageComponents = function getFullPageComponents(childrenElements) {
-    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
-    var fullPageStepComponents = childrenArray.filter(function (child) {
-      return isFullPageStep(child);
-    });
-    var sectionChildElements = [];
-    fullPageStepComponents.forEach(function (child) {
-      // we have received an array of children, lets check to see that each child is
-      // a FullPageSection component before adding it to sectionChildElements
-      // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-      /* istanbul ignore next */
-      if (shouldViewAll && child.props.children.length) {
-        child.props.children.forEach(function (stepChild) {
-          if (isFullPageSection(stepChild)) {
-            sectionChildElements.push(stepChild);
-          }
-        });
-      } // we have received a single child element, lets check to see that it is
-      // a CreateFullPageSection component before adding it to sectionChildElements
-
-
-      if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
-        // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-        /* istanbul ignore next */
-        if (isFullPageSection(child.props.children)) {
-          sectionChildElements.push(child.props.children);
-        }
-      }
-    });
-    return {
-      sections: sectionChildElements,
-      steps: fullPageStepComponents
-    };
-  }; // renders all children (CreateFullPageSteps and regular children elements)
-
-
-  var renderChildren = function renderChildren(childrenElements) {
-    var step = 0;
-    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
-    var indexOfLastFullPageStep = childrenArray.map(function (el) {
-      var _el$props;
-
-      return el === null || el === void 0 ? void 0 : (_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.type;
-    }).lastIndexOf(_constants.CREATE_FULL_PAGE_STEP);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray.map(function (child, stepIndex) {
-      var _cx;
-
-      if (!isFullPageStep(child)) {
-        return child;
-      }
-
-      step++;
-      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 !== step), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === step), _cx)),
-        key: "key_".concat(stepIndex)
-      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderStepChildren(child.props.children, indexOfLastFullPageStep === step - 1)));
-    }));
-  };
-
-  var renderStepChildren = function renderStepChildren(fullPageStepComponent, isLastFullPageStep) {
-    var fullPageStepComponents = Array.isArray(fullPageStepComponent) ? fullPageStepComponent : [fullPageStepComponent];
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fullPageStepComponents.map(function (child, index) {
-      var _cx2;
-
-      if (!isFullPageSection(child)) {
-        return child;
-      } // Needed to be able to not render the divider
-      // line on the last section of the last step
-      // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-      /* istanbul ignore next */
-
-
-      var isLastSectionOfLastStep = isLastFullPageStep && fullPageStepComponents.length - 1 === index;
-      /* istanbul ignore next */
-
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        className: (0, _classnames.default)(child.props.className, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__step--hidden-section"), child.props.viewAllOnly && !shouldViewAll), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__step--visible-section"), !child.props.viewAllOnly || child.props.viewAllOnly && shouldViewAll), _cx2)),
-        key: "key_".concat(index)
-      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldViewAll && /*#__PURE__*/_react.default.createElement("h4", {
-        className: "".concat(blockClass, "__step-title")
-      }, child.props.title), child, shouldViewAll && !isLastSectionOfLastStep && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(blockClass, "__section-divider")
-      })));
-    }));
-  }; // currently, we are not supporting the use of 'view all' toggle state or CreateFullPageSection -- this may be a future feature
+  }); // currently, we are not supporting the use of 'view all' toggle state
 
   /* istanbul ignore next */
 
-
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,
     className: (0, _classnames.default)(blockClass, className)
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
-    activeSectionIndex: activeSectionIndex,
-    componentBlockClass: blockClass,
-    createComponentName: componentName,
-    currentStep: currentStep,
-    createComponents: getFullPageComponents(children),
-    includeViewAllToggle: includeViewAllToggle,
-    handleToggleState: function handleToggleState(toggleState) {
-      return setShouldViewAll(toggleState);
-    },
-    handleActiveSectionIndex: function handleActiveSectionIndex(index) {
-      return setActiveSectionIndex(index);
-    },
-    previousState: previousState,
-    sideNavAriaLabel: sideNavAriaLabel,
-    toggleState: shouldViewAll,
-    viewAllToggleLabelText: viewAllToggleLabelText,
-    viewAllToggleOffLabelText: viewAllToggleOffLabelText,
-    viewAllToggleOnLabelText: viewAllToggleOnLabelText
+    stepData: stepData,
+    currentStep: currentStep
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -338,7 +165,29 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
     className: "".concat(blockClass, "__form")
-  }, renderChildren(children)))), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
+  }, /*#__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);
+  }))))), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
     className: "".concat(blockClass, "__buttons"),
     actions: createFullPageActions,
     size: "max"
@@ -385,22 +234,13 @@ CreateFullPage.propTypes = {
   /**
    * The main content of the full page
    */
-  children: (0, _hasValidType.hasValidChildrenType)({
-    componentName: componentName,
-    childType: _constants.CREATE_FULL_PAGE_STEP
-  }),
+  children: _propTypes.default.node,
 
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
-   * An optional prop that provides a toggle element in the left side influencer panel
-   */
-  includeViewAllToggle: _propTypes.default.bool,
-
   /**
    * The primary 'danger' button text in the modal
    */
@@ -453,26 +293,5 @@ CreateFullPage.propTypes = {
   /**
    * The main title of the full page, displayed in the header area.
    */
-  title: _propTypes.default.node,
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: _propTypes.default.string,
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle `off` text
-   */
-  viewAllToggleOffLabelText: _propTypes.default.string,
-
-  /**
-   * @ignore
-   * Sets the label text for the view all toggle `on` text
-   */
-  viewAllToggleOnLabelText: _propTypes.default.string
-};
-CreateFullPage.defaultProps = {
-  includeViewAllToggle: false
+  title: _propTypes.default.node
 };

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CreateFullPageStep = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,16 +21,20 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _constants = require("./constants.js");
-
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _CreateFullPage = require("./CreateFullPage");
+
+var _hooks = require("../../global/js/hooks");
+
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
+
 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,15 +42,61 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var componentName = 'CreateFullPageStep';
 var blockClass = "".concat(_settings.pkg.prefix, "--create-full-page__step");
 var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _cx;
+
   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;
-  return /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _classnames.default)(blockClass, className),
+      fieldsetLegendText = _ref.fieldsetLegendText,
+      onNext = _ref.onNext,
+      onMount = _ref.onMount,
+      secondaryLabel = _ref.secondaryLabel;
+  var steps = (0, _react.useContext)(_CreateFullPage.StepsContext);
+  var stepNumber = (0, _react.useContext)(_CreateFullPage.StepNumberContext);
+  var previousState = (0, _hooks.usePreviousValue)({
+    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+  }); // 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);
+    }
+  }, [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.
+
+  (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
+  // 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);
+    }
+  }, [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)),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("h5", {
     className: "".concat(blockClass, "-title")
@@ -53,7 +107,7 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
   }, 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 CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 exports.CreateFullPageStep = CreateFullPageStep;
@@ -124,11 +178,4 @@ CreateFullPageStep.propTypes = {
    * Sets the title text for a create full page step
    */
   title: _propTypes.default.node.isRequired
-}; // 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
-// component needs to make a choice or assumption when a prop is not supplied.
-
-CreateFullPageStep.defaultProps = {
-  type: _constants.CREATE_FULL_PAGE_STEP
 };

package/lib/components/CreateFullPage/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "CreateFullPage", {
     return _CreateFullPage.CreateFullPage;
   }
 });
-Object.defineProperty(exports, "CreateFullPageSection", {
-  enumerable: true,
-  get: function get() {
-    return _CreateFullPageSection.CreateFullPageSection;
-  }
-});
 Object.defineProperty(exports, "CreateFullPageStep", {
   enumerable: true,
   get: function get() {
@@ -24,6 +18,4 @@ Object.defineProperty(exports, "CreateFullPageStep", {
 
 var _CreateFullPage = require("./CreateFullPage");
 
-var _CreateFullPageStep = require("./CreateFullPageStep");
-
-var _CreateFullPageSection = require("./CreateFullPageSection");
+var _CreateFullPageStep = require("./CreateFullPageStep");