@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.11

package/es/global/js/utils/motionConstants.js

@@ -0,0 +1,45 @@
+/**
+ * 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 { getBezierValues } from './getBezierValues';
+import { fast01, fast02, moderate01, moderate02, slow01, slow02 } from '@carbon/motion';
+
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+export var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(slow02) // '700ms'
+
+};
+export var EASINGS = {
+  productive: {
+    entrance: getBezierValues('entrance', 'productive'),
+    standard: getBezierValues('standard', 'productive'),
+    exit: getBezierValues('exit', 'productive')
+  },
+  expressive: {
+    entrance: getBezierValues('entrance', 'expressive'),
+    standard: getBezierValues('standard', 'expressive'),
+    exit: getBezierValues('exit', 'expressive')
+  }
+};

package/es/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+export var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};

package/es/global/js/utils/story-helper.js

@@ -29,7 +29,11 @@ export var getStoryTitle = function getStoryTitle(componentName) {
  * @returns The story id.
  */
 
-export var getStoryId = function getStoryId(componentName, scenario) {
+export var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat(sanitize(getStoryTitle(componentName)), "-").concat(sanitize(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat(sanitize(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/es/global/js/utils/uuidv4.spec.js

@@ -4,11 +4,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect(uuidv4()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -29,7 +29,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _APIKeyDownloader = require("./APIKeyDownloader");
 
@@ -128,7 +128,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var hasPreviousStep = hasSteps && currentStep !== 0;
   var copyButtonProps = {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Copy, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Copy, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -334,13 +334,13 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__messaging")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
     size: 16
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__messaging-text")
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.InformationFilled, {
     size: 16
   }), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
     apiKey: apiKey,

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -59,6 +59,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     var ItemIcon = item.props.renderIcon;
     return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
+      onClick: item.props.onClick,
       itemText: /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")

package/lib/components/ActionSet/ActionSet.js

@@ -25,7 +25,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
 
 var _react2 = require("@carbon/react");
 
-var _excluded = ["className", "disabled", "kind", "label", "loading"],
+var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpressive"],
     _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; }
@@ -36,15 +36,19 @@ var blockClass = "".concat(_settings.pkg.prefix, "--action-set");
 var componentName = 'ActionSet'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var className = _ref.className,
       disabled = _ref.disabled,
       kind = _ref.kind,
       label = _ref.label,
       loading = _ref.loading,
+      _ref$isExpressive = _ref.isExpressive,
+      isExpressive = _ref$isExpressive === void 0 ? true : _ref$isExpressive,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react2.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')]),
+    isExpressive: isExpressive,
+    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--expressive"), isExpressive), _ref2)]),
     disabled: disabled || loading || false,
     kind: kind,
     ref: ref

package/lib/components/AddSelect/AddSelect.js

@@ -21,8 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _AddSelectBody = require("./AddSelectBody");
 
-var _settings = require("../../settings");
-
 var _addSelectUtils = require("./add-select-utils");
 
 var _excluded = ["items", "globalFilters"];
@@ -31,7 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 blockClass = "".concat(_settings.pkg.prefix, "--add-select");
 var componentName = 'AddSelect';
 var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var items = _ref.items,
@@ -49,7 +46,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, modifierAttribute, item[modifierAttribute]);
   }) : [];
   return /*#__PURE__*/_react.default.createElement(_AddSelectBody.AddSelectBody, (0, _extends2.default)({}, props, {
-    className: blockClass,
     ref: ref,
     items: items,
     normalizedItems: normalizedItems,
@@ -71,12 +67,14 @@ AddSelect.propTypes = {
     label: _propTypes.default.string
   })),
   globalFiltersIconDescription: _propTypes.default.string,
+  globalFiltersLabel: _propTypes.default.string,
   globalFiltersPlaceholderText: _propTypes.default.string,
   globalFiltersPrimaryButtonText: _propTypes.default.string,
   globalFiltersSecondaryButtonText: _propTypes.default.string,
   globalSearchLabel: _propTypes.default.string.isRequired,
   globalSearchPlaceholder: _propTypes.default.string,
   globalSortBy: _propTypes.default.array,
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.shape({
     modifiers: _propTypes.default.shape({
@@ -90,7 +88,8 @@ AddSelect.propTypes = {
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
         icon: _propTypes.default.func,
-        src: _propTypes.default.string
+        src: _propTypes.default.string,
+        theme: _propTypes.default.oneOf(['light', 'dark'])
       }),
       children: _propTypes.default.object,
       icon: _propTypes.default.func,
@@ -124,7 +123,7 @@ AddSelect.propTypes = {
    * portal target for the all tags modal
    */
   portalTarget: _propTypes.default.node,
-  searchResultsLabel: _propTypes.default.string,
+  searchResultsTitle: _propTypes.default.string,
   sortByLabel: _propTypes.default.string,
   title: _propTypes.default.string.isRequired
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -51,16 +51,19 @@ var _usePath2 = _interopRequireDefault(require("./hooks/usePath"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsLabel", "sortByLabel", "title", "useNormalizedItems"];
+var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "title", "useNormalizedItems"];
 
 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; }
 
+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; }
+
+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 blockClass = "".concat(_settings.pkg.prefix, "--add-select");
 var componentName = 'AddSelectBody';
-
-var AddSelectBody = function AddSelectBody(_ref) {
+var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _cx, _path$;
 
   var className = _ref.className,
@@ -71,6 +74,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
       description = _ref.description,
       filterByLabel = _ref.filterByLabel,
       globalFilterOpts = _ref.globalFilterOpts,
+      globalFiltersLabel = _ref.globalFiltersLabel,
       globalFiltersIconDescription = _ref.globalFiltersIconDescription,
       globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
       globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
@@ -78,6 +82,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
       globalSearchLabel = _ref.globalSearchLabel,
       globalSearchPlaceholder = _ref.globalSearchPlaceholder,
       globalSortBy = _ref.globalSortBy,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       itemsLabel = _ref.itemsLabel,
@@ -96,8 +101,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
       onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
       portalTarget = _ref.portalTarget,
-      searchResultsLabel = _ref.searchResultsLabel,
-      sortByLabel = _ref.sortByLabel,
+      searchResultsTitle = _ref.searchResultsTitle,
       title = _ref.title,
       useNormalizedItems = _ref.useNormalizedItems,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -146,9 +150,28 @@ var AddSelectBody = function AddSelectBody(_ref) {
   var _usePath = (0, _usePath2.default)(itemsLabel),
       path = _usePath.path,
       setPath = _usePath.setPath,
-      pathOnclick = _usePath.pathOnclick;
+      pathOnclick = _usePath.pathOnclick,
+      resetPath = _usePath.resetPath;
+
+  var resetState = function resetState() {
+    setSingleSelection('');
+    setMultiSelection([]);
+    setSearchTerm('');
+    setAppliedGlobalFilters({});
+    setDisplayMetaPanel({});
+    setAppliedModifiers(defaultModifiers);
+    setSortAttribute('');
+    setSortDirection('');
+    setParentSelected(null);
+    resetPath();
+  };
 
-  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 onCloseHandler = function onCloseHandler() {
+    resetState();
+    onClose();
+  };
+
+  var tearsheetClassnames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0; // handlers
 
@@ -173,6 +196,8 @@ var AddSelectBody = function AddSelectBody(_ref) {
     } else {
       onSubmit(singleSelection);
     }
+
+    onCloseHandler();
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -207,6 +232,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
   var showSort = (searchTerm || globalFiltersApplied) && hasResults;
   var showTags = setShowTags();
   var commonListProps = {
+    displayMetalPanel: displayMetalPanel,
     metaIconDescription: metaIconDescription,
     multi: multi,
     multiSelection: multiSelection,
@@ -219,28 +245,31 @@ var AddSelectBody = function AddSelectBody(_ref) {
     setDisplayMetaPanel: setDisplayMetaPanel,
     parentId: path[0].id
   };
-  var commonTearsheetProps = {
-    className: classNames,
+
+  var commonTearsheetProps = _objectSpread(_objectSpread({}, rest), {}, {
+    className: tearsheetClassnames,
     open: open,
     title: title,
     description: description,
-    closeIconDescription: 'temp description',
     actions: [{
       label: onCloseButtonText,
       kind: 'secondary',
-      onClick: onClose
+      onClick: onCloseHandler
     }, {
       label: onSubmitButtonText,
       kind: 'primary',
       onClick: submitHandler,
       disabled: multi ? multiSelection.length === 0 : !singleSelection
     }],
-    portalTarget: portalTarget
-  };
+    portalTarget: portalTarget,
+    ref: ref
+  });
+
   var sidebarProps = {
     appliedModifiers: appliedModifiers,
     closeIconDescription: closeIconDescription,
     displayMetalPanel: displayMetalPanel,
+    illustrationTheme: illustrationTheme,
     influencerTitle: influencerTitle,
     items: useNormalizedItems ? normalizedItems : items.entries,
     metaPanelTitle: metaPanelTitle,
@@ -261,6 +290,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
     handleSearch: handleSearch,
     multi: multi,
     filterOpts: globalFilterOpts,
+    filtersLabel: globalFiltersLabel,
     handleFilter: handleFilter,
     primaryButtonText: globalFiltersPrimaryButtonText,
     secondaryButtonText: globalFiltersSecondaryButtonText,
@@ -270,15 +300,16 @@ var AddSelectBody = function AddSelectBody(_ref) {
     hasFiltersApplied: globalFiltersApplied,
     clearFiltersText: clearFiltersText
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__sub-header")
+    className: (0, _classnames.default)("".concat(blockClass, "__sub-header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__sub-header-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
     path: path,
-    onClick: pathOnclick
+    onClick: pathOnclick,
+    multi: multi
   }) : /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_react2.Tag, {
+    className: "".concat(blockClass, "__tags-label")
+  }, searchTerm ? searchResultsTitle : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_react2.Tag, {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
@@ -287,8 +318,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: globalSortBy,
-    sortByLabel: sortByLabel
+    sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectColumn.AddSelectColumn, (0, _extends2.default)({}, commonListProps, {
@@ -308,15 +338,19 @@ var AddSelectBody = function AddSelectBody(_ref) {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
     subtitle: noResultsDescription,
-    title: noResultsTitle
+    title: noResultsTitle,
+    illustrationTheme: illustrationTheme
   }))));
 
-  return /*#__PURE__*/_react.default.createElement("div", rest, multi ? /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
-    influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
-    influencerPosition: "right"
-  }), body) : /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, commonTearsheetProps, body));
-};
+  if (multi) {
+    return /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
+      influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
+      influencerPosition: "right"
+    }), body);
+  }
 
+  return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, commonTearsheetProps, body);
+});
 exports.AddSelectBody = AddSelectBody;
 AddSelectBody.propTypes = {
   className: _propTypes.default.string,
@@ -328,12 +362,14 @@ AddSelectBody.propTypes = {
   filterByLabel: _propTypes.default.string,
   globalFilterOpts: _propTypes.default.array,
   globalFiltersIconDescription: _propTypes.default.string,
+  globalFiltersLabel: _propTypes.default.string,
   globalFiltersPlaceholderText: _propTypes.default.string,
   globalFiltersPrimaryButtonText: _propTypes.default.string,
   globalFiltersSecondaryButtonText: _propTypes.default.string,
   globalSearchLabel: _propTypes.default.string.isRequired,
   globalSearchPlaceholder: _propTypes.default.string,
   globalSortBy: _propTypes.default.array,
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.shape({
     modifiers: _propTypes.default.shape({
@@ -346,11 +382,12 @@ AddSelectBody.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.func,
-        src: _propTypes.default.string
+        icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+        src: _propTypes.default.string,
+        theme: _propTypes.default.oneOf(['light', 'dark'])
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.func,
+      icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
       id: _propTypes.default.string.isRequired,
       meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
         id: _propTypes.default.string,
@@ -378,7 +415,7 @@ AddSelectBody.propTypes = {
   onSubmitButtonText: _propTypes.default.string,
   open: _propTypes.default.bool,
   portalTarget: _propTypes.default.node,
-  searchResultsLabel: _propTypes.default.string,
+  searchResultsTitle: _propTypes.default.string,
   sortByLabel: _propTypes.default.string,
   title: _propTypes.default.string,
   useNormalizedItems: _propTypes.default.bool

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -7,30 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectBreadcrumbs = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
 //
-// Copyright IBM Corp. 2022
+// 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.
 //
+var blockClass = "".concat(_settings.pkg.prefix, "--add-select__breadcrumbs");
 var componentName = 'AddSelectBreadcrumbs';
 
 var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
-  var path = _ref.path,
-      onClick = _ref.onClick;
+  var multi = _ref.multi,
+      onClick = _ref.onClick,
+      path = _ref.path;
 
   var clickHandler = function clickHandler(idx) {
     onClick(idx);
   };
 
+  var classNames = (0, _classnames.default)(blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "-multi"), multi));
   return /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, {
-    noTrailingSlash: true
+    noTrailingSlash: true,
+    className: classNames
   }, path.map(function (entry, idx) {
     var isCurrentPage = idx === path.length - 1;
     return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
@@ -45,6 +55,7 @@ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
 
 exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
 AddSelectBreadcrumbs.propTypes = {
+  multi: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   path: _propTypes.default.array
 };

package/lib/components/AddSelect/AddSelectColumn.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../settings");
 
@@ -189,16 +189,16 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     className: colClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    light: true,
     placeholder: columnInputPlaceholder,
     className: "".concat(colClass, "-input"),
     id: (0, _uuidv.default)(),
-    labelText: columnInputPlaceholder
+    labelText: columnInputPlaceholder,
+    size: "md"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-sort-filter")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
@@ -210,7 +210,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     sortBy: sortBy
   }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
         size: 32
       }, props));
     },
@@ -235,14 +235,14 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       }) ? true : false
     })));
   })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
     id: "".concat((0, _uuidv.default)(), "-select-all"),
     className: "".concat(colClass, "__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")
