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

package/es/components/ActionBar/ActionBarItem.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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; }
 
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { IconButton } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'ActionBarItem';
 var blockClass = "".concat(pkg.prefix, "--action-bar-item"); // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -29,26 +29,28 @@ var blockClass = "".concat(pkg.prefix, "--action-bar-item"); // NOTE: the compon
  */
 
 export var ActionBarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
+  var label = _ref.label,
+      className = _ref.className,
+      renderIcon = _ref.renderIcon,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, _objectSpread(_objectSpread({}, rest), {}, {
+  var Icon = renderIcon;
+  return /*#__PURE__*/React.createElement(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
     className: cx(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.createElement(Icon, null) : null);
 }); // Return a placeholder if not released and not enabled by feature flag
 
 ActionBarItem = 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({}, Button.propTypes); // Remove reserved props
+var propTypes = _objectSpread({}, IconButton.propTypes); // Remove reserved props
 
 
 reservedProps.forEach(function (prop) {
@@ -76,7 +78,7 @@ ActionBarItem.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
    *
    * (inherited from Carbon Button)
    */
-  iconDescription: PropTypes.string,
+  label: PropTypes.string,
 
   /**
    * Optional click handler

package/es/components/ActionBar/ActionBarOverflowItems.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react'; // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames'; // Carbon and package components we use.
 
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import uuidv4 from '../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 import { pkg } from '../../settings';
@@ -34,6 +34,7 @@ export 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
+    var ItemIcon = item.props.renderIcon;
     return /*#__PURE__*/React.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
       itemText: /*#__PURE__*/React.createElement("div", {
@@ -42,7 +43,7 @@ export var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item.props.iconDescription), /*#__PURE__*/React.createElement(item.props.renderIcon, null))
+      }, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React.createElement(ItemIcon, null) : item.props.renderIcon)
     });
   }));
 };

package/es/components/ActionSet/ActionSet.js

@@ -22,7 +22,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings';
 import { allPropTypes } from '../../global/js/utils/props-helper'; // Carbon and package components we use.
 
