@carbon/ibm-products 1.4.0 → 1.7.0

package/es/components/AddSelect/AddSelectBreadcrumbs.js

@@ -0,0 +1,56 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+//
+// Copyright IBM Corp. 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 from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
+import PropTypes from 'prop-types';
+var componentName = 'AddSelectBreadcrumbs';
+export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
+  var itemsLabel = _ref.itemsLabel,
+      path = _ref.path,
+      setPath = _ref.setPath;
+
+  var clickHandler = function clickHandler(id) {
+    var newPath = _toConsumableArray(path);
+
+    var pathIdx = newPath.findIndex(function (entry) {
+      return entry.id === id;
+    });
+    var finalPath = newPath.splice(0, pathIdx + 1);
+    setPath(finalPath);
+  };
+
+  var resetPath = function resetPath() {
+    setPath([]);
+  };
+
+  return /*#__PURE__*/React.createElement(Breadcrumb, {
+    noTrailingSlash: true
+  }, /*#__PURE__*/React.createElement(BreadcrumbItem, {
+    onClick: resetPath
+  }, itemsLabel), path.map(function (entry, idx, arr) {
+    var isCurrentPage = idx === arr.length - 1;
+
+    var crumbHandler = function crumbHandler() {
+      if (!isCurrentPage) {
+        clickHandler(entry.id);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(BreadcrumbItem, {
+      key: entry.id,
+      isCurrentPage: isCurrentPage,
+      onClick: crumbHandler
+    }, entry.title);
+  }));
+};
+AddSelectBreadcrumbs.propTypes = {
+  itemsLabel: PropTypes.string,
+  path: PropTypes.array,
+  setPath: PropTypes.func
+};
+AddSelectBreadcrumbs.displayName = componentName;

package/es/components/AddSelect/AddSelectList.js

@@ -0,0 +1,94 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+//
+// Copyright IBM Corp. 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 from 'react';
+import { Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell } from 'carbon-components-react';
+import { ChevronRight16 } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import { pkg } from '../../settings';
+var componentName = 'AddSelectList';
+export var AddSelectList = function AddSelectList(_ref) {
+  var filteredItems = _ref.filteredItems,
+      multi = _ref.multi,
+      multiSelection = _ref.multiSelection,
+      path = _ref.path,
+      setMultiSelection = _ref.setMultiSelection,
+      setPath = _ref.setPath,
+      setSingleSelection = _ref.setSingleSelection,
+      singleSelection = _ref.singleSelection;
+  var blockClass = "".concat(pkg.prefix, "--add-select__selections");
+
+  var handleSingleSelection = function handleSingleSelection(value) {
+    setSingleSelection(value);
+  };
+
+  var handleMultiSelection = function handleMultiSelection(value, checked) {
+    if (checked) {
+      var newValues = [].concat(_toConsumableArray(multiSelection), [value]);
+      setMultiSelection(newValues);
+    } else {
+      var _newValues = multiSelection.filter(function (v) {
+        return v !== value;
+      });
+
+      setMultiSelection(_newValues);
+    }
+  };
+
+  var onNavigateItem = function onNavigateItem(_ref2) {
+    var id = _ref2.id,
+        title = _ref2.title;
+    setPath([].concat(_toConsumableArray(path), [{
+      id: id,
+      title: title
+    }]));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-wrapper")
+  }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
+    selection: true,
+    className: "".concat(blockClass)
+  }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
+    return /*#__PURE__*/React.createElement(StructuredListRow, {
+      key: item.id
+    }, /*#__PURE__*/React.createElement(StructuredListCell, null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-cell-wrapper")
+    }, multi ? /*#__PURE__*/React.createElement(Checkbox, {
+      className: "".concat(blockClass, "-checkbox"),
+      onChange: function onChange(value) {
+        return handleMultiSelection(item.id, value);
+      },
+      labelText: item.title,
+      id: item.id,
+      checked: multiSelection.includes(item.id)
+    }) : /*#__PURE__*/React.createElement(RadioButton, {
+      className: "".concat(blockClass, "-radio"),
+      name: "add-select-selections",
+      id: item.id,
+      value: item.value,
+      labelText: item.title,
+      onChange: handleSingleSelection,
+      selected: item.value === singleSelection
+    }), item.children && /*#__PURE__*/React.createElement(ChevronRight16, {
+      onClick: function onClick() {
+        return onNavigateItem(item);
+      }
+    }))));
+  }))));
+};
+AddSelectList.propTypes = {
+  filteredItems: PropTypes.array,
+  multi: PropTypes.bool,
+  multiSelection: PropTypes.array,
+  path: PropTypes.array,
+  setMultiSelection: PropTypes.func,
+  setPath: PropTypes.func,
+  setSingleSelection: PropTypes.func,
+  singleSelection: PropTypes.string
+};
+AddSelectList.displayName = componentName;

