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

package/es/components/AddSelect/AddSelectBody.js

@@ -2,14 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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) { _defineProperty(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; }
+
 //
-// 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.
 //
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tag } from '@carbon/react';
@@ -28,7 +33,7 @@ import usePath from './hooks/usePath';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select");
 var componentName = 'AddSelectBody';
-export var AddSelectBody = function AddSelectBody(_ref) {
+export var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cx, _path$;
 
   var className = _ref.className,
@@ -39,6 +44,7 @@ export 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,
@@ -46,6 +52,7 @@ export 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,
@@ -64,8 +71,7 @@ export 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 = _objectWithoutProperties(_ref, _excluded);
@@ -114,9 +120,28 @@ export var AddSelectBody = function AddSelectBody(_ref) {
   var _usePath = usePath(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 onCloseHandler = function onCloseHandler() {
+    resetState();
+    onClose();
+  };
 
-  var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
+  var tearsheetClassnames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0; // handlers
 
@@ -141,6 +166,8 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     } else {
       onSubmit(singleSelection);
     }
+
+    onCloseHandler();
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -175,6 +202,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
   var showSort = (searchTerm || globalFiltersApplied) && hasResults;
   var showTags = setShowTags();
   var commonListProps = {
+    displayMetalPanel: displayMetalPanel,
     metaIconDescription: metaIconDescription,
     multi: multi,
     multiSelection: multiSelection,
@@ -187,28 +215,31 @@ export 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,
@@ -229,6 +260,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     handleSearch: handleSearch,
     multi: multi,
     filterOpts: globalFilterOpts,
+    filtersLabel: globalFiltersLabel,
     handleFilter: handleFilter,
     primaryButtonText: globalFiltersPrimaryButtonText,
     secondaryButtonText: globalFiltersSecondaryButtonText,
@@ -238,15 +270,16 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     hasFiltersApplied: globalFiltersApplied,
     clearFiltersText: clearFiltersText
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__sub-header")
+    className: cx("".concat(blockClass, "__sub-header"), _defineProperty({}, "".concat(blockClass, "__sub-header-multi"), multi))
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, showBreadsCrumbs ? /*#__PURE__*/React.createElement(AddSelectBreadcrumbs, {
     path: path,
-    onClick: pathOnclick
+    onClick: pathOnclick,
+    multi: multi
   }) : /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/React.createElement(Tag, {
+    className: "".concat(blockClass, "__tags-label")
+  }, searchTerm ? searchResultsTitle : itemsLabel), showTags && /*#__PURE__*/React.createElement(Tag, {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/React.createElement(AddSelectSort, {
@@ -255,8 +288,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: globalSortBy,
-    sortByLabel: sortByLabel
+    sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, commonListProps, {
@@ -276,13 +308,19 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
     subtitle: noResultsDescription,
-    title: noResultsTitle
+    title: noResultsTitle,
+    illustrationTheme: illustrationTheme
   }))));
-  return /*#__PURE__*/React.createElement("div", rest, multi ? /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
-    influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
-    influencerPosition: "right"
-  }), body) : /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body));
-};
+
+  if (multi) {
+    return /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
+      influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
+      influencerPosition: "right"
+    }), body);
+  }
+
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body);
+});
 AddSelectBody.propTypes = {
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
@@ -293,12 +331,14 @@ AddSelectBody.propTypes = {
   filterByLabel: PropTypes.string,
   globalFilterOpts: PropTypes.array,
   globalFiltersIconDescription: PropTypes.string,
+  globalFiltersLabel: PropTypes.string,
   globalFiltersPlaceholderText: PropTypes.string,
   globalFiltersPrimaryButtonText: PropTypes.string,
   globalFiltersSecondaryButtonText: PropTypes.string,
   globalSearchLabel: PropTypes.string.isRequired,
   globalSearchPlaceholder: PropTypes.string,
   globalSortBy: PropTypes.array,
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
@@ -311,11 +351,12 @@ AddSelectBody.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
       avatar: PropTypes.shape({
         alt: PropTypes.string,
-        icon: PropTypes.func,
-        src: PropTypes.string
+        icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+        src: PropTypes.string,
+        theme: PropTypes.oneOf(['light', 'dark'])
       }),
       children: PropTypes.object,
-      icon: PropTypes.func,
+      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
       id: PropTypes.string.isRequired,
       meta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string,
@@ -343,7 +384,7 @@ AddSelectBody.propTypes = {
   onSubmitButtonText: PropTypes.string,
   open: PropTypes.bool,
   portalTarget: PropTypes.node,
-  searchResultsLabel: PropTypes.string,
+  searchResultsTitle: PropTypes.string,
   sortByLabel: PropTypes.string,
   title: PropTypes.string,
   useNormalizedItems: PropTypes.bool

package/es/components/AddSelect/AddSelectBreadcrumbs.js

@@ -1,5 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 //
-// 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.
@@ -7,17 +8,23 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--add-select__breadcrumbs");
 var componentName = 'AddSelectBreadcrumbs';
 export 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 = cx(blockClass, _defineProperty({}, "".concat(blockClass, "-multi"), multi));
   return /*#__PURE__*/React.createElement(Breadcrumb, {
-    noTrailingSlash: true
+    noTrailingSlash: true,
+    className: classNames
   }, path.map(function (entry, idx) {
     var isCurrentPage = idx === path.length - 1;
     return /*#__PURE__*/React.createElement(BreadcrumbItem, {
@@ -30,6 +37,7 @@ export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
   }));
 };
 AddSelectBreadcrumbs.propTypes = {
+  multi: PropTypes.bool,
   onClick: PropTypes.func,
   path: PropTypes.array
 };

package/es/components/AddSelect/AddSelectColumn.js

@@ -4,15 +4,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
 //
-// 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.
 //
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, Tag, OverflowMenu, Checkbox, usePrefix } from '@carbon/react';
-import { Filter } from '@carbon/icons-react';
+import { Search, Tag, OverflowMenu, Checkbox, usePrefix } from '@carbon/react';
+import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 import { AddSelectList } from './AddSelectList';
 import { AddSelectSort } from './AddSelectSort';
@@ -165,16 +165,16 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     className: colClass
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(Search, {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    light: true,
     placeholder: columnInputPlaceholder,
     className: "".concat(colClass, "-input"),
     id: uuidv4(),
-    labelText: columnInputPlaceholder
+    labelText: columnInputPlaceholder,
+    size: "md"
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(colClass, "-sort-filter")
   }, /*#__PURE__*/React.createElement(AddSelectSort, {
@@ -211,14 +211,14 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       }) ? true : false
     })));
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: "".concat(uuidv4(), "-select-all"),
     className: "".concat(colClass, "__select-all"),
     checked: allSelected,
     onChange: selectAllHandler,
     labelText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__tag-container-label")
