@carbon/ibm-products 1.5.0 → 1.6.0

package/es/components/SidePanel/SidePanel.js

@@ -89,8 +89,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var sidePanelInnerRef = useRef();
   var sidePanelCloseRef = useRef();
   var previousState = usePreviousValue({
-    size: size
-  }); // scroll panel to top going between steps
+    size: size,
+    open: open
+  });
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  }; // scroll panel to top going between steps
 
   useEffect(function () {
     var panelRef = ref || sidePanelRef;
@@ -169,7 +173,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   useEffect(function () {
-    if (open && animateTitle && animationComplete && title && title.length) {
+    if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
       var _document$querySelect2, _document$querySelect3, _document$querySelect4;
 
       var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
@@ -261,7 +265,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-container-height"), "".concat(_sidePanelSubtitleElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size]); // click outside functionality if `includeOverlay` prop is set
+  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
 
   useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -287,7 +291,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref]); // initialize the side panel to open
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
 
   useEffect(function () {
     if (open) {
@@ -297,14 +301,21 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
-      onUnmount && onUnmount();
+      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
       setRender(false);
     }
 
     setAnimationComplete(true);
-  }; // initializes the side panel to open
+  }; // Set the internal state `animationComplete` to true if
+  // prefers reduced motion is true
 
 
+  useEffect(function () {
+    if (reducedMotion.matches) {
+      setAnimationComplete(true);
+    }
+  }, [reducedMotion.matches]); // initializes the side panel to open
+
   var _onAnimationStart = function onAnimationStart(event) {
     event.persist();
     var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
@@ -325,7 +336,13 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = 0;
       }
     }
-  }, [open, placement, selectorPageContent, slideIn]); // used to set margins of content for slide in panel version
+  }, [open, placement, selectorPageContent, slideIn]);
+  useEffect(function () {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+      setRender(false);
+      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    }
+  }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
 
   useEffect(function () {
     if (shouldRender && slideIn) {
@@ -333,15 +350,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginRight = 0;
-        pageContentElement.style.transition = "margin-right ".concat(moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(moderate02) : null;
         pageContentElement.style.marginRight = SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = "margin-left ".concat(moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(moderate02) : null;
         pageContentElement.style.marginLeft = SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, shouldRender, size]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -368,7 +385,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _cx, _cx2;
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _cx))
+      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
     }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -426,7 +443,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), animateTitle && title && title.length && /*#__PURE__*/React.createElement("h2", {
+    }, title), animateTitle && title && title.length && !reducedMotion.matches && /*#__PURE__*/React.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -443,7 +460,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
     style: {
-      animation: "".concat(open ? placement === 'right' ? "sidePanelEntranceRight ".concat(moderate02) : "sidePanelEntranceLeft ".concat(moderate02) : placement === 'right' ? "sidePanelExitRight ".concat(moderate02) : "sidePanelExitLeft ".concat(moderate02))
+      animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(moderate02) : "side-panel-entrance-left ".concat(moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(moderate02) : "side-panel-exit-left ".concat(moderate02)) : null
     },
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: function onAnimationStart(event) {
@@ -476,7 +493,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: sidePanelOverlayRef,
     className: "".concat(blockClass, "__overlay"),
     style: {
-      animation: "".concat(open ? "sidePanelOverlayEntrance ".concat(moderate02) : "sidePanelOverlayExit ".concat(moderate02))
+      animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(moderate02) : "side-panel-overlay-exit ".concat(moderate02)) : null
     }
   }));
 }); // Return a placeholder if not released and not enabled by feature flag

package/es/components/WebTerminal/WebTerminal.js

@@ -63,7 +63,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cx([blockClass, (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "--open"), open), _defineProperty(_ref2, "".concat(blockClass, "--closed"), !open), _defineProperty(_ref2, className, className), _ref2)]),
     style: {
-      animation: "".concat(open ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
+      animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React.createElement("header", {

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/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,7 +31,13 @@ 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", "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); }
 
@@ -37,8 +45,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var componentName = 'AddSelect';
 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,
@@ -49,70 +58,72 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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,
       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 _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      multiSelection = _useState6[0],
+      setMultiSelection = _useState6[1];
 
-  var onSearchHandler = function onSearchHandler(e) {
-    var value = e.target.value;
-    setSearchTerm(value);
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      searchTerm = _useState8[0],
+      setSearchTerm = _useState8[1]; // handlers
 
-    if (onSearchFilter) {
-      onSearchFilter(value);
-    }
-  }; // data manipulation
 
-
-  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.label.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")
@@ -121,46 +132,76 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     labelText: "temp label",
     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,
+    multiSelection: multiSelection,
+    noSelectionDescription: noSelectionDescription,
+    noSelectionTitle: noSelectionTitle
+  };
+  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({
+    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     label: _propTypes.default.string,
-    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+    value: _propTypes.default.string
   })),
   itemsLabel: _propTypes.default.string,
   multi: _propTypes.default.bool,
