@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/lib/components/AddSelect/AddSelectBody.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _Tearsheet = require("../../components/Tearsheet");
 
@@ -51,7 +51,7 @@ var _usePath2 = _interopRequireDefault(require("./hooks/usePath"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "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", "title", "useNormalizedItems"];
+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"];
 
 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); }
 
@@ -69,6 +69,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
       columnInputPlaceholder = _ref.columnInputPlaceholder,
       defaultModifiers = _ref.defaultModifiers,
       description = _ref.description,
+      filterByLabel = _ref.filterByLabel,
       globalFilterOpts = _ref.globalFilterOpts,
       globalFiltersIconDescription = _ref.globalFiltersIconDescription,
       globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
@@ -96,6 +97,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
       open = _ref.open,
       portalTarget = _ref.portalTarget,
       searchResultsLabel = _ref.searchResultsLabel,
+      sortByLabel = _ref.sortByLabel,
       title = _ref.title,
       useNormalizedItems = _ref.useNormalizedItems,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -276,7 +278,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
     onClick: pathOnclick
   }) : /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__tag-container-label")
-  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_react2.Tag, {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
@@ -285,13 +287,15 @@ var AddSelectBody = function AddSelectBody(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: globalSortBy
+    sortBy: globalSortBy,
+    sortByLabel: sortByLabel
   }))), displayColumnView ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectColumn.AddSelectColumn, (0, _extends2.default)({}, commonListProps, {
     items: itemsToDisplay,
     columnInputPlaceholder: columnInputPlaceholder,
-    header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title
+    header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title,
+    filterByLabel: filterByLabel
   }))) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
     filteredItems: itemsToDisplay,
     modifiers: items.modifiers,
@@ -321,6 +325,7 @@ AddSelectBody.propTypes = {
   columnInputPlaceholder: _propTypes.default.string,
   defaultModifiers: _propTypes.default.array,
   description: _propTypes.default.string,
+  filterByLabel: _propTypes.default.string,
   globalFilterOpts: _propTypes.default.array,
   globalFiltersIconDescription: _propTypes.default.string,
   globalFiltersPlaceholderText: _propTypes.default.string,
@@ -341,11 +346,11 @@ AddSelectBody.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.object,
+        icon: _propTypes.default.func,
         src: _propTypes.default.string
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.object,
+      icon: _propTypes.default.func,
       id: _propTypes.default.string.isRequired,
       meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
         id: _propTypes.default.string,
@@ -374,6 +379,7 @@ AddSelectBody.propTypes = {
   open: _propTypes.default.bool,
   portalTarget: _propTypes.default.node,
   searchResultsLabel: _propTypes.default.string,
+  sortByLabel: _propTypes.default.string,
   title: _propTypes.default.string,
   useNormalizedItems: _propTypes.default.bool
 };

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -9,7 +9,7 @@ exports.AddSelectBreadcrumbs = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,11 +29,11 @@ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
     onClick(idx);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, {
     noTrailingSlash: true
   }, path.map(function (entry, idx) {
     var isCurrentPage = idx === path.length - 1;
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+    return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
       key: entry.id,
       isCurrentPage: isCurrentPage,
       onClick: function onClick() {

package/lib/components/AddSelect/AddSelectColumn.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -39,7 +39,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _useParentSelect2 = _interopRequireDefault(require("./hooks/useParentSelect"));
 
-var _excluded = ["columnInputPlaceholder", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
+var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
 
 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); }
 
@@ -51,6 +51,7 @@ var componentName = 'AddSelectColumn';
 
 var AddSelectColumn = function AddSelectColumn(_ref) {
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
+      filterByLabel = _ref.filterByLabel,
       header = _ref.header,
       items = _ref.items,
       multiSelection = _ref.multiSelection,
@@ -59,6 +60,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       setMultiSelection = _ref.setMultiSelection,
       setPath = _ref.setPath,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
 
   var _useParentSelect = (0, _useParentSelect2.default)(),
       parentSelected = _useParentSelect.parentSelected,
@@ -126,7 +128,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     return item[filterBy];
   }) : [];
 
-  var selectAllHandler = function selectAllHandler(checked) {
+  var selectAllHandler = function selectAllHandler(event, _ref2) {
+    var checked = _ref2.checked;
     var itemIds = entries.map(function (item) {
       return item.id;
     });
@@ -186,7 +189,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     className: colClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
@@ -205,20 +208,26 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
     sortBy: sortBy
-  }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
-    renderIcon: _iconsReact.Filter32,
+  }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+        size: 32
+      }, props));
+    },
     className: "".concat(colClass, "-overflow"),
