@carbon/ibm-products 1.11.1 → 1.13.0

package/es/components/UserProfileImage/UserProfileImage.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -31,6 +31,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var backgroundColor = _ref.backgroundColor,
       className = _ref.className,
       kind = _ref.kind,
+      icon = _ref.icon,
       initials = _ref.initials,
       image = _ref.image,
       imageDescription = _ref.imageDescription,
@@ -62,18 +63,40 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
   };
 
-  var FillItem = image ? function () {
-    return /*#__PURE__*/React.createElement("img", {
-      alt: imageDescription,
-      src: image,
-      className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
-    });
-  } : initials ? formatInitials : kind && size && icons[kind][size];
+  var getFillItem = function getFillItem() {
+    if (image) {
+      return function () {
+        return /*#__PURE__*/React.createElement("img", {
+          alt: imageDescription,
+          src: image,
+          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        });
+      };
+    }
+
+    if (initials) {
+      return formatInitials;
+    }
+
+    if (kind && size) {
+      return icons[kind][size];
+    }
+
+    return icon;
+  }; // if user doesn't provide a color just generate a random one
+
+
+  var getRandomColor = function getRandomColor() {
+    var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  var FillItem = getFillItem();
 
   var renderUserProfileImage = function renderUserProfileImage() {
     return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
       ref: ref,
-      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
+      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
   };
 
@@ -97,6 +120,11 @@ UserProfileImage.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the included ones
+   */
+  icon: PropTypes.object,
+
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
@@ -107,7 +135,7 @@ UserProfileImage.propTypes = {
    */
   imageDescription: PropTypes.string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
-    return image;
+    return !!image;
   }),
 
   /**

package/lib/components/ActionBar/ActionBar.js

@@ -93,6 +93,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": false
     }, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
@@ -108,7 +110,7 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         key: "hidden-item-".concat(key),
         className: "".concat(blockClass, "__hidden-sizing-item")
       }));
-    })));
+    }))));
   }, [actions]); // creates displayed items based on actions, displayCount and alignment
 
   (0, _react.useEffect)(function () {

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -49,8 +49,10 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     className: (0, _classnames.default)(blockClass, className),
     direction: "bottom",
     flipped: true,
+    iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+    ,
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass)
-  }, _react.default.Children.map(overflowItems, function (item) {
+  }, _react.default.Children.map(overflowItems, function (item, index) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
@@ -58,10 +60,10 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
       className: "".concat(blockClass, "__item"),
       itemText: /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
-        "aria-describedby": "".concat(internalId, "--item-label")
+        "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
-        id: "".concat(internalId, "--item-label")
+        id: "".concat(internalId.current, "-").concat(index, "--item-label")
       }, item.props.iconDescription), /*#__PURE__*/_react.default.createElement(item.props.renderIcon, null))
     });
   }));

package/lib/components/AddSelect/AddSelect.js

@@ -41,7 +41,7 @@ var _AddSelectColumn = require("./AddSelectColumn");
 
 var _addSelectUtils = require("./add-select-utils");
 
-var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"];
+var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
 
 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); }
 
@@ -70,6 +70,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
       removeIconDescription = _ref.removeIconDescription,
+      searchResultsLabel = _ref.searchResultsLabel,
       textInputLabel = _ref.textInputLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -107,12 +108,13 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var _useState13 = (0, _react.useState)([]),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      sidebarItems = _useState14[0],
