@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

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;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.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 _settings = require("../../settings");
 
@@ -66,6 +66,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       noTrailingSlash = _ref.noTrailingSlash,
       overflowAriaLabel = _ref.overflowAriaLabel,
       other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
 
   var _useState = (0, _react.useState)(3),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -89,18 +90,22 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
 
   var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
     var overflowItems = _ref2.overflowItems;
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+    return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+    }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
-      renderIcon: _iconsReact.OverflowMenuHorizontal32,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+          size: 32
+        }, props));
+      },
       className: "".concat(blockClass, "__overflow-menu"),
       menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
     }, // eslint-disable-next-line react/prop-types
     overflowItems.map(function (item, index) {
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
         key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
         href: item.props.href,
         onClick: item.props.onClick,
@@ -116,18 +121,22 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       className: "".concat(blockClass, "__breadcrumb-container ").concat(blockClass, "__breadcrumb-container--hidden"),
       "aria-hidden": true,
       ref: sizingContainerRef
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+    }, /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, null, /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
       key: "".concat(blockClass, "-hidden-overflow-").concat(internalId)
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+    }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
-      renderIcon: _iconsReact.OverflowMenuHorizontal32
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+          size: 32
+        }, props));
+      }
     })), breadcrumbs.map(function (_ref3) {
       var label = _ref3.label,
           key = _ref3.key,
           title = _ref3.title,
           id = _ref3.id,
           rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, (0, _extends2.default)({
         key: key
       }, rest, {
         // ensure id is not duplicated
@@ -151,7 +160,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
           label = _ref4.label,
           title = _ref4.title,
           rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, (0, _extends2.default)({
         key: key,
         className: index > 0 || displayCount > 1 ? (0, _classnames.default)([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
         title: index + 1 === breadcrumbs.length ? title : null
@@ -200,7 +209,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       /* istanbul ignore next */
 
       if (sizingContainerRef.current) {
-        var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(_settings.carbon.prefix, "--breadcrumb-item"));
+        var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(carbonPrefix, "--breadcrumb-item"));
         var breadcrumbWidthsIncludingMargin = [];
 
         var _iterator = _createForOfIteratorHelper(sizingBreadcrumbItems),
@@ -296,19 +305,20 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     ref: breadcrumbItemWithOverflow
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(["".concat(blockClass, "__space")])
-  }, hiddenSizingItems, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, (0, _extends2.default)({
+  }, hiddenSizingItems, /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, (0, _extends2.default)({
     className: (0, _classnames.default)("".concat(blockClass, "__breadcrumb-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__breadcrumb-container-with-items"), displayedBreadcrumbItems.length > 1)),
     noTrailingSlash: noTrailingSlash
-  }, other), ((_backItem = backItem) === null || _backItem === void 0 ? void 0 : _backItem.href) && (((_backItem2 = backItem) === null || _backItem2 === void 0 ? void 0 : _backItem2.label) || ((_backItem3 = backItem) === null || _backItem3 === void 0 ? void 0 : _backItem3.title)) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
+  }, other), ((_backItem = backItem) === null || _backItem === void 0 ? void 0 : _backItem.href) && (((_backItem2 = backItem) === null || _backItem2 === void 0 ? void 0 : _backItem2.label) || ((_backItem3 = backItem) === null || _backItem3 === void 0 ? void 0 : _backItem3.title)) && /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
     className: (0, _classnames.default)("".concat(blockClass, "__breadcrumb-back"))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Link, {
     href: backItem.href,
     renderIcon: function renderIcon() {
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TooltipIcon, {
-        tooltipText: backItem.title || backItem.label,
-        direction: "right",
-        renderIcon: _iconsReact.ArrowLeft16
-      });
+      return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+        label: backItem.title || backItem.label,
+        align: "right"
+      }, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, {
+        size: 16
+      }));
     }
   })), displayedBreadcrumbItems)));
 }; // Return a placeholder if not released and not enabled by feature flag

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -19,16 +19,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
-var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--button-menu");
 var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
 var defaults = {
-  size: 'default',
+  size: 'lg',
   kind: 'primary'
 };
 /**
@@ -46,23 +46,26 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
+      menuAriaLabel = _ref.menuAriaLabel,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, (0, _extends2.default)({}, rest, {
+  var carbonPrefix = (0, _react2.usePrefix)();
+  return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     ),
+    ariaLabel: menuAriaLabel,
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
+        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(carbonPrefix, "--btn"), "".concat(carbonPrefix, "--btn--").concat(kind), "".concat(carbonPrefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
-        className: "".concat(_settings.carbon.prefix, "--btn__icon")
+        className: "".concat(carbonPrefix, "--btn__icon")
       }));
     },
     innerRef: ref
@@ -94,7 +97,7 @@ ButtonMenu.propTypes = {
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
    */
-  iconDescription: _carbonComponentsReact.Button.propTypes.iconDescription,
+  iconDescription: _react2.Button.propTypes.iconDescription,
 
   /**
    * The three types the menu button supports: primary, tertiary and ghost.
@@ -106,6 +109,12 @@ ButtonMenu.propTypes = {
    */
   label: _propTypes.default.node,
 