+      className: "".concat(blockClass, "__tag-label")
     }, header), /*#__PURE__*/_react.default.createElement(_react2.Tag, {
       type: "gray",
       size: "sm"

package/lib/components/AddSelect/AddSelectFilter.js

@@ -23,7 +23,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../settings");
 
@@ -42,6 +42,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   var appliedFilters = _ref.appliedFilters,
       clearFiltersText = _ref.clearFiltersText,
       filterOpts = _ref.filterOpts,
+      filtersLabel = _ref.filtersLabel,
       handleFilter = _ref.handleFilter,
       handleSearch = _ref.handleSearch,
       hasFiltersApplied = _ref.hasFiltersApplied,
@@ -112,15 +113,15 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
-    id: "temp-id",
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
+    id: "add-select-global-search-filter",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
     onChange: searchHandler
   }), showFilter && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -131,12 +132,13 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "md"
+    size: "lg",
+    tooltipPosition: "left"
   }), open && /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-content")
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Filters"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, filtersLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
@@ -187,6 +189,7 @@ AddSelectFilter.propTypes = {
   appliedFilters: _propTypes.default.object,
   clearFiltersText: _propTypes.default.string,
   filterOpts: _propTypes.default.array,
+  filtersLabel: _propTypes.default.string,
   handleFilter: _propTypes.default.func,
   handleSearch: _propTypes.default.func,
   hasFiltersApplied: _propTypes.default.bool,