@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.35

package/es/components/index.js

@@ -0,0 +1,44 @@
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+export { AboutModal } from './AboutModal';
+export { APIKeyModal } from './APIKeyModal';
+export { Cascade } from './Cascade';
+export { ComboButton, ComboButtonItem } from './ComboButton';
+export { CreateFullPage, CreateFullPageStep } from './CreateFullPage';
+export { CreateModal } from './CreateModal';
+export { CreateSidePanel } from './CreateSidePanel';
+export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from './CreateTearsheet';
+export { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
+export { EmptyState, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from './EmptyStates';
+export { ExportModal } from './ExportModal';
+export { ExpressiveCard } from './ExpressiveCard';
+export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
+export { ImportModal } from './ImportModal';
+export { MultiAddSelect } from './MultiAddSelect';
+export { NotificationsPanel } from './NotificationsPanel';
+export { PageHeader } from './PageHeader';
+export { ProductiveCard } from './ProductiveCard';
+export { RemoveModal } from './RemoveModal';
+export { Saving } from './Saving';
+export { SidePanel } from './SidePanel';
+export { SingleAddSelect } from './SingleAddSelect';
+export { StatusIcon } from './StatusIcon';
+export { TagSet } from './TagSet';
+export { Tearsheet, TearsheetNarrow } from './Tearsheet';
+export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
+export { UserProfileImage } from './UserProfileImage';
+export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
+export { EditSidePanel } from './EditSidePanel';
+export { OptionsTile } from './OptionsTile';
+export { EditInPlace } from './EditInPlace';
+export { DataSpreadsheet } from './DataSpreadsheet';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
+export { EditTearsheet } from './EditTearsheet';
+export { EditTearsheetNarrow } from './EditTearsheetNarrow';
+export { EditFullPage } from './EditFullPage';
+export { EditUpdateCards } from './EditUpdateCards';

package/es/global/js/hooks/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+export { useActiveElement } from './useActiveElement';
+export { useNearestScroll, useWindowScroll } from './useWindowScroll';
+export { useWindowResize } from './useWindowResize';
+export { useClickOutside } from './useClickOutside';
+export { useCreateComponentFocus } from './useCreateComponentFocus';
+export { useCreateComponentStepChange } from './useCreateComponentStepChange';
+export { usePreviousValue } from './usePreviousValue';
+export { useResetCreateComponent } from './useResetCreateComponent';
+export { useRetrieveStepData } from './useRetrieveStepData';
+export { useValidCreateStepCount } from './useValidCreateStepCount';
+export { useControllableState } from './useControllableState';

package/es/global/js/hooks/useActiveElement.js

@@ -0,0 +1,25 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2022, 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 { useState, useEffect } from 'react';
+export var useActiveElement = function useActiveElement() {
+  var _useState = useState(document.activeElement),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var handleFocusIn = function handleFocusIn() {
+    setActive(document.activeElement);
+  };
+  useEffect(function () {
+    document.addEventListener('focusin', handleFocusIn);
+    return function () {
+      document.removeEventListener('focusin', handleFocusIn);
+    };
+  }, []);
+  return active;
+};

package/es/global/js/hooks/useClickOutside.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 { useEffect } from 'react';
+export var useClickOutside = function useClickOutside(ref, callback) {
+  var handleClick = function handleClick(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      callback(event.target);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('click', handleClick);
+    return function () {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};

package/es/global/js/hooks/useControllableState.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2016, 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 { useEffect, useRef, useState } from 'react';
+import pconsole from '../utils/pconsole';
+
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-versa.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+export function useControllableState(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'custom' : _ref$name,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    internalSetState = _useState2[1];
+  var controlled = useRef(null);
+  if (controlled.current === null) {
+    controlled.current = value !== undefined;
+  }
+  function setState(stateOrUpdater) {
+    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+    if (controlled.current === false) {
+      internalSetState(value);
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  }
+  useEffect(function () {
+    var controlledValue = value !== undefined;
+    // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
+    if (controlled.current === false && controlledValue) {
+      pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n          This is likely caused by the value changing to a defined value\n          from undefined. Decide between using a controlled or uncontrolled\n          value for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components");
+    }
+
+    // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
+    if (controlled.current === true && !controlledValue) {
+      pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n        'This is likely caused by the value changing to an undefined value\n        'from a defined one. Decide between using a controlled or\n        'uncontrolled value for the lifetime of the component.\n        'More info: https://reactjs.org/link/controlled-components");
+    }
+  }, [name, value]);
+  if (controlled.current === true) {
+    return [value, setState];
+  }
+  return [state, setState];
+}

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -0,0 +1,55 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { useEffect } from 'react';
+import wait from '../utils/wait';
+
+// Focus the first focusable element and call the onMount prop for the current step if one is provided
+export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
+  var previousState = _ref.previousState,
+    currentStep = _ref.currentStep,
+    blockClass = _ref.blockClass,
+    onMount = _ref.onMount,
+    firstFocusElement = _ref.firstFocusElement;
+  useEffect(function () {
+    if (typeof onMount === 'function') {
+      onMount();
+    }
+  }, [onMount]);
+  useEffect(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(elm) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return wait(10);
+            case 2:
+              elm.focus();
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
+        if (elm) {
+          awaitFocus(elm);
+        }
+      }
+    }
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
+};

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -0,0 +1,203 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * 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 { useCallback, useEffect } from 'react';
+export var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
+  var firstIncludedStep = _ref.firstIncludedStep,
+    lastIncludedStep = _ref.lastIncludedStep,
+    stepData = _ref.stepData,
+    onNext = _ref.onNext,
+    isSubmitDisabled = _ref.isSubmitDisabled,
+    setCurrentStep = _ref.setCurrentStep,
+    setIsSubmitting = _ref.setIsSubmitting,
+    setShouldViewAll = _ref.setShouldViewAll,
+    onClose = _ref.onClose,
+    onRequestSubmit = _ref.onRequestSubmit,
+    componentName = _ref.componentName,
+    currentStep = _ref.currentStep,
+    shouldViewAll = _ref.shouldViewAll,
+    backButtonText = _ref.backButtonText,
+    cancelButtonText = _ref.cancelButtonText,
+    submitButtonText = _ref.submitButtonText,
+    nextButtonText = _ref.nextButtonText,
+    isSubmitting = _ref.isSubmitting,
+    componentBlockClass = _ref.componentBlockClass,
+    setCreateComponentActions = _ref.setCreateComponentActions,
+    setModalIsOpen = _ref.setModalIsOpen;
+  // useEffect to handle multi step logic
+  useEffect(function () {
+    var onUnmount = function onUnmount() {
+      if (componentName !== 'CreateFullPage') {
+        setCurrentStep(0);
+      }
+      setIsSubmitting(false);
+      setShouldViewAll(false);
+      onClose();
+    };
+    var handleOnRequestSubmit = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return onRequestSubmit();
+            case 3:
+              onUnmount();
+              _context.next = 10;
+              break;
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+      return function handleOnRequestSubmit() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var handleNext = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setIsSubmitting(true);
+              if (!(typeof onNext === 'function')) {
+                _context2.next = 14;
+                break;
+              }
+              _context2.prev = 2;
+              _context2.next = 5;
+              return onNext();
+            case 5:
+              continueToNextStep();
+              _context2.next = 12;
+              break;
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](2);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
+            case 12:
+              _context2.next = 15;
+              break;
+            case 14:
+              continueToNextStep();
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[2, 8]]);
+      }));
+      return function handleNext() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var handleSubmit = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              setIsSubmitting(true);
+              // last step should have onNext as well
+              if (!(typeof onNext === 'function')) {
+                _context3.next = 15;
+                break;
+              }
+              _context3.prev = 2;
+              _context3.next = 5;
+              return onNext();
+            case 5:
+              _context3.next = 7;
+              return handleOnRequestSubmit();
+            case 7:
+              _context3.next = 13;
+              break;
+            case 9:
+              _context3.prev = 9;
+              _context3.t0 = _context3["catch"](2);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
+            case 13:
+              _context3.next = 17;
+              break;
+            case 15:
+              _context3.next = 17;
+              return handleOnRequestSubmit();
+            case 17:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, null, [[2, 9]]);
+      }));
+      return function handleSubmit() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+    if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
+      var buttons = [];
+      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
+        buttons.push({
+          key: 'create-action-button-back',
+          label: backButtonText,
+          onClick: function onClick() {
+            return setCurrentStep(function (prev) {
+              // Find previous included step to render
+              // There will always be a previous step otherwise we will
+              // have disabled the back button since we have reached the first visible step
+              do {
+                var _stepData;
+                prev--;
+              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+              return prev;
+            });
+          },
+          kind: 'secondary',
+          disabled: currentStep === firstIncludedStep
+        });
+      }
+      buttons.push({
+        key: 'create-action-button-cancel',
+        label: cancelButtonText,
+        onClick: componentName === 'CreateFullPage' ? function () {
+          return setModalIsOpen(true);
+        } : onUnmount,
+        kind: 'ghost'
+      });
+      buttons.push({
+        key: 'create-action-button-submit',
+        label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
+        onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
+        disabled: isSubmitDisabled,
+        kind: 'primary',
+        loading: isSubmitting,
+        className: "".concat(componentBlockClass, "__create-button")
+      });
+      setCreateComponentActions(buttons);
+    }
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
+  var continueToNextStep = useCallback(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData2;
+        prev++;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, setIsSubmitting, stepData]);
+};