+  /**
+   * Provide the ariaLabel prop to be passed to the OverflowMenu. This is distinctly
+   * separate from `label` to support icon only ButtonMenus
+   */
+  menuAriaLabel: _propTypes.default.string.isRequired,
+
   /**
    * class name applied to the overflow options
    */
@@ -115,11 +124,11 @@ ButtonMenu.propTypes = {
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
    */
-  renderIcon: _carbonComponentsReact.Button.propTypes.renderIcon,
+  renderIcon: _react2.Button.propTypes.renderIcon,
 
   /**
    * The size of the button for the menu trigger. The values can be any valid
    * value for the carbon Button component 'size' prop.
    */
-  size: _carbonComponentsReact.Button.propTypes.size
+  size: _react2.Button.propTypes.size
 };

package/lib/components/ButtonMenu/ButtonMenuItem.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -32,7 +32,7 @@ var componentName = 'ButtonMenuItem'; // NOTE: the component SCSS is not importe
  */
 
 var ButtonMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({}, props, {
     ref: ref
   }));
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -40,4 +40,4 @@ var ButtonMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
 exports.ButtonMenuItem = ButtonMenuItem;
 exports.ButtonMenuItem = ButtonMenuItem = _settings.pkg.checkComponentEnabled(ButtonMenuItem, componentName);
-ButtonMenuItem.propTypes = _carbonComponentsReact.OverflowMenuItem.propTypes;
+ButtonMenuItem.propTypes = _react2.OverflowMenuItem.propTypes;

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -25,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactResizeDetector = require("react-resize-detector");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ButtonMenu = require("../ButtonMenu");
 
@@ -54,7 +54,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 var blockClass = "".concat(_settings.pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
-var buttonSize = 'field';
+var buttonSize = 'md';
 
 var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
@@ -63,6 +63,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
       menuOptionsClass = _ref.menuOptionsClass,
       rightAlign = _ref.rightAlign;
+  var carbonPrefix = (0, _react2.usePrefix)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -88,7 +89,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     var spaceAvailable = (_spaceAvailableRef$cu = spaceAvailableRef.current) === null || _spaceAvailableRef$cu === void 0 ? void 0 : _spaceAvailableRef$cu.offsetWidth;
     var newShowAsOverflow = true; // get all of the hidden sizing buttons
 
-    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(_settings.carbon.prefix, "--btn")); // calculate total width of button set
+    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn")); // calculate total width of button set
 
     var sizingSetTotalSize = 0;
 
@@ -131,7 +132,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var AButtonSet = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
     var buttons = _ref2.buttons,
         rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
       ref: ref
     }), buttons.map(function (_ref3) {
       var label = _ref3.label,
@@ -141,7 +142,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
 
       /* istanbul ignore next */
       var usedKind = kind || 'primary';
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
         key: key && "button-set-".concat(key),
         kind: usedKind
       }, other, {
@@ -156,7 +157,8 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
         rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, (0, _extends2.default)({}, rest, {
       ref: ref,
-      label: buttonSetOverflowLabel
+      label: buttonSetOverflowLabel,
+      menuAriaLabel: buttonSetOverflowLabel
     }), buttons.map(function (_ref5) {
       var label = _ref5.label,
           key = _ref5.key,
@@ -225,9 +227,9 @@ ButtonSetWithOverflow.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  buttons: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  buttons: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     key: _propTypes.default.string.isRequired,
-    kind: _carbonComponentsReact.Button.propTypes.kind,
+    kind: _react2.Button.propTypes.kind,
     label: _propTypes.default.node,
     onClick: _propTypes.default.func
   }))).isRequired,

package/lib/components/Card/Card.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,9 +29,9 @@ var _CardFooter = require("./CardFooter");
 
 var _settings = require("../../settings");
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
-    _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
+    _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 
 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); }
 
@@ -73,6 +73,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       _ref$overflowActions = _ref.overflowActions,
       overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
+      overflowAriaLabel = _ref.overflowAriaLabel,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       Pictogram = _ref.pictogram,
       primaryButtonHref = _ref.primaryButtonHref,
@@ -108,14 +109,15 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
-        flipped: true
+        flipped: true,
+        ariaLabel: overflowAriaLabel
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
             rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
       }));
@@ -126,17 +128,16 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown,
           href = _ref3.href,
           rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
 
       if (productive) {
-        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+        return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
           key: id,
           renderIcon: Icon,
           hasIconOnly: true,
           onClick: onClick,
-          size: actionsPlacement === 'top' ? 'sm' : 'field',
+          size: actionsPlacement === 'top' ? 'sm' : 'md',
           iconDescription: iconDescription,
           kind: "ghost",
           href: href
@@ -154,13 +155,13 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
         key: id,
+        label: iconDescription,
         className: "".concat(blockClass, "__icon"),
         onClick: onClick,
-        onKeyDown: onKeyDown,
-        role: "button",
-        tabIndex: "0"
+        kind: "ghost",
+        size: "sm"
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-label": iconDescription
       }));
@@ -270,6 +271,7 @@ Card.propTypes = {
     onClick: _propTypes.default.func,
     onKeyDown: _propTypes.default.func
   })),
+  overflowAriaLabel: _propTypes.default.string,
   pictogram: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),