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

package/lib/components/ActionBar/ActionBar.js

@@ -27,7 +27,7 @@ var _settings = require("../../settings");
 
 var _reactResizeDetector = require("react-resize-detector");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
@@ -239,8 +239,8 @@ ActionBar.displayName = componentName;
 ActionBar.propTypes = {
   /**
    * Specifies the action bar items. Each item is specified as an object
-   * with required fields: key for array rendering, renderIcon and
-   * iconDescription to provide the icon to display,
+   * with required fields: key for array rendering, renderIcon, iconDescription and
+   * label to provide the icon to display,
    * and optional 'onClick' to receive notifications when the button is clicked.
    * Additional fields in the object will be passed to the
    * Button component, and these can include 'disabled', 'ref', 'className',
@@ -252,13 +252,14 @@ ActionBar.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Button.propTypes, [// props not desired from Button.propTypes
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Button.propTypes, [// props not desired from Button.propTypes
   'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
     // Additional props
     key: _propTypes.default.string.isRequired,
     // Redefine as form different  to Button and a key prop used by ActionBarItems
     iconDescription: _propTypes.default.string.isRequired,
-    renderIcon: _carbonComponentsReact.Button.propTypes.renderIcon.isRequired,
+    label: _propTypes.default.string.isRequired,
+    renderIcon: _react2.Button.propTypes.renderIcon.isRequired,
     // We duplicate onClick here to improve DocGen in Storybook
     onClick: _propTypes.default.func
   }))),

package/lib/components/ActionBar/ActionBarItem.js

@@ -19,9 +19,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
-var _excluded = ["className"];
+var _excluded = ["label", "className", "renderIcon"];
 
 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,27 +36,29 @@ var blockClass = "".concat(_settings.pkg.prefix, "--action-bar-item"); // NOTE:
  */
 
 var ActionBarItem = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
+  var label = _ref.label,
+      className = _ref.className,
+      renderIcon = _ref.renderIcon,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, _objectSpread(_objectSpread({}, rest), {}, {
+  var Icon = renderIcon;
+  return /*#__PURE__*/_react.default.createElement(_react2.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
     className: (0, _classnames.default)(blockClass, className),
-    hasIconOnly: true,
     kind: 'ghost',
-    size: 'field',
-    tooltipPosition: 'bottom',
-    tooltipAlignment: 'end',
-    type: 'button'
-  }));
+    size: 'md',
+    align: 'bottom-right',
+    type: 'button',
+    label: label
+  }), Icon ? /*#__PURE__*/_react.default.createElement(Icon, null) : null);
 }); // Return a placeholder if not released and not enabled by feature flag
 
 
 exports.ActionBarItem = ActionBarItem;
 exports.ActionBarItem = ActionBarItem = _settings.pkg.checkComponentEnabled(ActionBarItem, componentName); // Props the user cannot change
 
-var reservedProps = ['hasIconOnly', 'kind', 'size', 'tooltipPosition', 'tooltipAlignment', 'type']; // Base props on Carbon Button
+var reservedProps = ['kind', 'size', 'align', 'type']; // Base props on Carbon Button
 
-var propTypes = _objectSpread({}, _carbonComponentsReact.Button.propTypes); // Remove reserved props
+var propTypes = _objectSpread({}, _react2.IconButton.propTypes); // Remove reserved props
 
 
 reservedProps.forEach(function (prop) {
@@ -84,7 +86,7 @@ ActionBarItem.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
    *
    * (inherited from Carbon Button)
    */
-  iconDescription: _propTypes.default.string,
+  label: _propTypes.default.string,
 
   /**
    * Optional click handler

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
@@ -44,7 +44,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
       overflowItems = _ref.overflowItems,
       overflowAriaLabel = _ref.overflowAriaLabel;
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+  return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     ariaLabel: overflowAriaLabel,
     className: (0, _classnames.default)(blockClass, className),
     direction: "bottom",
@@ -56,7 +56,8 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+    var ItemIcon = item.props.renderIcon;
+    return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
       itemText: /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
@@ -64,7 +65,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item.props.iconDescription), /*#__PURE__*/_react.default.createElement(item.props.renderIcon, null))
+      }, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/_react.default.createElement(ItemIcon, null) : item.props.renderIcon)
     });
   }));
 };

package/lib/components/ActionSet/ActionSet.js

@@ -23,7 +23,7 @@ var _settings = require("../../settings");
 
 var _propsHelper = require("../../global/js/utils/props-helper");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _excluded = ["className", "disabled", "kind", "label", "loading"],
     _excluded2 = ["actions", "buttonSize", "className", "size"];