-      setSidebarItems = _useState14[1];
+      flatItems = _useState14[0],
+      setFlatItems = _useState14[1];
 
   (0, _react.useEffect)(function () {
-    var entries = items.entries;
-    setSidebarItems((0, _addSelectUtils.flatten)(entries)); // multi select with nested data needs to be normalized
+    var entries = items.entries; // flatItems is just a single array of all entries including children
+
+    setFlatItems((0, _addSelectUtils.flatten)(entries)); // multi select with nested data needs to be normalized
 
     if (multi && entries.find(function (entry) {
       return entry.children;
@@ -191,10 +193,25 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return item.title.toLowerCase().includes(searchTerm);
     });
     return results;
+  };
+
+  var getDisplayItems = function getDisplayItems() {
+    if (useNormalizedItems) {
+      // when global search is in use the results are not in column format
+      if (searchTerm) {
+        return flatItems.filter(function (item) {
+          return item.title.toLowerCase().includes(searchTerm);
+        });
+      }
+
+      return getPages();
+    }
+
+    return getFilteredItems();
   }; // only multi select with hierarchy requires the the normalized items
 
 
-  var itemsToDisplay = useNormalizedItems ? getPages() : getFilteredItems();
+  var itemsToDisplay = getDisplayItems();
   var commonListProps = {
     multi: multi,
     multiSelection: multiSelection,
@@ -231,14 +248,41 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
   var sidebarProps = {
     influencerTitle: influencerTitle,
-    items: sidebarItems,
+    items: flatItems,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
     noSelectionTitle: noSelectionTitle,
     removeIconDescription: removeIconDescription,
     setMultiSelection: setMultiSelection
   };
-  var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx)); // main content
+  var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
+
+  var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
+    if (searchTerm) {
+      return false;
+    }
+
+    if (path.length) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var setShowTags = function setShowTags() {
+    if (searchTerm) {
+      return true;
+    }
+
+    if (useNormalizedItems) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var showBreadsCrumbs = setShowBreadsCrumbs();
+  var showTags = setShowTags(); // main content
 
   var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header")
@@ -250,16 +294,16 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onChange: handleSearch
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
-  }, path.length ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
+  }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
     itemsLabel: itemsLabel,
     path: path,
     setPath: setPath
   }) : /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__tag-container-label")
-  }, itemsLabel), !useNormalizedItems && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
     size: "sm"
-  }, itemsToDisplay.length))), useNormalizedItems ? /*#__PURE__*/_react.default.createElement("div", {
+  }, itemsToDisplay.length))), useNormalizedItems && !searchTerm ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, itemsToDisplay.map(function (page, idx) {
     var _path;
@@ -271,7 +315,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       columnInputPlaceholder: columnInputPlaceholder
     }));
   })) : /*#__PURE__*/_react.default.createElement("div", null, itemsToDisplay.length > 0 ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
-    filteredItems: itemsToDisplay
+    filteredItems: itemsToDisplay,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers
   })) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
@@ -295,6 +340,11 @@ AddSelect.propTypes = {
   influencerTitle: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.shape({
+    modifiers: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      options: _propTypes.default.array,
+      property: _propTypes.default.string
+    }),
     sortBy: _propTypes.default.array,
     filterBy: _propTypes.default.array,
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -317,6 +367,7 @@ AddSelect.propTypes = {
   onSubmitButtonText: _propTypes.default.string,
   open: _propTypes.default.bool,
   removeIconDescription: _propTypes.default.string,
+  searchResultsLabel: _propTypes.default.string,
   textInputLabel: _propTypes.default.string,
   title: _propTypes.default.string
 };

package/lib/components/AddSelect/AddSelectColumn.js

@@ -238,7 +238,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       size: "sm"
     }, colItems.length))
   })), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
-    inColumn: true,
     filteredItems: colItems,
     setMultiSelection: setMultiSelection,
     multiSelection: multiSelection

package/lib/components/AddSelect/AddSelectList.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectList = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,6 +19,10 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _UserProfileImage = require("../UserProfileImage");
+
 var _settings = require("../../settings");
 
 //