package/es/components/AddSelect/AddSelectSidebar.js

@@ -0,0 +1,110 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+//
+// Copyright IBM Corp. 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 from 'react';
+import { Tag, Accordion, AccordionItem, Button } from 'carbon-components-react';
+import { SubtractAlt32 } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
+import { pkg } from '../../settings';
+var componentName = 'AddSelectSidebar';
+export var AddSelectSidebar = function AddSelectSidebar(_ref) {
+  var influencerTitle = _ref.influencerTitle,
+      items = _ref.items,
+      multiSelection = _ref.multiSelection,
+      noSelectionDescription = _ref.noSelectionDescription,
+      noSelectionTitle = _ref.noSelectionTitle,
+      removeIconDescription = _ref.removeIconDescription,
+      setMultiSelection = _ref.setMultiSelection;
+  var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
+
+  var handleItemRemove = function handleItemRemove(id) {
+    var newSelections = multiSelection.filter(function (v) {
+      return v !== id;
+    });
+    setMultiSelection(newSelections);
+  }; // utility to flatten the list of items and their children into a single searchable array
+
+
+  var flattenItems = function flattenItems(arr) {
+    return arr.reduce(function (prev, cur) {
+      var children = cur.children,
+          item = _objectWithoutProperties(cur, _excluded);
+
+      return prev.concat(item).concat(children ? flattenItems(children) : []);
+    }, []);
+  };
+
+  var flattenedItems = flattenItems(items);
+  var sidebarItems = multiSelection.map(function (selectedId) {
+    return flattenedItems.find(function (item) {
+      return item.id === selectedId;
+    });
+  });
+
+  var getTitle = function getTitle(_ref2) {
+    var title = _ref2.title,
+        subtitle = _ref2.subtitle,
+        id = _ref2.id;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-accordion-title")
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, title), /*#__PURE__*/React.createElement("p", null, subtitle)), /*#__PURE__*/React.createElement(Button, {
+      renderIcon: SubtractAlt32,
+      iconDescription: removeIconDescription,
+      hasIconOnly: true,
+      onClick: function onClick() {
+        return handleItemRemove(id);
+      },
+      kind: "ghost",
+      className: "".concat(blockClass, "-item-remove-button")
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: blockClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-header")
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "-title")
+  }, influencerTitle), /*#__PURE__*/React.createElement(Tag, {
+    type: "gray",
+    size: "sm"
+  }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/React.createElement(Accordion, {
+    align: "start"
+  }, sidebarItems.map(function (item) {
+    return /*#__PURE__*/React.createElement(AccordionItem, {
+      title: getTitle(item),
+      key: item.id
+    }, Object.keys(item).map(function (key) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(blockClass, "-item"),
+        key: key
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "".concat(blockClass, "-item-header")
+      }, key), /*#__PURE__*/React.createElement("p", {
+        className: "".concat(blockClass, "-item-body")
+      }, item[key]));
+    }));
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-body")
+  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
+    subtitle: noSelectionDescription,
+    title: noSelectionTitle,
+    size: "sm"
+  })));
+};
+AddSelectSidebar.propTypes = {
+  influencerTitle: PropTypes.string,
+  items: PropTypes.array,
+  multiSelection: PropTypes.array,
+  noSelectionDescription: PropTypes.string,
+  noSelectionTitle: PropTypes.string,
+  removeIconDescription: PropTypes.string,
+  setMultiSelection: PropTypes.func
+};
+AddSelectSidebar.displayName = componentName;

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -343,9 +343,12 @@ BreadcrumbWithOverflow.propTypes = {
   noTrailingSlash: PropTypes.bool,
 
   /**
-   * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+   * overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
    */
-  overflowAriaLabel: PropTypes.string.isRequired
+  overflowAriaLabel: PropTypes.string.isRequired.if(function (_ref6) {
+    var breadcrumbs = _ref6.breadcrumbs;
+    return breadcrumbs.length > 1;
+  })
 };
 BreadcrumbWithOverflow.defaultProps = {
   noTrailingSlash: false

package/es/components/ButtonMenu/ButtonMenu.js

@@ -104,5 +104,5 @@ ButtonMenu.propTypes = {
   size: Button.propTypes.size
 };
 ButtonMenu.defaultProps = {
-  size: Button.defaultProps.size
+  size: 'default'
 };

package/es/components/CancelableTextEdit/CancelableTextEdit.js

@@ -23,7 +23,7 @@ import { Button, TextInput } from 'carbon-components-react';
 import { prepareProps } from '../../global/js/utils/props-helper';
 import { pkg, carbon } from '../../settings';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { Checkmark16, Reset16 } from '@carbon/icons-react'; // Carbon and package components we use.
+import { Checkmark16, Close16 } from '@carbon/icons-react'; // Carbon and package components we use.
 
 /* TODO: @import(s) of carbon components and other package components. */
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -131,7 +131,7 @@ export var CancelableTextEdit = /*#__PURE__*/React.forwardRef(function (_ref, re
     hasIconOnly: true,
     iconDescription: revertDescription,
     onClick: handleRevert,
-    renderIcon: Reset16
+    renderIcon: Close16
   }), /*#__PURE__*/React.createElement(Button, {
     className: "".concat(blockClass, "__save"),
     kind: "ghost",

package/es/components/Card/Card.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
-    _excluded2 = ["id"];
+    _excluded2 = ["id"],
+    _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -88,10 +89,11 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
           onKeyDown = _ref3.onKeyDown,
-          href = _ref3.href;
+          href = _ref3.href,
+          rest = _objectWithoutProperties(_ref3, _excluded3);
 
       if (productive) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
           key: id,
           renderIcon: Icon,
           hasIconOnly: true,
@@ -100,7 +102,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
-        });
+        }));
       }
 
       if (href) {

package/es/components/CreateFullPage/CreateFullPage.js

@@ -10,7 +10,7 @@ var _excluded = ["backButtonText", "cancelButtonText", "children", "className",
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React, { useState, createContext } from 'react'; // Other standard imports.
+import React, { useEffect, useState, createContext } from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -21,6 +21,7 @@ import { Grid, ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form
 import { CreateInfluencer } from '../CreateInfluencer';
 import { ActionSet } from '../ActionSet';
 import { usePreviousValue, useValidCreateStepCount, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
+import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 var blockClass = "".concat(pkg.prefix, "--create-full-page");
 var componentName = 'CreateFullPage'; // This is a general context for the steps container
 // containing information about the state of the container
@@ -95,7 +96,30 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       stepData = _useState18[0],
       setStepData = _useState18[1];
 
-  var totalStepCount = React.Children.count(children);
+  var _useState19 = useState(1),
+      _useState20 = _slicedToArray(_useState19, 2),
+      firstIncludedStep = _useState20[0],
+      setFirstIncludedStep = _useState20[1];
+
+  var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      lastIncludedStep = _useState22[0],
+      setLastIncludedStep = _useState22[1];
+
+  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,
@@ -104,7 +128,9 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   useValidCreateStepCount(stepData.length, componentName);
   useCreateComponentStepChange({
-    totalStepCount: totalStepCount,
+    firstIncludedStep: firstIncludedStep,
+    lastIncludedStep: lastIncludedStep,
+    stepData: stepData,
     onNext: onNext,
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
@@ -158,8 +184,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       },
       setStepData: setStepData,
-      stepData: stepData,
-      totalStepCount: totalStepCount
+      stepData: stepData
     }
   }, React.Children.map(children, function (child, index) {
     return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /**
  * Copyright IBM Corp. 2021, 2022
@@ -7,13 +7,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * 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, useContext, useEffect } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
 import { FormGroup } from 'carbon-components-react';
 import { StepsContext, StepNumberContext } from './CreateFullPage';
-import { usePreviousValue } from '../../global/js/hooks';
+import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 import pconsole from '../../global/js/utils/pconsole';
 var componentName = 'CreateFullPageStep';
 var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
@@ -25,6 +25,7 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       subtitle = _ref.subtitle,
       description = _ref.description,
       disableSubmit = _ref.disableSubmit,
+      includeStep = _ref.includeStep,
       introStep = _ref.introStep,
       title = _ref.title,
       hasFieldset = _ref.hasFieldset,
@@ -32,47 +33,45 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onNext = _ref.onNext,
       onMount = _ref.onMount,
       secondaryLabel = _ref.secondaryLabel;
-  var steps = useContext(StepsContext);
+  var stepsContext = useContext(StepsContext);
   var stepNumber = useContext(StepNumberContext);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldIncludeStep = _useState2[0],
+      setShouldIncludeStep = _useState2[1];
+
   var previousState = usePreviousValue({
-    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+  });
+  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.
 
   useEffect(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
-      steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
-  // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
-
+  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
   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(_toConsumableArray(prev), [{
-          title: title,
-          secondaryLabel: secondaryLabel,
-          introStep: introStep
-        }]);
-      });
-    }
-  }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
+    setShouldIncludeStep(includeStep);
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   useEffect(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps.setIsDisabled(disableSubmit);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
     }
-  }, [steps, stepNumber, disableSubmit, onNext]);
-  return steps ? /*#__PURE__*/React.createElement("section", {
-    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
+  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  return stepsContext ? /*#__PURE__*/React.createElement("section", {
+    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
   }, /*#__PURE__*/React.createElement("h5", {
     className: "".concat(blockClass, "-title")
@@ -121,6 +120,12 @@ CreateFullPageStep.propTypes = {
    */
   hasFieldset: PropTypes.bool,
 
+  /**
+   * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+   * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
+   */
+  includeStep: PropTypes.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
    */
@@ -153,4 +158,7 @@ CreateFullPageStep.propTypes = {
    * Sets the title text for a create full page step
    */
   title: PropTypes.node.isRequired
+};
+CreateFullPageStep.defaultProps = {
+  includeStep: true
 };

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -19,21 +19,42 @@ export var CreateInfluencer = function CreateInfluencer(_ref) {
       currentStep = _ref.currentStep,
       stepData = _ref.stepData;
 
-  // renders the step progression components in the left influencer area
+  var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
+    var dynamicSteps = [];
+    array.forEach(function (item, index) {
+      var _array$index;
+
+      if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
+        dynamicSteps.push(item);
+      }
+    });
+    return dynamicSteps.length;
+  }; // renders the step progression components in the left influencer area
+
+
   var renderProgressSteps = function renderProgressSteps() {
     var _stepData$, _stepData$2;
 
     var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
       return !(item !== null && item !== void 0 && item.introStep);
     });
+    var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }); // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
+    // we need to subtract the number of !shouldIncludeStep/s before the current step
+    // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
+
+    var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
     }, 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 - 2 : currentStep - 1,
+      currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
+      : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
+      ,
       spaceEqually: true,
       vertical: true,
       className: cx("".concat(blockClass, "__progress-indicator"))
-    }, extractedSteps.map(function (step, stepIndex) {
+    }, progressSteps.map(function (step, stepIndex) {
       return /*#__PURE__*/React.createElement(ProgressStep, {
         label: step.title,
         key: stepIndex,
@@ -66,6 +87,7 @@ CreateInfluencer.propTypes = {
   stepData: PropTypes.arrayOf(PropTypes.shape({
     introStep: PropTypes.bool,
     secondaryLabel: PropTypes.string,
+    shouldIncludeStep: PropTypes.bool,
     title: PropTypes.node
   }))
 };