@carbon/ibm-products 1.11.0 → 1.12.0

package/es/components/UserProfileImage/UserProfileImage.js

@@ -107,7 +107,7 @@ UserProfileImage.propTypes = {
    */
   imageDescription: PropTypes.string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
-    return image;
+    return !!image;
   }),
 
   /**

package/es/components/index.js

@@ -18,7 +18,6 @@ export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
-export { LoadingBar } from './LoadingBar';
 export { ModifiedTabs } from './ModifiedTabs';
 export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';

package/es/global/js/package-settings.js

@@ -40,6 +40,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -54,14 +55,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false

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

@@ -31,7 +31,7 @@ var _AddSelectList = require("./AddSelectList");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
-var _excluded = ["columnInputPlaceholder", "filteredItems", "header"];
+var _excluded = ["columnInputPlaceholder", "filteredItems", "header", "multiSelection", "setMultiSelection"];
 
 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); }
 
@@ -45,30 +45,43 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
       filteredItems = _ref.filteredItems,
       header = _ref.header,
+      multiSelection = _ref.multiSelection,
+      setMultiSelection = _ref.setMultiSelection,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
+      allSelected = _useState2[0],
+      setAllSelected = _useState2[1];
 
   var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sortDirection = _useState4[0],
-      setSortDirection = _useState4[1];
+      searchTerm = _useState4[0],
+      setSearchTerm = _useState4[1];
 
   var _useState5 = (0, _react.useState)(''),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      sortAttribute = _useState6[0],
-      setSortAttribute = _useState6[1];
+      sortDirection = _useState6[0],
+      setSortDirection = _useState6[1];
 
-  var _useState7 = (0, _react.useState)([]),
+  var _useState7 = (0, _react.useState)(''),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      filters = _useState8[0],
-      setFilters = _useState8[1];
+      sortAttribute = _useState8[0],
+      setSortAttribute = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      filters = _useState10[0],
+      setFilters = _useState10[1];
 
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
-  var colClass = "".concat(blockClass, "__column"); // sorting
+  var colClass = "".concat(blockClass, "__column");
+  (0, _react.useEffect)(function () {
+    var isAllSelected = filteredItems.every(function (item) {
+      return multiSelection.includes(item.id);
+    });
+    setAllSelected(isAllSelected);
+  }, [filteredItems, multiSelection]); // sorting
 
   var colSortBy = (_filteredItems$find = filteredItems.find(function (item) {
     return item.sortBy;
@@ -102,6 +115,21 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection(direction);
   };
 
+  var selectAllHandler = function selectAllHandler(checked) {
+    var itemIds = filteredItems.map(function (item) {
+      return item.id;
+    });
+
+    if (checked) {
+      setMultiSelection([].concat((0, _toConsumableArray2.default)(multiSelection), (0, _toConsumableArray2.default)(itemIds)));
+    } else {
+      var newItems = multiSelection.filter(function (i) {
+        return !itemIds.includes(i);
+      });
+      setMultiSelection(newItems);
+    }
+  };
+
   var filterHandler = function filterHandler(checked, opt) {
     if (checked) {
       var newFilters = [].concat((0, _toConsumableArray2.default)(filters), [opt]);
@@ -199,14 +227,20 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     })));
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
-    type: "gray",
-    size: "sm"
-  }, colItems.length)), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
-    inColumn: true,
-    filteredItems: colItems
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    id: "".concat((0, _uuidv.default)(), "-select-all"),
+    checked: allSelected,
+    onChange: selectAllHandler,
+    labelText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__tag-container-label")
+    }, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+      type: "gray",
+      size: "sm"
+    }, colItems.length))
+  })), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
+    filteredItems: colItems,
+    setMultiSelection: setMultiSelection,
+    multiSelection: multiSelection
   })));
 };
 
@@ -214,6 +248,8 @@ exports.AddSelectColumn = AddSelectColumn;
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: _propTypes.default.string,
   filteredItems: _propTypes.default.array,
-  header: _propTypes.default.string
+  header: _propTypes.default.string,
+  multiSelection: _propTypes.default.array,
+  setMultiSelection: _propTypes.default.func
 };
 AddSelectColumn.displayName = componentName;

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,8 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _settings = require("../../settings");
 
 //
@@ -29,7 +33,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,
@@ -43,13 +47,13 @@ var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(value, checked) {
+  var handleMultiSelection = function handleMultiSelection(id, checked) {
     if (checked) {
-      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [value]);
+      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
       setMultiSelection(newValues);
     } else {
       var _newValues = multiSelection.filter(function (v) {
-        return v !== value;
+        return v !== id;
       });
 
       setMultiSelection(_newValues);
@@ -113,32 +117,50 @@ var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
+  var isSelected = function isSelected(id) {
+    return multiSelection.includes(id);
+  };
+
   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"),
-      onChange: function onChange(value) {
-        return handleMultiSelection(item.id, value);
+    }, 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-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 +179,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

@@ -70,7 +70,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
         return handleItemRemove(id);
       },
       kind: "ghost",
-      className: "".concat(blockClass, "-item-remove-button")
+      className: "".concat(blockClass, "-item-remove-button"),
+      size: "sm"
     }));
   };
 

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -21,14 +21,15 @@ var _settings = require("../../settings");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _excluded = ["children", "className", "iconDescription", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--button-menu");
 var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
 var defaults = {
-  size: 'default'
+  size: 'default',
+  kind: 'primary'
 };
 /**
  * Combining a standard button with an overflow menu, this component appears
@@ -42,6 +43,8 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       iconDescription = _ref.iconDescription,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
@@ -55,7 +58,7 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--primary"), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
+        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
@@ -93,6 +96,11 @@ ButtonMenu.propTypes = {
    */
   iconDescription: _carbonComponentsReact.Button.propTypes.iconDescription,
 
+  /**
+   * The three types the menu button supports: primary, tertiary and ghost.
+   */
+  kind: _propTypes.default.oneOf(['primary', 'tertiary', 'ghost']),
+
   /**
    * The button label for the menu trigger.
    */

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, {