-import { Button, ButtonSet, InlineLoading } from 'carbon-components-react';
+import { Button, ButtonSet, InlineLoading } from '@carbon/react';
 var blockClass = "".concat(pkg.prefix, "--action-set");
 var componentName = 'ActionSet'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -51,7 +51,7 @@ ActionSetButton.propTypes = _objectSpread(_objectSpread({}, Button.PropTypes), {
 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
 
 
@@ -60,7 +60,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.
@@ -81,7 +81,7 @@ export var ActionSet = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       size = _ref3$size === void 0 ? defaults.size : _ref3$size,
       rest = _objectWithoutProperties(_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
@@ -118,7 +118,7 @@ export var ActionSet = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 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
@@ -202,5 +202,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.oneOf(['xs', 'sm', 'md', 'lg', 'xlg', 'max'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
 };

package/es/components/AddSelect/AddSelect.js

@@ -47,6 +47,7 @@ AddSelect.propTypes = {
   closeIconDescription: PropTypes.string.isRequired,
   columnInputPlaceholder: PropTypes.string,
   description: PropTypes.string.isRequired,
+  filterByLabel: PropTypes.string,
   globalFilters: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string
@@ -70,11 +71,11 @@ AddSelect.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
       avatar: PropTypes.shape({
         alt: PropTypes.string,
-        icon: PropTypes.object,
+        icon: PropTypes.func,
         src: PropTypes.string
       }),
       children: PropTypes.object,
-      icon: PropTypes.object,
+      icon: PropTypes.func,
       id: PropTypes.string.isRequired,
       meta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string,
@@ -106,6 +107,7 @@ AddSelect.propTypes = {
    */
   portalTarget: PropTypes.node,
   searchResultsLabel: PropTypes.string,
+  sortByLabel: PropTypes.string,
   title: PropTypes.string.isRequired
 };
 AddSelect.defaultProps = {

package/es/components/AddSelect/AddSelectBody.js

@@ -2,7 +2,7 @@ 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", "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"];
 //
 // Copyright IBM Corp. 2022
 //
@@ -12,7 +12,7 @@ var _excluded = ["className", "clearFiltersText", "closeIconDescription", "colum
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Tag } from 'carbon-components-react';
+import { Tag } from '@carbon/react';
 import { Tearsheet, TearsheetNarrow } from '../../components/Tearsheet';
 import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
 import { AddSelectSidebar } from './AddSelectSidebar';
@@ -37,6 +37,7 @@ export 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,
@@ -64,6 +65,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
       open = _ref.open,
       portalTarget = _ref.portalTarget,
       searchResultsLabel = _ref.searchResultsLabel,
+      sortByLabel = _ref.sortByLabel,
       title = _ref.title,
       useNormalizedItems = _ref.useNormalizedItems,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -253,13 +255,15 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: globalSortBy
+    sortBy: globalSortBy,
+    sortByLabel: sortByLabel
   }))), displayColumnView ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, 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.createElement("div", null, hasResults ? /*#__PURE__*/React.createElement(AddSelectList, _extends({}, commonListProps, {
     filteredItems: itemsToDisplay,
     modifiers: items.modifiers,
@@ -286,6 +290,7 @@ AddSelectBody.propTypes = {
   columnInputPlaceholder: PropTypes.string,
   defaultModifiers: PropTypes.array,
   description: PropTypes.string,
+  filterByLabel: PropTypes.string,
   globalFilterOpts: PropTypes.array,
   globalFiltersIconDescription: PropTypes.string,
   globalFiltersPlaceholderText: PropTypes.string,
@@ -306,11 +311,11 @@ AddSelectBody.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
       avatar: PropTypes.shape({
         alt: PropTypes.string,
-        icon: PropTypes.object,
+        icon: PropTypes.func,
         src: PropTypes.string
       }),
       children: PropTypes.object,
-      icon: PropTypes.object,
+      icon: PropTypes.func,
       id: PropTypes.string.isRequired,
       meta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string,
@@ -339,6 +344,7 @@ AddSelectBody.propTypes = {
   open: PropTypes.bool,
   portalTarget: PropTypes.node,
   searchResultsLabel: PropTypes.string,
+  sortByLabel: PropTypes.string,
   title: PropTypes.string,
   useNormalizedItems: PropTypes.bool
 };

package/es/components/AddSelect/AddSelectBreadcrumbs.js

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
+import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
 import PropTypes from 'prop-types';
 var componentName = 'AddSelectBreadcrumbs';
 export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {

package/es/components/AddSelect/AddSelectColumn.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["columnInputPlaceholder", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
+var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
 //
 // Copyright IBM Corp. 2022
 //
@@ -11,9 +11,9 @@ var _excluded = ["columnInputPlaceholder", "header", "items", "multiSelection",
 //
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, Tag, OverflowMenu, Checkbox } from 'carbon-components-react';
-import { Filter32 } from '@carbon/icons-react';
-import { pkg, carbon } from '../../settings';
+import { TextInput, Tag, OverflowMenu, Checkbox, usePrefix } from '@carbon/react';
+import { Filter } from '@carbon/icons-react';
+import { pkg } from '../../settings';
 import { AddSelectList } from './AddSelectList';
 import { AddSelectSort } from './AddSelectSort';
 import { sortItems } from './add-select-utils';
@@ -25,6 +25,7 @@ var colClass = "".concat(blockClass, "__column");
 var componentName = 'AddSelectColumn';
 export var AddSelectColumn = function AddSelectColumn(_ref) {
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
+      filterByLabel = _ref.filterByLabel,
       header = _ref.header,
       items = _ref.items,
       multiSelection = _ref.multiSelection,
@@ -34,6 +35,8 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       setPath = _ref.setPath,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var carbonPrefix = usePrefix();
+
   var _useParentSelect = useParentSelect(),
       parentSelected = _useParentSelect.parentSelected,
       setParentSelected = _useParentSelect.setParentSelected;
@@ -100,7 +103,8 @@ export 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;
     });
@@ -181,19 +185,25 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     sortDirection: sortDirection,
     sortBy: sortBy
   }), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
-    renderIcon: Filter32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Filter, _extends({
+        size: 32
+      }, props));
+    },
     className: "".concat(colClass, "-overflow"),
-    flipped: true
+    flipped: true,
+    ariaLabel: filterByLabel
   }, filterByOpts.map(function (opt) {
     return /*#__PURE__*/React.createElement("div", {
       key: opt,
-      className: "".concat(carbon.prefix, "--overflow-menu-options__option")
+      className: "".concat(carbonPrefix, "--overflow-menu-options__option")
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(carbon.prefix, "--overflow-menu-options__btn")
+      className: "".concat(carbonPrefix, "--overflow-menu-options__btn")
     }, /*#__PURE__*/React.createElement(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) {
@@ -231,6 +241,7 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
 };
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: PropTypes.string,
+  filterByLabel: PropTypes.string,
   header: PropTypes.string,
   items: PropTypes.object,
   multiSelection: PropTypes.array,

package/es/components/AddSelect/AddSelectFilter.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
@@ -12,10 +13,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, TextInput, Tag } from 'carbon-components-react';
+import { Button, ButtonSet, Dropdown, TextInput, Tag } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Filter16 } from '@carbon/icons-react';
+import { Filter } from '@carbon/icons-react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
 var componentName = 'AddSelectFilter';
@@ -100,7 +101,11 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     value: searchTerm,
     onChange: searchHandler
   }), showFilter && /*#__PURE__*/React.createElement(Button, {
-    renderIcon: Filter16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Filter, _extends({
+        size: 16
+      }, props));
+    },
     hasIconOnly: true,
     kind: "ghost",
     onClick: function onClick() {

package/es/components/AddSelect/AddSelectList.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
@@ -7,8 +8,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // 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-components-react';
-import { ChevronRight16, View16 } from '@carbon/icons-react';
+import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from '@carbon/react';
+import { ChevronRight, View } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
@@ -110,7 +111,8 @@ export var AddSelectList = function AddSelectList(_ref) {
     }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      onChange: function onChange(checked) {
+      onChange: function onChange(event, _ref5) {
+        var checked = _ref5.checked;
         return handleMultiSelection(item.id, checked);
       },
       labelText: item.title,
@@ -136,8 +138,8 @@ export 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.createElement(RadioButton, {
@@ -152,7 +154,11 @@ export var AddSelectList = function AddSelectList(_ref) {
       selected: item.id === singleSelection
     }), item.children && /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "-view-children"),
-      renderIcon: ChevronRight16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(ChevronRight, _extends({
+          size: 16
+        }, props));
+      },
       iconDescription: navIconDescription,
       tooltipPosition: "left",
       tooltipAlignment: "center",
@@ -166,7 +172,11 @@ export var AddSelectList = function AddSelectList(_ref) {
       className: "".concat(blockClass, "-hidden-hover")
     }, /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "-view-meta"),
-      renderIcon: View16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(View, _extends({
+          size: 16
+        }, props));
+      },
       iconDescription: metaIconDescription,
       tooltipPosition: "left",
       tooltipAlignment: "center",

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import { Close16 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Close } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select__meta-panel");
 var componentName = 'AddSelectMetaPanel';
@@ -22,8 +23,12 @@ export var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
   }, /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "-title")
   }, title), /*#__PURE__*/React.createElement(Button, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Close, _extends({
+        size: 16
+      }, props));
+    },
     className: "".concat(blockClass, "-close"),