+      className: "".concat(blockClass, "__tag-label")
     }, header), /*#__PURE__*/React.createElement(Tag, {
       type: "gray",
       size: "sm"

package/es/components/AddSelect/AddSelectFilter.js

@@ -7,16 +7,16 @@ 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) { _defineProperty(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; }
 
 //
-// 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.
 //
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, TextInput, Tag } from '@carbon/react';
+import { Button, ButtonSet, Dropdown, Search, Tag } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Filter } from '@carbon/icons-react';
+import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
 var componentName = 'AddSelectFilter';
@@ -24,6 +24,7 @@ export 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,
@@ -94,8 +95,8 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    id: "temp-id",
+  }, /*#__PURE__*/React.createElement(Search, {
+    id: "add-select-global-search-filter",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
@@ -113,12 +114,13 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "md"
+    size: "lg",
+    tooltipPosition: "left"
   }), open && /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-content")
-  }, /*#__PURE__*/React.createElement("p", null, "Filters"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", null, filtersLabel), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/React.createElement(Dropdown, {
@@ -167,6 +169,7 @@ AddSelectFilter.propTypes = {
   appliedFilters: PropTypes.object,
   clearFiltersText: PropTypes.string,
   filterOpts: PropTypes.array,
+  filtersLabel: PropTypes.string,
   handleFilter: PropTypes.func,
   handleSearch: PropTypes.func,
   hasFiltersApplied: PropTypes.bool,

package/es/components/AddSelect/AddSelectList.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
-// 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.
 //
 import React from 'react';
-import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from '@carbon/react';
-import { ChevronRight, View } from '@carbon/icons-react';
+import { Button, Checkbox, Dropdown, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody } from '@carbon/react';
+import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
@@ -20,6 +20,7 @@ export var AddSelectList = function AddSelectList(_ref) {
   var _modifiers$options;
 
   var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
       filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
@@ -39,7 +40,10 @@ export var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(id, checked) {
+  var handleMultiSelection = function handleMultiSelection(event, _ref2) {
+    var checked = _ref2.checked,
+        id = _ref2.id;
+
     if (checked) {
       var newValues = [].concat(_toConsumableArray(multiSelection), [id]);
       setMultiSelection(newValues);
@@ -52,25 +56,30 @@ export var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
-  var onNavigateItem = function onNavigateItem(_ref2) {
-    var id = _ref2.id,
-        title = _ref2.title;
+  var onNavigateItem = function onNavigateItem(_ref3) {
+    var id = _ref3.id,
+        title = _ref3.title;
     setParentSelected(id, title, parentId);
   };
 
   var isSelected = function isSelected(id) {
-    return multiSelection.includes(id);
+    if (multi) {
+      return multiSelection.includes(id);
+    }
+
+    return id === singleSelection;
   };
 
-  var getAvatarProps = function getAvatarProps(_ref3) {
-    var src = _ref3.src,
-        alt = _ref3.alt,
-        icon = _ref3.icon,
-        backgroundColor = _ref3.backgroundColor;
+  var getAvatarProps = function getAvatarProps(_ref4) {
+    var src = _ref4.src,
+        alt = _ref4.alt,
+        icon = _ref4.icon,
+        backgroundColor = _ref4.backgroundColor,
+        theme = _ref4.theme;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
-      theme: 'light',
+      theme: theme,
       image: src,
       imageDescription: alt,
       icon: icon,
@@ -78,8 +87,8 @@ export var AddSelectList = function AddSelectList(_ref) {
     };
   };
 
-  var getItemIcon = function getItemIcon(_ref4) {
-    var Icon = _ref4.icon;
+  var getItemIcon = function getItemIcon(_ref5) {
+    var Icon = _ref5.icon;
     return /*#__PURE__*/React.createElement(Icon, null);
   };
 
@@ -95,31 +104,59 @@ export var AddSelectList = function AddSelectList(_ref) {
     setAppliedModifiers(modifiersClone);
   };
 
+  var metaPanelHandler = function metaPanelHandler(item) {
+    if (item.meta) {
+      setDisplayMetaPanel(item);
+    }
+  };
+
+  var isInMetaPanel = function isInMetaPanel(id) {
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-wrapper")
+    className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
+    var _cx2;
+
     return /*#__PURE__*/React.createElement(StructuredListRow, {
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), _defineProperty({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/React.createElement(StructuredListCell, {
-      className: "".concat(blockClass, "-cell")
+      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
+      onClick: function onClick(evt) {
+        return metaPanelHandler(item, evt);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-cell"),
+      onClick: function onClick() {
+        metaPanelHandler(item);
+      },
+      onKeyDown: function onKeyDown() {
+        metaPanelHandler(item);
+      },
+      role: "button",
+      tabIndex: "0"
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
+    },
+    /*#__PURE__*/
+    // hacky way to prevent checkbox from triggering the meta onclick handler
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      onChange: function onChange(event, _ref5) {
-        var checked = _ref5.checked;
-        return handleMultiSelection(item.id, checked);
-      },
+      onChange: handleMultiSelection,
       labelText: item.title,
       id: item.id,
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
-    }), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-wrapper")
     }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-icon")
@@ -151,7 +188,7 @@ export var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange() {
         return handleSingleSelection(item.id);
       },
-      selected: item.id === singleSelection
+      checked: isSelected(item.id)
     }), item.children && /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "-view-children"),
       renderIcon: function renderIcon(props) {
@@ -181,9 +218,6 @@ export var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -191,6 +225,7 @@ export var AddSelectList = function AddSelectList(_ref) {
 };
 AddSelectList.propTypes = {
   appliedModifiers: PropTypes.array,
+  displayMetalPanel: PropTypes.object,
   filteredItems: PropTypes.array,
   metaIconDescription: PropTypes.string,
   modifiers: PropTypes.object,

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -1,7 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+//
+// 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 React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import { Close } from '@carbon/icons-react';
+import { Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select__meta-panel");

package/es/components/AddSelect/AddSelectSidebar.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["meta", "icon", "avatar"];
 //
-// 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.
@@ -20,6 +20,7 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   var appliedModifiers = _ref.appliedModifiers,
       closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
@@ -106,13 +107,15 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,
-    size: "sm"
+    size: "sm",
+    illustrationTheme: illustrationTheme
   })));
 };
 AddSelectSidebar.propTypes = {
   appliedModifiers: PropTypes.array,
   closeIconDescription: PropTypes.string,
   displayMetalPanel: PropTypes.object,
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
   items: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   metaPanelTitle: PropTypes.string,

package/es/components/AddSelect/AddSelectSort.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
-// 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.
@@ -9,7 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/icons-react';
+import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select-sort");
 var componentName = 'AddSelectSort';