@@ -29,7 +35,7 @@ var componentName = 'AddSelectList';
 
 var AddSelectList = function AddSelectList(_ref) {
   var filteredItems = _ref.filteredItems,
-      inColumn = _ref.inColumn,
+      modifiers = _ref.modifiers,
       multi = _ref.multi,
       multiSelection = _ref.multiSelection,
       path = _ref.path,
@@ -113,32 +119,75 @@ var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
+  var isSelected = function isSelected(id) {
+    return multiSelection.includes(id);
+  };
+
+  var getAvatarProps = function getAvatarProps(_ref3) {
+    var src = _ref3.src,
+        alt = _ref3.alt,
+        icon = _ref3.icon,
+        backgroundColor = _ref3.backgroundColor;
+    return {
+      className: "".concat(blockClass, "-cell-avatar"),
+      size: 'lg',
+      theme: 'light',
+      image: src,
+      imageDescription: alt,
+      icon: icon,
+      backgroundColor: backgroundColor
+    };
+  };
+
+  var getItemIcon = function getItemIcon(_ref4) {
+    var Icon = _ref4.icon;
+    return /*#__PURE__*/_react.default.createElement(Icon, null);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
+    var _modifiers$options;
+
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
       key: item.id,
-      className: "".concat(blockClass, "-row")
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
-      className: "".concat(blockClass, "-checkbox"),
+    }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox")
+    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       onChange: function onChange(checked) {
         return handleMultiSelection(item.id, checked);
       },
-      labelText: !inColumn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(blockClass, "-cell-title")
-      }, item.title), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(blockClass, "-cell-subtitle")
-      }, item.subtitle)) : item.title,
+      labelText: item.title,
       id: item.id,
-      checked: multiSelection.includes(item.id)
-    }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+      checked: isSelected(item.id),
+      className: "".concat(blockClass, "-checkbox-wrapper")
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-wrapper")
+    }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-cell-icon")
+    }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-text")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "-cell-title")
+    }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "-cell-subtitle")
+    }, item.subtitle)))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
+      id: "".concat(item.id, "-modifier"),
+      type: "inline",
+      items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,
+      light: true,
+      label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
+      disabled: !isSelected(item.id),
+      className: "".concat(blockClass, "-dropdown")
+    })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
@@ -157,7 +206,7 @@ var AddSelectList = function AddSelectList(_ref) {
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   filteredItems: _propTypes.default.array,
-  inColumn: _propTypes.default.bool,
+  modifiers: _propTypes.default.object,
   multi: _propTypes.default.bool,
   multiSelection: _propTypes.default.array,
   path: _propTypes.default.array,

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectSidebar = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -19,12 +21,7 @@ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState")
 
 var _settings = require("../../settings");
 
-//
-// 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.
-//
+var _excluded = ["icon", "avatar"];
 var componentName = 'AddSelectSidebar';
 
 var AddSelectSidebar = function AddSelectSidebar(_ref) {
@@ -44,11 +41,18 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     setMultiSelection(newSelections);
   };
 
-  var sidebarItems = multiSelection.map(function (selectedId) {
-    return items.find(function (item) {
-      return item.id === selectedId;
-    });
-  });
+  var sidebarItems = multiSelection.reduce(function (acc, cur) {
+    var selectedItem = items.find(function (item) {
+      return item.id === cur;
+    }); // certain properties should not be displayed in the sidebar
+    // eslint-disable-next-line no-unused-vars
+
+    var icon = selectedItem.icon,
+        avatar = selectedItem.avatar,
+        newItem = (0, _objectWithoutProperties2.default)(selectedItem, _excluded);
+    acc.push(newItem);
+    return acc;
+  }, []);
 
   var getTitle = function getTitle(_ref2) {
     var title = _ref2.title,

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -93,6 +93,8 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
+      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      ,
       renderIcon: _iconsReact.OverflowMenuHorizontal32,
       className: "".concat(blockClass, "__overflow-menu"),
       menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -81,23 +81,23 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
     title: title
-  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  }); // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
 
   (0, _react.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 ? void 0 : stepsContext.setOnNext(onNext);
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
+  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
   (0, _react.useEffect)(function () {
     setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
+  }, [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.
 
   (0, _react.useEffect)(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
   return stepsContext ? /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -83,24 +83,24 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
     title: title
-  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  }); // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
 
   (0, _react.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 ? void 0 : stepsContext.setOnNext(onNext);
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
+  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
 
   (0, _react.useEffect)(function () {
     setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
+  }, [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.
 
   (0, _react.useEffect)(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
   return stepsContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {