@carbon/ibm-products 1.5.0 → 1.8.0

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

@@ -4,6 +4,7 @@
  * 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';

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

@@ -0,0 +1,27 @@
+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/package-settings.js

@@ -63,7 +63,8 @@ var defaults = {
     EditSidePanel: false,
     OptionsTile: false,
     CancelableTextEdit: false,
-    InlineEdit: false
+    InlineEdit: false,
+    DataSpreadsheet: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/es/global/js/utils/Wrap.js

@@ -25,6 +25,11 @@ var isEmpty = function isEmpty(children) {
     }
   });
   return result;
+}; // Default values for props
+
+
+var defaults = {
+  element: 'div'
 };
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other
@@ -37,11 +42,11 @@ var isEmpty = function isEmpty(children) {
  * remain undefined if it does not render.
  */
 
-
 export var Wrap = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var alwaysRender = _ref.alwaysRender,
       children = _ref.children,
-      Wrapper = _ref.element,
+      _ref$element = _ref.element,
+      Wrapper = _ref$element === void 0 ? defaults.element : _ref$element,
       neverRender = _ref.neverRender,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -79,7 +84,4 @@ Wrap.propTypes = {
    * content will be rendered.
    */
   neverRender: PropTypes.bool
-};
-Wrap.defaultProps = {
-  element: 'div'
 };

package/es/global/js/utils/getScrollbarWidth.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+export var getScrollbarWidth = function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+  document.body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+};

package/es/settings.js

@@ -1,5 +1,4 @@
 import { Canary } from './components/_Canary';
-import featureFlags from './generated/feature-flags/feature-flags';
 import pkgSettings from './global/js/package-settings';
 import { settings as carbonSettings } from 'carbon-components';
 import React from 'react';
@@ -13,10 +12,6 @@ export var carbon = {
     carbonSettings.prefix = val;
   },
 
-  get flags() {
-    return featureFlags;
-  },
-
   get themes() {
     return themes;
   }

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -51,18 +51,25 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var componentName = 'APIKeyModal';
+var componentName = 'APIKeyModal'; // Default values for props
+
+var defaults = {
+  apiKeyName: '',
+  customSteps: Object.freeze([])
+};
 var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var apiKey = _ref.apiKey,
       apiKeyLabel = _ref.apiKeyLabel,
-      apiKeyName = _ref.apiKeyName,
+      _ref$apiKeyName = _ref.apiKeyName,
+      apiKeyName = _ref$apiKeyName === void 0 ? defaults.apiKeyName : _ref$apiKeyName,
       body = _ref.body,
       className = _ref.className,
       closeButtonText = _ref.closeButtonText,
       copyButtonText = _ref.copyButtonText,
       copyErrorText = _ref.copyErrorText,
       copyIconDescription = _ref.copyIconDescription,
-      customSteps = _ref.customSteps,
+      _ref$customSteps = _ref.customSteps,
+      customSteps = _ref$customSteps === void 0 ? defaults.customSteps : _ref$customSteps,
       downloadBodyText = _ref.downloadBodyText,
       downloadFileName = _ref.downloadFileName,
       downloadFileType = _ref.downloadFileType,
@@ -602,14 +609,4 @@ APIKeyModal.propTypes = {
    */
   showAPIKeyLabel: _propTypes.default.string
 };
-APIKeyModal.defaultProps = {
-  apiKeyName: '',
-  customSteps: [],
-  error: false,
-  hasAPIKeyVisibilityToggle: false,
-  hasDownloadLink: false,
-  loading: false,
-  nameRequired: false,
-  open: false
-};
 APIKeyModal.displayName = componentName;

package/lib/components/ActionBar/ActionBar.js

@@ -291,7 +291,4 @@ ActionBar.propTypes = {
    * align tags to right of available space
    */
   rightAlign: _propTypes.default.bool
-};
-ActionBar.defaultProps = {
-  rightAlign: false
 };

package/lib/components/ActionBar/ActionBarItem.js

@@ -56,14 +56,11 @@ exports.ActionBarItem = ActionBarItem = _settings.pkg.checkComponentEnabled(Acti
 
 var reservedProps = ['hasIconOnly', 'kind', 'size', 'tooltipPosition', 'tooltipAlignment', 'type']; // Base props on Carbon Button
 
-var propTypes = _objectSpread({}, _carbonComponentsReact.Button.propTypes);
-
-var defaultProps = _objectSpread({}, _carbonComponentsReact.Button.defaultProps); // Remove reserved props
+var propTypes = _objectSpread({}, _carbonComponentsReact.Button.propTypes); // Remove reserved props
 
 
 reservedProps.forEach(function (prop) {
   delete propTypes[prop];
-  delete defaultProps[prop];
 });
 ActionBarItem.displayName = componentName;
 ActionBarItem.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
@@ -103,5 +100,4 @@ ActionBarItem.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
    * (inherited from Carbon Button)
    */
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-});
-ActionBarItem.defaultProps = _objectSpread({}, defaultProps);
+});

package/lib/components/ActionSet/ActionSet.js

@@ -25,7 +25,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _excluded = ["className", "disabled", "kind", "label", "loading", "onClick", "size"],
+var _excluded = ["className", "disabled", "kind", "label", "loading"],
     _excluded2 = ["actions", "buttonSize", "className", "size"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -41,17 +41,13 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       kind = _ref.kind,
       label = _ref.label,
       loading = _ref.loading,
-      onClick = _ref.onClick,
-      size = _ref.size,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
     isExpressive: true,
     className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost')]),
     disabled: disabled || loading || false,
     kind: kind,
-    onClick: onClick,
-    ref: ref,
-    size: size
+    ref: ref
   }), label, loading && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineLoading, null));
 });
 
@@ -61,10 +57,15 @@ ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsRea
   label: _propTypes.default.string,
   loading: _propTypes.default.bool
 });
-var defaultKind = _carbonComponentsReact.Button.defaultProps.kind;
+var defaultKind = 'primary';
 
 var willStack = function willStack(size, numberOfActions) {
   return size === 'xs' || size === 'sm' || size === 'md' && numberOfActions > 2;
+}; // Default values for props
+
+
+var defaults = {
+  size: 'md'
 };
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
@@ -79,14 +80,14 @@ var willStack = function willStack(size, numberOfActions) {
  * right.
  */
 
-
 var ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
   var _actions$slice, _cx;
 
   var actions = _ref3.actions,
       buttonSize = _ref3.buttonSize,
       className = _ref3.className,
-      size = _ref3.size,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? defaults.size : _ref3$size,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || []; // We stack the buttons in a xs/sm set, or if there are three or more in a md set.
 
@@ -147,7 +148,7 @@ ActionSet.validateActions = function (sizeFn) {
     var problems = [];
 
     if (actions > 0) {
-      var size = sizeFn ? sizeFn(props) : props.size;
+      var size = sizeFn ? sizeFn(props) : props.size || defaults.size;
       var stacking = willStack(size, actions);
 
       var countActions = function countActions(kind) {
@@ -211,7 +212,4 @@ ActionSet.propTypes = {
    * different sizes, to make best use of the available space.
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xlg', 'max'])
-};
-ActionSet.defaultProps = {
-  size: 'md'
 };

package/lib/components/AddSelect/AddSelect.js

@@ -11,6 +11,8 @@ exports.AddSelect = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -29,138 +31,187 @@ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState")
 
 var _settings = require("../../settings");
 
-var _excluded = ["actions", "className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onSearchFilter", "open", "title"];
+var _AddSelectSidebar = require("./AddSelectSidebar");
+
+var _AddSelectBreadcrumbs = require("./AddSelectBreadcrumbs");
+
+var _AddSelectList = require("./AddSelectList");
+
+var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var componentName = 'AddSelect';
+var componentName = 'AddSelect'; // Default values for props
+
+var defaults = {
+  items: Object.freeze([])
+};
 var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var actions = _ref.actions,
-      className = _ref.className,
+  var _cx;
+
+  var className = _ref.className,
       description = _ref.description,
       influencerTitle = _ref.influencerTitle,
       inputPlaceholder = _ref.inputPlaceholder,
-      items = _ref.items,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? defaults.items : _ref$items,
       itemsLabel = _ref.itemsLabel,
       multi = _ref.multi,
       noResultsDescription = _ref.noResultsDescription,
       noResultsTitle = _ref.noResultsTitle,
       noSelectionDescription = _ref.noSelectionDescription,
       noSelectionTitle = _ref.noSelectionTitle,
+      onClose = _ref.onClose,
+      onCloseButtonText = _ref.onCloseButtonText,
       onSearchFilter = _ref.onSearchFilter,
+      onSubmit = _ref.onSubmit,
+      onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
+      removeIconDescription = _ref.removeIconDescription,
+      textInputLabel = _ref.textInputLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
-  var commonTearsheetProps = {
-    open: open,
-    title: title,
-    actions: actions,
-    description: description,
-    closeIconDescription: 'temp description'
-  }; // hooks
+  var blockClass = "".concat(_settings.pkg.prefix, "--add-select"); // hooks
 
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-      selected = _useState2[0];
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      path = _useState2[0],
+      setPath = _useState2[1];
 
   var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      searchTerm = _useState4[0],
-      setSearchTerm = _useState4[1]; // handlers
-
+      singleSelection = _useState4[0],
+      setSingleSelection = _useState4[1];
 
-  var onSearchHandler = function onSearchHandler(e) {
-    var value = e.target.value;
-    setSearchTerm(value);
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      multiSelection = _useState6[0],
+      setMultiSelection = _useState6[1];
 
-    if (onSearchFilter) {
-      onSearchFilter(value);
-    }
-  }; // data manipulation
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      searchTerm = _useState8[0],
+      setSearchTerm = _useState8[1]; // handlers
 
 
-  var getFilteredItems = function getFilteredItems() {
-    // if the user uses their own filter then they provide the filtered items
-    if (onSearchFilter) {
-      return items;
-    } // by default, just filter results by their label from a single search term
+  var handleSearch = function handleSearch(e) {
+    setSearchTerm(e.target.value);
+  }; // item filtering
 
 
-    return items.filter(function (i) {
-      return i.label.includes(searchTerm);
+  var getFilteredItems = function getFilteredItems() {
+    var hasPath = path.length > 0;
+    /**
+     * how to traverse the levels of items-
+     * the path represents the ids of each level / item / breadcrumb
+     * using this path we can drill down into the items until we get to the last one the user selected
+     */
+
+    var itemsToFilter = hasPath ? path.reduce(function (prev, cur) {
+      return prev.find(function (item) {
+        return item.id === cur.id;
+      }).children;
+    }, items) : items;
+    var results = itemsToFilter.filter(function (item) {
+      if (!searchTerm) {
+        return item;
+      } // if user provides their own filter function use that
+
+
+      if (onSearchFilter) {
+        return onSearchFilter(item, searchTerm);
+      } // otherwise use the default label filter
+
+
+      return item.title.toLowerCase().includes(searchTerm);
     });
+    return results;
   };
 
-  var filteredResults = getFilteredItems(); // sidebar
-
-  var influencer = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__influencer")
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__influencer-header")
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__influencer-title")
-  }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
-    type: "gray",
-    size: "sm"
-  }, selected)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__influencer-body")
-  }, selected > 0 ? /*#__PURE__*/_react.default.createElement("p", null, "content") : /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
-    subtitle: noSelectionDescription,
-    title: noSelectionTitle,
-    size: "sm"
-  }))); // main content
-
+  var filteredItems = getFilteredItems(); // main content
 
   var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     id: "temp-id",
-    labelText: "temp label",
+    labelText: textInputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
-    onChange: onSearchHandler
+    onChange: handleSearch
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__items-label-container")
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, path.length ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
+    itemsLabel: itemsLabel,
+    path: path,
+    setPath: setPath
+  }) : /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__items-label")
   }, itemsLabel), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