-    flipped: true
+    flipped: true,
+    ariaLabel: filterByLabel
   }, filterByOpts.map(function (opt) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: opt,
-      className: "".concat(_settings.carbon.prefix, "--overflow-menu-options__option")
+      className: "".concat(carbonPrefix, "--overflow-menu-options__option")
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_settings.carbon.prefix, "--overflow-menu-options__btn")
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+      className: "".concat(carbonPrefix, "--overflow-menu-options__btn")
+    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
       id: opt,
       labelText: opt,
-      onChange: function onChange(checked) {
+      onChange: function onChange(event, _ref3) {
+        var checked = _ref3.checked;
         return filterHandler(checked, opt);
       },
       checked: filters.find(function (o) {
@@ -227,14 +236,14 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     })));
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+  }, /*#__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")
-    }, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+    }, header), /*#__PURE__*/_react.default.createElement(_react2.Tag, {
       type: "gray",
       size: "sm"
     }, colItems.length))
@@ -258,6 +267,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
 exports.AddSelectColumn = AddSelectColumn;
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: _propTypes.default.string,
+  filterByLabel: _propTypes.default.string,
   header: _propTypes.default.string,
   items: _propTypes.default.object,
   multiSelection: _propTypes.default.array,

package/lib/components/AddSelect/AddSelectFilter.js

@@ -9,13 +9,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectFilter = 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 _react = _interopRequireWildcard(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -110,14 +112,18 @@ 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(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     id: "temp-id",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
     onChange: searchHandler
-  }), showFilter && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-    renderIcon: _iconsReact.Filter16,
+  }), showFilter && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     hasIconOnly: true,
     kind: "ghost",
     onClick: function onClick() {
@@ -133,7 +139,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   }, /*#__PURE__*/_react.default.createElement("p", null, "Filters"), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
       id: filterOpts.id,
       key: filterOpts.id,
       titleText: filterOpts.label,
@@ -145,14 +151,14 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
       selectedItem: getSelectedItem(filterOpts.id),
       label: placeholder
     });
-  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, {
+  }))), /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, {
     className: "".concat(blockClass, "-button-set")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "secondary",
     onClick: resetFilters,
     className: "".concat(blockClass, "-button"),
     disabled: !dirtyInput
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "primary",
     onClick: applyFilters,
     className: "".concat(blockClass, "-button"),
@@ -160,7 +166,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-applied")
   }, Object.keys(appliedFilters).map(function (filterType) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tag, {
       key: filterType,
       type: "gray",
       size: "sm",
@@ -169,7 +175,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
       },
       filter: true
     }, "".concat(filterType, ": ").concat(appliedFilters[filterType]));
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters

package/lib/components/AddSelect/AddSelectList.js

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectList = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -114,21 +116,22 @@ var AddSelectList = function AddSelectList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListBody, null, filteredItems.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_react2.StructuredListRow, {
       key: item.id,
       className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, {
+    }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListCell, {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
-      onChange: function onChange(checked) {
+    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+      onChange: function onChange(event, _ref5) {
+        var checked = _ref5.checked;
         return handleMultiSelection(item.id, checked);
       },
       labelText: item.title,
@@ -145,7 +148,7 @@ var AddSelectList = function AddSelectList(_ref) {
       className: "".concat(blockClass, "-cell-title")
     }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), hasModifiers && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
+    }, item.subtitle)))), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
       id: "add-select-modifier-".concat(item.id),
       type: "inline",
       items: modifiers.options,