-    renderIcon: Close16,
     iconDescription: closeIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",

package/es/components/AddSelect/AddSelectSidebar.js

@@ -7,7 +7,7 @@ var _excluded = ["meta", "icon", "avatar"];
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Tag, Accordion, AccordionItem } from 'carbon-components-react';
+import { Tag, Accordion, AccordionItem } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
 import { pkg } from '../../settings';

package/es/components/AddSelect/AddSelectSort.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
 // Copyright IBM Corp. 2022
@@ -7,24 +8,29 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
 import React from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
-import { ArrowsVertical32, ArrowUp16, ArrowDown16 } from '@carbon/icons-react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/icons-react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select-sort");
 var componentName = 'AddSelectSort';
 export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowUp16, null), cur),
+      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowUp, {
+        size: 16
+      }), cur),
       direction: 'asc',
       attribute: cur
     }, {
       id: "".concat(cur, "-desc"),
-      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowDown16, null), cur),
+      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowDown, {
+        size: 16
+      }), cur),
       direction: 'desc',
       attribute: cur
     }];
@@ -41,9 +47,14 @@ export var AddSelectSort = function AddSelectSort(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, sortByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
+        size: 32
+      }, props));
+    },
     className: "".concat(blockClass, "_overflow"),
-    renderIcon: ArrowsVertical32,
-    flipped: true
+    flipped: true,
+    ariaLabel: sortByLabel
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
@@ -58,6 +69,7 @@ export var AddSelectSort = function AddSelectSort(_ref) {
 AddSelectSort.propTypes = {
   setSortAttribute: PropTypes.func,
   setSortDirection: PropTypes.func,
-  sortBy: PropTypes.array
+  sortBy: PropTypes.array,
+  sortByLabel: PropTypes.string
 };
 AddSelectSort.displayName = componentName;

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,13 +23,13 @@ import React, { useState, useEffect, useRef } from 'react'; // Other standard im
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Link, TooltipIcon } from 'carbon-components-react';
-import { pkg, carbon } from '../../settings';
+import { Link, IconButton, usePrefix } from '@carbon/react';
+import { pkg } from '../../settings';
 import { useResizeDetector } from 'react-resize-detector';