-    size: "sm"
-  }, filteredResults.length))), filteredResults.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
-    selection: true,
-    className: "".concat(blockClass, "__selections")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredResults.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
-      key: item.id
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, null, /*#__PURE__*/_react.default.createElement("p", null, item.label)));
-  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    size: "sm",
+    className: "".concat(blockClass, "__items-label-tag")
+  }, filteredItems.length))), filteredItems.length > 0 ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, {
+    filteredItems: filteredItems,
+    multi: multi,
+    multiSelection: multiSelection,
+    path: path,
+    setMultiSelection: setMultiSelection,
+    setPath: setPath,
+    setSingleSelection: setSingleSelection,
+    singleSelection: singleSelection
+  }) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
     subtitle: noResultsDescription,
     title: noResultsTitle
   })));
 
+  var commonTearsheetProps = {
+    open: open,
+    title: title,
+    description: description,
+    closeIconDescription: 'temp description',
+    actions: [{
+      label: onCloseButtonText,
+      kind: 'secondary',
+      onClick: onClose
+    }, {
+      label: onSubmitButtonText,
+      kind: 'primary',
+      onClick: onSubmit,
+      disabled: multi ? multiSelection.length === 0 : !singleSelection
+    }]
+  };
+  var sidebarProps = {
+    influencerTitle: influencerTitle,
+    items: items,
+    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));
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: ref,
-    className: (0, _classnames.default)(className, blockClass)
+    className: classNames
   }, rest), multi ? /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
-    influencer: multi && influencer,
+    influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
     influencerPosition: "right"
   }), body) : /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, commonTearsheetProps, body));
 });
 exports.AddSelect = AddSelect;
 AddSelect.propTypes = {
-  actions: _propTypes.default.array,
   className: _propTypes.default.string,
   description: _propTypes.default.string,
   influencerTitle: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+    id: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired
   })),
   itemsLabel: _propTypes.default.string,
   multi: _propTypes.default.bool,
@@ -168,11 +219,14 @@ AddSelect.propTypes = {
   noResultsTitle: _propTypes.default.string,
   noSelectionDescription: _propTypes.default.string,
   noSelectionTitle: _propTypes.default.string,
+  onClose: _propTypes.default.func,
+  onCloseButtonText: _propTypes.default.string,
   onSearchFilter: _propTypes.default.func,
+  onSubmit: _propTypes.default.func,
+  onSubmitButtonText: _propTypes.default.string,
   open: _propTypes.default.bool,
+  removeIconDescription: _propTypes.default.string,
+  textInputLabel: _propTypes.default.string,
   title: _propTypes.default.string
 };
-AddSelect.defaultProps = {
-  items: []
-};
 AddSelect.displayName = componentName;

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectBreadcrumbs = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+//
+// 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 componentName = 'AddSelectBreadcrumbs';
+
+var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
+  var itemsLabel = _ref.itemsLabel,
+      path = _ref.path,
+      setPath = _ref.setPath;
+
+  var clickHandler = function clickHandler(id) {
+    var newPath = (0, _toConsumableArray2.default)(path);
+    var pathIdx = newPath.findIndex(function (entry) {
+      return entry.id === id;
+    });
+    var finalPath = newPath.splice(0, pathIdx + 1);
+    setPath(finalPath);
+  };
+
+  var resetPath = function resetPath() {
+    setPath([]);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, {
+    noTrailingSlash: true
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+    onClick: resetPath
+  }, itemsLabel), path.map(function (entry, idx, arr) {
+    var isCurrentPage = idx === arr.length - 1;
+
+    var crumbHandler = function crumbHandler() {
+      if (!isCurrentPage) {
+        clickHandler(entry.id);
+      }
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+      key: entry.id,
+      isCurrentPage: isCurrentPage,
+      onClick: crumbHandler
+    }, entry.title);
+  }));
+};
+
+exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
+AddSelectBreadcrumbs.propTypes = {
+  itemsLabel: _propTypes.default.string,
+  path: _propTypes.default.array,
+  setPath: _propTypes.default.func
+};
+AddSelectBreadcrumbs.displayName = componentName;