package/es/global/js/hooks/usePreviousValue.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { useEffect, useRef } from 'react';
+
+/**
+ * Returns the previous state values included in the param
+ * @param {object} value
+ */
+export var usePreviousValue = function usePreviousValue(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};

package/es/global/js/hooks/useResetCreateComponent.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { useEffect } from 'react';
+import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
+
+/**
+ * Resets the current step of the create component if it has been closed.
+ * @param {object} useResetCreateComponent - Create component that uses this custom hook
+ * @param {object} useResetCreateComponent.firstIncludedStep
+ * @param {object} useResetCreateComponent.previousState
+ * @param {boolean} useResetCreateComponent.open
+ * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
+ * @param {number} useResetCreateComponent.initialStep
+ * @param {number} useResetCreateComponent.totalSteps
+ * @param {string} useResetCreateComponent.componentName
+ */
+export var useResetCreateComponent = function useResetCreateComponent(_ref) {
+  var firstIncludedStep = _ref.firstIncludedStep,
+    previousState = _ref.previousState,
+    open = _ref.open,
+    setCurrentStep = _ref.setCurrentStep,
+    stepData = _ref.stepData,
+    initialStep = _ref.initialStep,
+    totalSteps = _ref.totalSteps,
+    componentName = _ref.componentName;
+  useEffect(function () {
+    if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
+      if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
+        var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+      } else {
+        // default should be fist includedStep instead of just 1
+        setCurrentStep(firstIncludedStep);
+      }
+
+      // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
+      if (initialStep && totalSteps && Number(initialStep) > Number(totalSteps) || Number(initialStep) <= 0) {
+        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."));
+      }
+    }
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
+};