-import { ArrowLeft16 } from '@carbon/icons-react'; // Carbon and package components we use.
+import { ArrowLeft } from '@carbon/icons-react'; // Carbon and package components we use.
 
-import { Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
-import { OverflowMenuHorizontal32 } from '@carbon/icons-react';
+import { Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { OverflowMenuHorizontal } from '@carbon/icons-react';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -50,6 +50,8 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       overflowAriaLabel = _ref.overflowAriaLabel,
       other = _objectWithoutProperties(_ref, _excluded);
 
+  var carbonPrefix = usePrefix();
+
   var _useState = useState(3),
       _useState2 = _slicedToArray(_useState, 2),
       displayCount = _useState2[0],
@@ -78,7 +80,11 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       ariaLabel: overflowAriaLabel,
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
-      renderIcon: OverflowMenuHorizontal32,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(OverflowMenuHorizontal, _extends({
+          size: 32
+        }, props));
+      },
       className: "".concat(blockClass, "__overflow-menu"),
       menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
     }, // eslint-disable-next-line react/prop-types
@@ -103,7 +109,11 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       key: "".concat(blockClass, "-hidden-overflow-").concat(internalId)
     }, /*#__PURE__*/React.createElement(OverflowMenu, {
       ariaLabel: overflowAriaLabel,
-      renderIcon: OverflowMenuHorizontal32
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(OverflowMenuHorizontal, _extends({
+          size: 32
+        }, props));
+      }
     })), breadcrumbs.map(function (_ref3) {
       var label = _ref3.label,
           key = _ref3.key,
@@ -185,7 +195,7 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       /* istanbul ignore next */
 
       if (sizingContainerRef.current) {
-        var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(carbon.prefix, "--breadcrumb-item"));
+        var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(carbonPrefix, "--breadcrumb-item"));
         var breadcrumbWidthsIncludingMargin = [];
 
         var _iterator = _createForOfIteratorHelper(sizingBreadcrumbItems),
@@ -289,11 +299,12 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   }, /*#__PURE__*/React.createElement(Link, {
     href: backItem.href,
     renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(TooltipIcon, {
-        tooltipText: backItem.title || backItem.label,
-        direction: "right",
-        renderIcon: ArrowLeft16
-      });
+      return /*#__PURE__*/React.createElement(IconButton, {
+        label: backItem.title || backItem.label,
+        align: "right"
+      }, /*#__PURE__*/React.createElement(ArrowLeft, {
+        size: 16
+      }));
     }
   })), displayedBreadcrumbItems)));
 }; // Return a placeholder if not released and not enabled by feature flag