@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/CreateFullPage/CreateFullPage.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Tooltip, Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
 import React__default, { useState, useRef, useEffect, createContext } from 'react';
 import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
@@ -22,18 +22,17 @@ import { useValidCreateStepCount } from '../../global/js/hooks/useValidCreateSte
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
 
-var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClickInfluencerStep", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle", "breadcrumbOverflowTooltipAlign"];
-var blockClass = "".concat(pkg.prefix, "--create-full-page");
-var componentName = 'CreateFullPage';
+const blockClass = `${pkg.prefix}--create-full-page`;
+const 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__*/createContext(null);
+const 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
-var StepNumberContext = /*#__PURE__*/createContext(-1);
+const StepNumberContext = /*#__PURE__*/createContext(-1);
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *
@@ -46,88 +45,51 @@ on the Carbon's grid system
 include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
 component to get the desired affect.
  */
-var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var breadcrumbsOverflowAriaLabel = _ref.breadcrumbsOverflowAriaLabel,
-    breadcrumbs = _ref.breadcrumbs,
-    backButtonText = _ref.backButtonText,
-    cancelButtonText = _ref.cancelButtonText,
-    children = _ref.children,
-    className = _ref.className,
-    initialStep = _ref.initialStep,
-    maxVisibleBreadcrumbs = _ref.maxVisibleBreadcrumbs,
-    modalDangerButtonText = _ref.modalDangerButtonText,
-    modalDescription = _ref.modalDescription,
-    modalSecondaryButtonText = _ref.modalSecondaryButtonText,
-    modalTitle = _ref.modalTitle,
-    nextButtonText = _ref.nextButtonText,
-    onClickInfluencerStep = _ref.onClickInfluencerStep,
-    onClose = _ref.onClose,
-    onRequestSubmit = _ref.onRequestSubmit,
-    firstFocusElement = _ref.firstFocusElement,
-    submitButtonText = _ref.submitButtonText,
-    noTrailingSlash = _ref.noTrailingSlash,
-    title = _ref.title,
-    secondaryTitle = _ref.secondaryTitle,
-    _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? 'right' : _ref$breadcrumbOverfl,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    createFullPageActions = _useState2[0],
-    setCreateFullPageActions = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    _useState4[1];
-  var _useState5 = useState(1),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentStep = _useState6[0],
-    setCurrentStep = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isSubmitting = _useState8[0],
-    setIsSubmitting = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    modalIsOpen = _useState10[0],
-    setModalIsOpen = _useState10[1];
-  var previousState = usePreviousValue({
-    currentStep: currentStep
+let CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    breadcrumbsOverflowAriaLabel,
+    breadcrumbs,
+    backButtonText,
+    cancelButtonText,
+    children,
+    className,
+    initialStep,
+    maxVisibleBreadcrumbs,
+    modalDangerButtonText,
+    modalDescription,
+    modalSecondaryButtonText,
+    modalTitle,
+    nextButtonText,
+    onClickInfluencerStep,
+    onClose,
+    onRequestSubmit,
+    firstFocusElement,
+    submitButtonText,
+    noTrailingSlash,
+    title,
+    secondaryTitle,
+    breadcrumbOverflowTooltipAlign = 'right',
+    ...rest
+  } = _ref;
+  const [createFullPageActions, setCreateFullPageActions] = useState([]);
+  const [shouldViewAll, setShouldViewAll] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const previousState = usePreviousValue({
+    currentStep
   });
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isDisabled = _useState12[0],
-    setIsDisabled = _useState12[1];
-  var _useState13 = useState(),
-    _useState14 = _slicedToArray(_useState13, 2),
-    onPrevious = _useState14[0],
-    _setOnPrevious = _useState14[1];
-  var _useState15 = useState(),
-    _useState16 = _slicedToArray(_useState15, 2),
-    onNext = _useState16[0],
-    _setOnNext = _useState16[1];
-  var _useState17 = useState(),
-    _useState18 = _slicedToArray(_useState17, 2),
-    onMount = _useState18[0],
-    _setOnMount = _useState18[1];
-  var _useState19 = useState([]),
-    _useState20 = _slicedToArray(_useState19, 2),
-    stepData = _useState20[0],
-    setStepData = _useState20[1];
-  var _useState21 = useState(1),
-    _useState22 = _slicedToArray(_useState21, 2),
-    firstIncludedStep = _useState22[0],
-    setFirstIncludedStep = _useState22[1];
-  var _useState23 = useState(),
-    _useState24 = _slicedToArray(_useState23, 2),
-    lastIncludedStep = _useState24[0],
-    setLastIncludedStep = _useState24[1];
-  var invalidInitialStepWarned = useRef(false);
-  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);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [onPrevious, setOnPrevious] = useState();
+  const [onNext, setOnNext] = useState();
+  const [onMount, setOnMount] = useState();
+  const [stepData, setStepData] = useState([]);
+  const [firstIncludedStep, setFirstIncludedStep] = useState(1);
+  const [lastIncludedStep, setLastIncludedStep] = useState();
+  const invalidInitialStepWarned = useRef(false);
+  useEffect(() => {
+    const firstItem = stepData.findIndex(item => item?.shouldIncludeStep) + 1;
+    const lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
     if (firstItem !== firstIncludedStep) {
       setFirstIncludedStep(firstItem);
     }
@@ -137,54 +99,54 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
     /**@ts-ignore */
     if (initialStep) {
-      var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+      const numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
-  useEffect(function () {
-    if (!(invalidInitialStepWarned !== null && invalidInitialStepWarned !== void 0 && invalidInitialStepWarned.current)) {
+  useEffect(() => {
+    if (!invalidInitialStepWarned?.current) {
       checkForValidInitialStep();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialStep, stepData]);
   useCreateComponentFocus({
-    previousState: previousState,
-    currentStep: currentStep,
-    blockClass: blockClass,
-    onMount: onMount,
-    firstFocusElement: firstFocusElement
+    previousState,
+    currentStep,
+    blockClass,
+    onMount,
+    firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
   useCreateComponentStepChange({
-    firstIncludedStep: firstIncludedStep,
-    lastIncludedStep: lastIncludedStep,
-    stepData: stepData,
-    onPrevious: onPrevious,
-    onNext: onNext,
+    firstIncludedStep,
+    lastIncludedStep,
+    stepData,
+    onPrevious,
+    onNext,
     isSubmitDisabled: isDisabled,
-    setCurrentStep: setCurrentStep,
-    setIsSubmitting: setIsSubmitting,
-    onClose: onClose,
-    onRequestSubmit: onRequestSubmit,
-    componentName: componentName,
-    currentStep: currentStep,
-    backButtonText: backButtonText,
-    cancelButtonText: cancelButtonText,
-    submitButtonText: submitButtonText,
-    nextButtonText: nextButtonText,
-    isSubmitting: isSubmitting,
+    setCurrentStep,
+    setIsSubmitting,
+    onClose,
+    onRequestSubmit,
+    componentName,
+    currentStep,
+    backButtonText,
+    cancelButtonText,
+    submitButtonText,
+    nextButtonText,
+    isSubmitting,
     componentBlockClass: blockClass,
     setCreateComponentActions: setCreateFullPageActions,
-    setModalIsOpen: setModalIsOpen
+    setModalIsOpen
   });
-  var checkForValidInitialStep = function checkForValidInitialStep() {
+  const checkForValidInitialStep = () => {
     // An invalid initialStep value was provided, we'll default to rendering the first step or last step
 
-    if (initialStep && stepData !== null && stepData !== void 0 && stepData.length && Number(initialStep) > Number(stepData === null || stepData === void 0 ? void 0 : stepData.length) || Number(initialStep) <= 0) {
+    if (initialStep && stepData?.length && Number(initialStep) > Number(stepData?.length) || Number(initialStep) <= 0) {
       invalidInitialStepWarned.current = true;
       setCurrentStep(1);
-      console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
+      console.warn(`${componentName}: An invalid \`initialStep\` prop was supplied. The \`initialStep\` prop should be a number that is greater than 0 or less than or equal to the number of steps your ${componentName} has.`);
     }
   };
   // currently, we are not supporting the use of 'view all' toggle state
@@ -198,64 +160,50 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     noTrailingSlash: noTrailingSlash,
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
     maxVisible: maxVisibleBreadcrumbs,
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     overflowTooltipAlign: breadcrumbOverflowTooltipAlign
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__influencer-and-body-container")
+    className: `${blockClass}__influencer-and-body-container`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__influencer")
+    className: `${blockClass}__influencer`
   }, /*#__PURE__*/React__default.createElement(CreateInfluencer, {
     stepData: stepData,
     currentStep: currentStep,
     title: secondaryTitle,
     onClickStep: onClickInfluencerStep
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__main")
+    className: `${blockClass}__main`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content")
+    className: `${blockClass}__content`
   }, /*#__PURE__*/React__default.createElement(Form, {
-    className: "".concat(blockClass, "__form"),
+    className: `${blockClass}__form`,
     "aria-label": title
   }, /*#__PURE__*/React__default.createElement(StepsContext.Provider, {
     value: {
-      currentStep: currentStep,
-      setIsDisabled: setIsDisabled,
-      setOnPrevious: function setOnPrevious(fn) {
-        return _setOnPrevious(function () {
-          return fn;
-        });
-      },
-      setOnNext: function setOnNext(fn) {
-        return _setOnNext(function () {
-          return fn;
-        });
-      },
-      setOnMount: function setOnMount(fn) {
-        return _setOnMount(function () {
-          return fn;
-        });
-      },
-      setStepData: setStepData,
-      stepData: stepData
+      currentStep,
+      setIsDisabled,
+      setOnPrevious: fn => setOnPrevious(() => fn),
+      setOnNext: fn => setOnNext(() => fn),
+      setOnMount: fn => setOnMount(() => fn),
+      setStepData,
+      stepData
     }
-  }, React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement(StepNumberContext.Provider, {
-      value: index + 1,
-      key: index
-    }, child);
-  })))), /*#__PURE__*/React__default.createElement(ActionSet, {
-    className: "".concat(blockClass, "__buttons"),
+  }, React__default.Children.toArray(children).filter(Boolean).map((child, index) => /*#__PURE__*/React__default.createElement(StepNumberContext.Provider, {
+    value: index + 1,
+    key: index
+  }, child))))), /*#__PURE__*/React__default.createElement(ActionSet, {
+    className: `${blockClass}__buttons`,
     actions: createFullPageActions,
     buttonSize: "2xl",
     size: "2xl"
   }))), /*#__PURE__*/React__default.createElement(ComposedModal, {
-    className: "".concat(blockClass, "__modal"),
+    className: `${blockClass}__modal`,
     size: "sm",
     open: modalIsOpen,
     "aria-label": modalTitle,
-    onClose: function onClose() {
+    onClose: () => {
       setModalIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(ModalHeader, {
@@ -263,7 +211,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement("p", null, modalDescription)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     kind: "secondary",
-    onClick: function onClick() {
+    onClick: () => {
       setModalIsOpen(!modalIsOpen);
     },
     "data-modal-primary-focus": true

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -16,12 +16,11 @@ import pconsole from '../../global/js/utils/pconsole.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useRetrieveStepData } from '../../global/js/hooks/useRetrieveStepData.js';
 
-var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "invalid", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onPrevious", "onMount", "secondaryLabel"];
-var componentName = 'CreateFullPageStep';
-var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
+const componentName = 'CreateFullPageStep';
+const blockClass = `${pkg.prefix}--create-full-page__step`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   includeStep: true
 };
 
@@ -29,73 +28,75 @@ var defaults = {
 // Basically, fieldsetLegendText should only be specified when hasFieldset is true.
 // And usually, hasFieldset won't be specified at all unless it's being set to true.
 
-var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    subtitle = _ref.subtitle,
-    description = _ref.description,
-    disableSubmit = _ref.disableSubmit,
-    _ref$includeStep = _ref.includeStep,
-    includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
-    introStep = _ref.introStep,
-    invalid = _ref.invalid,
-    title = _ref.title,
-    hasFieldset = _ref.hasFieldset,
-    fieldsetLegendText = _ref.fieldsetLegendText,
-    onNext = _ref.onNext,
-    onPrevious = _ref.onPrevious,
-    onMount = _ref.onMount,
-    secondaryLabel = _ref.secondaryLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  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: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+let CreateFullPageStep = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    children,
+    className,
+    subtitle,
+    description,
+    disableSubmit,
+    includeStep = defaults.includeStep,
+    introStep,
+    invalid,
+    title,
+    hasFieldset,
+    fieldsetLegendText,
+    onNext,
+    onPrevious,
+    onMount,
+    secondaryLabel,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const stepsContext = useContext(StepsContext);
+  const stepNumber = useContext(StepNumberContext);
+  const [shouldIncludeStep, setShouldIncludeStep] = useState();
+  const previousState = usePreviousValue({
+    currentStep: stepsContext?.currentStep
   });
   useRetrieveStepData({
-    invalid: invalid,
-    stepsContext: stepsContext,
-    stepNumber: stepNumber,
-    introStep: introStep,
-    shouldIncludeStep: shouldIncludeStep,
-    secondaryLabel: secondaryLabel,
-    title: title
+    invalid,
+    stepsContext,
+    stepNumber,
+    introStep,
+    shouldIncludeStep,
+    secondaryLabel,
+    title
   });
 
   // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
-  useEffect(function () {
-    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
+  useEffect(() => {
+    if (stepNumber === stepsContext?.currentStep && previousState?.currentStep !== stepsContext?.currentStep) {
+      stepsContext?.setOnMount(onMount);
     }
-  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
-  useEffect(function () {
+  }, [onMount, stepsContext, stepNumber, previousState?.currentStep]);
+  useEffect(() => {
     setShouldIncludeStep(includeStep);
   }, [includeStep, stepsContext, title]);
 
   // Whenever we are the current step, supply our disableSubmit and onNext values to the
   // steps container context so that it can manage the 'Next' button appropriately.
-  useEffect(function () {
-    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+  useEffect(() => {
+    if (stepNumber === stepsContext?.currentStep) {
       stepsContext.setIsDisabled(disableSubmit);
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
+      stepsContext?.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
+      stepsContext?.setOnPrevious(onPrevious);
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious]);
-  var span = {
+  const span = {
     span: 50
   }; // Half.
 
-  var renderDescription = function renderDescription() {
+  const renderDescription = () => {
     if (description) {
-      var common = _objectSpread2({
+      const common = {
         children: description,
-        className: "".concat(blockClass, "-description")
-      }, span);
+        className: `${blockClass}-description`,
+        ...span
+      };
       if (typeof description === 'string') {
         return /*#__PURE__*/React__default.createElement(Column, _extends({}, common, {
           as: "p"
@@ -109,18 +110,21 @@ var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return null;
   };
   return stepsContext ? /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
-    className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
+    className: cx(blockClass, className, {
+      [`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,
+      [`${blockClass}__step--visible-step`]: stepNumber === stepsContext?.currentStep
+    }),
     ref: ref
   }), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, span, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, _extends({
-    className: "".concat(blockClass, "-title"),
+    className: `${blockClass}-title`,
     as: Heading
   }, span), title), subtitle && /*#__PURE__*/React__default.createElement(Column, _extends({
-    className: "".concat(blockClass, "-subtitle"),
+    className: `${blockClass}-subtitle`,
     as: "p"
   }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
-    className: "".concat(blockClass, "-fieldset")
-  }, children) : children) : pconsole.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"));
+    className: `${blockClass}-fieldset`
+  }, children) : children) : pconsole.warn(`You have tried using a ${componentName} component outside of a CreateFullPage. This is not allowed. ${componentName}s should always be children of the CreateFullPage`);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -146,8 +150,10 @@ CreateFullPageStep.propTypes = {
    * This is the legend text that appears above a fieldset html element for accessibility purposes. It is required when the optional `hasFieldset` prop is provided to a FullPageStep.
    */
   /**@ts-ignore */
-  fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
-    var hasFieldset = _ref2.hasFieldset;
+  fieldsetLegendText: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
     return hasFieldset === true;
   }),
   /**

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -15,19 +15,20 @@ import { pkg } from '../../settings.js';
 // Import portions of React that are needed.
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--create-influencer");
-var componentName = 'CreateInfluencer';
-var CreateInfluencer = function CreateInfluencer(_ref) {
-  var className = _ref.className,
-    currentStep = _ref.currentStep,
-    onClickStep = _ref.onClickStep,
-    stepData = _ref.stepData,
-    title = _ref.title;
-  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) {
+const blockClass = `${pkg.prefix}--create-influencer`;
+const componentName = 'CreateInfluencer';
+const CreateInfluencer = _ref => {
+  let {
+    className,
+    currentStep,
+    onClickStep,
+    stepData,
+    title
+  } = _ref;
+  const getNumberOfDynamicStepsBeforeCurrentStep = (array, key) => {
+    const dynamicSteps = [];
+    array.forEach((item, index) => {
+      if (array[index]?.[key] === false && index <= currentStep - 1) {
         dynamicSteps.push(item);
       }
     });
@@ -35,34 +36,29 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
   };
 
   // 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;
-    });
+  const renderProgressSteps = () => {
+    const extractedSteps = stepData?.filter(item => !item?.introStep);
+    const progressSteps = extractedSteps?.filter(item => 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;
+    const totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/React__default.createElement(Section, {
-      className: "".concat(blockClass, "__left-nav")
+      className: `${blockClass}__left-nav`
     }, title && /*#__PURE__*/React__default.createElement(Heading, {
-      className: "".concat(blockClass, "__title")
-    }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React__default.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
+      className: `${blockClass}__title`
+    }, title), currentStep === 1 && stepData[0]?.introStep ? null : /*#__PURE__*/React__default.createElement(ProgressIndicator, {
+      currentIndex: stepData[0]?.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")),
+      className: cx(`${blockClass}__progress-indicator`),
       onChange: onClickStep
-    }, progressSteps.map(function (step, stepIndex) {
+    }, progressSteps.map((step, stepIndex) => {
       return /*#__PURE__*/React__default.createElement(ProgressStep, {
-        label: step === null || step === void 0 ? void 0 : step.title,
+        label: step?.title,
         key: stepIndex,
         secondaryLabel: step.secondaryLabel || undefined,
         invalid: step.invalid