@@ -168,7 +209,11 @@ 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,
   title: _propTypes.default.string
 };

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.label);
+  }));
+};
+
+exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
+AddSelectBreadcrumbs.propTypes = {
+  itemsLabel: _propTypes.default.string,
+  path: _propTypes.default.array,
+  setPath: _propTypes.default.func
+};
+AddSelectBreadcrumbs.displayName = componentName;

package/lib/components/AddSelect/AddSelectList.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectList = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 componentName = 'AddSelectList';
+
+var AddSelectList = function AddSelectList(_ref) {
+  var filteredItems = _ref.filteredItems,
+      multi = _ref.multi,
+      multiSelection = _ref.multiSelection,
+      path = _ref.path,
+      setMultiSelection = _ref.setMultiSelection,
+      setPath = _ref.setPath,
+      setSingleSelection = _ref.setSingleSelection,
+      singleSelection = _ref.singleSelection;
+  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
+
+  var handleSingleSelection = function handleSingleSelection(value) {
+    setSingleSelection(value);
+  };
+
+  var handleMultiSelection = function handleMultiSelection(value, checked) {
+    if (checked) {
+      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [value]);
+      setMultiSelection(newValues);
+    } else {
+      var _newValues = multiSelection.filter(function (v) {
+        return v !== value;
+      });
+
+      setMultiSelection(_newValues);
+    }
+  };
+
+  var onNavigateItem = function onNavigateItem(_ref2) {
+    var id = _ref2.id,
+        label = _ref2.label;
+    setPath([].concat((0, _toConsumableArray2.default)(path), [{
+      id: id,
+      label: label
+    }]));
+  };
+
+  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) {
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
+      key: item.id
+    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, null, /*#__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.value, value);
+      },
+      labelText: item.label,
+      id: item.id,
+      checked: multiSelection.includes(item.value)
+    }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+      className: "".concat(blockClass, "-radio"),
+      name: "add-select-selections",
+      id: item.id,
+      value: item.value,
+      labelText: item.label,
+      onChange: handleSingleSelection,
+      selected: item.value === singleSelection
+    }), item.children && /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight16, {
+      onClick: function onClick() {
+        return onNavigateItem(item);
+      }
+    }))));
+  }))));
+};
+
+exports.AddSelectList = AddSelectList;
+AddSelectList.propTypes = {
+  filteredItems: _propTypes.default.array,
+  multi: _propTypes.default.bool,
+  multiSelection: _propTypes.default.array,
+  path: _propTypes.default.array,
+  setMultiSelection: _propTypes.default.func,
+  setPath: _propTypes.default.func,
+  setSingleSelection: _propTypes.default.func,
+  singleSelection: _propTypes.default.string
+};
+AddSelectList.displayName = componentName;

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectSidebar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 componentName = 'AddSelectSidebar';
+
+var AddSelectSidebar = function AddSelectSidebar(_ref) {
+  var influencerTitle = _ref.influencerTitle,
+      multiSelection = _ref.multiSelection,
+      noSelectionDescription = _ref.noSelectionDescription,
+      noSelectionTitle = _ref.noSelectionTitle;
+  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__influencer");
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-header")
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "-title")
+  }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+    type: "gray",
+    size: "sm"
+  }, multiSelection.length)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-body")
+  }, multiSelection.length > 0 ? multiSelection.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("p", {
+      key: item
+    }, item);
+  }) : /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
+    subtitle: noSelectionDescription,
+    title: noSelectionTitle,
+    size: "sm"
+  })));
+};
+
+exports.AddSelectSidebar = AddSelectSidebar;
+AddSelectSidebar.propTypes = {
+  influencerTitle: _propTypes.default.string,
+  multiSelection: _propTypes.default.array,
+  noSelectionDescription: _propTypes.default.string,
+  noSelectionTitle: _propTypes.default.string
+};
+AddSelectSidebar.displayName = componentName;