@@ -154,11 +157,11 @@ var AddSelectList = function AddSelectList(_ref) {
       disabled: !isSelected(item.id),
       className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
       initialSelectedItem: item[modifiers.id],
-      onChange: function onChange(_ref5) {
-        var selectedItem = _ref5.selectedItem;
+      onChange: function onChange(_ref6) {
+        var selectedItem = _ref6.selectedItem;
         return modifierHandler(item.id, selectedItem);
       }
-    })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+    })) : /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
@@ -168,9 +171,13 @@ var AddSelectList = function AddSelectList(_ref) {
         return handleSingleSelection(item.id);
       },
       selected: item.id === singleSelection
-    }), item.children && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }), item.children && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-children"),
-      renderIcon: _iconsReact.ChevronRight16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
       iconDescription: navIconDescription,
       tooltipPosition: "left",
       tooltipAlignment: "center",
@@ -182,9 +189,13 @@ var AddSelectList = function AddSelectList(_ref) {
       size: "sm"
     }), item.meta && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-hidden-hover")
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-meta"),
-      renderIcon: _iconsReact.View16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.View, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
       iconDescription: metaIconDescription,
       tooltipPosition: "left",
       tooltipAlignment: "center",

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -9,13 +9,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectMetaPanel = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
@@ -42,9 +44,13 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     className: "".concat(blockClass, "-header")
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "-title")
-  }, title), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     className: "".concat(blockClass, "-close"),
-    renderIcon: _iconsReact.Close16,
     iconDescription: closeIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -92,13 +92,13 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     className: "".concat(blockClass, "-header")
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "-title")
-  }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+  }, influencerTitle), /*#__PURE__*/_react.default.createElement(_react2.Tag, {
     type: "gray",
     size: "sm"
-  }, multiSelection.length)), hasSelections ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
+  }, multiSelection.length)), hasSelections ? /*#__PURE__*/_react.default.createElement(_react2.Accordion, {
     align: "start"
   }, sidebarItems.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
+    return /*#__PURE__*/_react.default.createElement(_react2.AccordionItem, {
       title: getTitle(item),
       key: item.id
     }, Object.keys(item).map(function (key) {

package/lib/components/AddSelect/AddSelectSort.js

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectSort = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -31,16 +33,21 @@ var componentName = 'AddSelectSort';
 var AddSelectSort = function AddSelectSort(_ref) {
   var setSortAttribute = _ref.setSortAttribute,
       setSortDirection = _ref.setSortDirection,
-      sortBy = _ref.sortBy;
+      sortBy = _ref.sortBy,
+      sortByLabel = _ref.sortByLabel;
   var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp16, null), cur),
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp, {
+        size: 16
+      }), cur),
       direction: 'asc',
       attribute: cur
     }, {
       id: "".concat(cur, "-desc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown16, null), cur),
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown, {
+        size: 16
+      }), cur),
       direction: 'desc',
       attribute: cur
     }];
@@ -56,12 +63,17 @@ var AddSelectSort = function AddSelectSort(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
-  }, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+  }, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+        size: 32
+      }, props));
+    },
     className: "".concat(blockClass, "_overflow"),
-    renderIcon: _iconsReact.ArrowsVertical32,
-    flipped: true
+    flipped: true,
+    ariaLabel: sortByLabel
   }, sortByOpts.map(function (opt) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
       key: opt.id,
       itemText: opt.itemText,
@@ -76,6 +88,7 @@ exports.AddSelectSort = AddSelectSort;
 AddSelectSort.propTypes = {
   setSortAttribute: _propTypes.default.func,
   setSortDirection: _propTypes.default.func,
-  sortBy: _propTypes.default.array
+  sortBy: _propTypes.default.array,
+  sortByLabel: _propTypes.default.string
 };
 AddSelectSort.displayName = componentName;