@@ -42,17 +42,17 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       label = _ref.label,
       loading = _ref.loading,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+  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')]),
     disabled: disabled || loading || false,
     kind: kind,
     ref: ref
-  }), label, loading && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineLoading, null));
+  }), label, loading && /*#__PURE__*/_react.default.createElement(_react2.InlineLoading, null));
 });
 
 ActionSetButton.displayName = 'ActionSetButton';
-ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsReact.Button.PropTypes), {}, {
+ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _react2.Button.PropTypes), {}, {
   kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
   label: _propTypes.default.string,
   loading: _propTypes.default.bool
@@ -60,7 +60,7 @@ ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsRea
 var defaultKind = 'primary';
 
 var willStack = function willStack(size, numberOfActions) {
-  return size === 'xs' || size === 'sm' || size === 'md' && numberOfActions > 2;
+  return size === 'sm' || size === 'md' && numberOfActions > 2;
 }; // Default values for props
 
 
@@ -69,7 +69,7 @@ var defaults = {
 };
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
- * of prop values and applying some layout rules. When the size is 'xs' or 'sm'
+ * of prop values and applying some layout rules. When the size is 'sm'
  * the buttons are stacked, and should only include primary and secondary
  * kinds. When the size is 'md' the buttons are stacked if there are three or
  * more. When the size is 'md' or 'lg', two buttons share the horizontal space.
@@ -89,7 +89,7 @@ var ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
       _ref3$size = _ref3.size,
       size = _ref3$size === void 0 ? defaults.size : _ref3$size,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-  var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || []; // We stack the buttons in a xs/sm set, or if there are three or more in a md set.
+  var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || []; // We stack the buttons in a sm set, or if there are three or more in a md set.
 
   var stacking = willStack(size, buttons.length); // Order of button kinds: ghost first, then danger--ghost, then most other types,
   // then danger, and finally primary
@@ -110,7 +110,7 @@ var ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
   buttons.sort(function (action1, action2) {
     return (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1);
   });
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--stacking"), stacking), _cx), "".concat(blockClass, "--").concat(size)),
     ref: ref,
     role: "presentation",
@@ -128,7 +128,7 @@ exports.ActionSet = ActionSet;
 ActionSet.displayName = componentName;
 /**
  * A validator function to help validate the actions supplied for a particular
- * size of component. When the size is xs or sm, or md with three actions, the
+ * size of component. When the size is sm, or md with three actions, the
  * buttons will be stacked and a maximum of three buttons is applied with no
  * ghosts unless the ghost is the only button. Otherwise a maximum of four
  * buttons with a maximum of one ghost is applied. In either case, a maximum
@@ -187,12 +187,12 @@ ActionSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: (0, _propsHelper.allPropTypes)([ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  actions: (0, _propsHelper.allPropTypes)([ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here
-    onClick: _carbonComponentsReact.Button.propTypes.onClick
+    onClick: _react2.Button.propTypes.onClick
   })))]),
 
   /**
@@ -201,7 +201,7 @@ ActionSet.propTypes = {
    * the buttons will be set to this size, overriding any 'size' values (if any)
    * supplied in the actions array (if any).
    */
-  buttonSize: _carbonComponentsReact.Button.propTypes.size,
+  buttonSize: _react2.Button.propTypes.size,
 
   /**
    * An optional class or classes to be added to the outermost element.
@@ -212,5 +212,5 @@ ActionSet.propTypes = {
    * The size of the action set. Different button arrangements are used at
    * different sizes, to make best use of the available space.
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xlg', 'max'])
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
 };

package/lib/components/AddSelect/AddSelect.js

@@ -65,6 +65,7 @@ AddSelect.propTypes = {
   closeIconDescription: _propTypes.default.string.isRequired,
   columnInputPlaceholder: _propTypes.default.string,
   description: _propTypes.default.string.isRequired,
+  filterByLabel: _propTypes.default.string,
   globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string,
     label: _propTypes.default.string
@@ -88,11 +89,11 @@ AddSelect.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,
@@ -124,6 +125,7 @@ AddSelect.propTypes = {
    */
   portalTarget: _propTypes.default.node,
   searchResultsLabel: _propTypes.default.string,
+  sortByLabel: _propTypes.default.string,
   title: _propTypes.default.string.isRequired
 };
 AddSelect.defaultProps = {

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