package/es/global/js/hooks/useResizeObserver.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { useRef, useState, useLayoutEffect } from 'react';
+export var useResizeObserver = function useResizeObserver(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    callback: null,
+    throttleInterval: 0
+  };
+  var callback = options.callback,
+    throttleInterval = options.throttleInterval;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  var throttleTimeout = useRef(null);
+  var entriesToHandle = useRef(null);
+  useLayoutEffect(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) {
+      return;
+    }
+    var doCallbacks = function doCallbacks() {
+      if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
+        return;
+      }
+      var entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      throttleTimeout.current = null;
+      callback && callback(entry.contentRect);
+    };
+    var observer = new ResizeObserver(function (entries) {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+      if (throttleInterval) {
+        // if a throttleInterval check for running timeout
+        if (throttleTimeout.current === null) {
+          // no live timeout set entries to handle and move on
+
+          // set up throttle
+          throttleTimeout.current = setTimeout(function () {
+            // do callbacks
+            doCallbacks();
+            // reset throttle
+            throttleTimeout.current = null;
+          }, throttleInterval);
+        }
+      } else {
+        // no throttle do callbacks every time
+        doCallbacks();
+      }
+    });
+
+    // observe all refs passed
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+      observer = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, options]);
+  return {
+    width: width,
+    height: height
+  };
+};

package/es/global/js/hooks/useRetrieveStepData.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Copyright IBM Corp. 2022, 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 { useEffect } from 'react';
+
+/**
+ * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
+ * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * @param {object} useResetCreateComponent
+ * @param {object} useResetCreateComponent.stepsContext
+ * @param {number} useResetCreateComponent.stepNumber
+ * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.shouldIncludeStep
+ * @param {string} useResetCreateComponent.secondaryLabel
+ * @param {string} useResetCreateComponent.title
+ */
+export var useRetrieveStepData = function useRetrieveStepData(_ref) {
+  var stepsContext = _ref.stepsContext,
+    stepNumber = _ref.stepNumber,
+    introStep = _ref.introStep,
+    shouldIncludeStep = _ref.shouldIncludeStep,
+    secondaryLabel = _ref.secondaryLabel,
+    title = _ref.title;
+  useEffect(function () {
+    if (stepsContext) {
+      stepsContext.setStepData(function (prev) {
+        var stepItem = {
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep,
+          shouldIncludeStep: shouldIncludeStep
+        };
+        var previousItem = prev[stepNumber - 1];
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+          var clone = _toConsumableArray(prev);
+          clone[stepNumber - 1] = stepItem;
+          return clone;
+        }
+        return prev;
+      });
+    }
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+};

package/es/global/js/hooks/useValidCreateStepCount.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { useEffect } from 'react';
+
+/**
+ * Logs a warning to console if an invalid number of steps are used with the given CreateComponent
+ * @param {number} stepCount
+ * @param {string} componentName
+ */
+export var useValidCreateStepCount = function useValidCreateStepCount(stepCount, componentName) {
+  useEffect(function () {
+    if (stepCount === 1) {
+      console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
+    }
+  }, [stepCount, componentName]);
+};