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

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -11,12 +11,12 @@ exports.APIKeyModal = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -27,7 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -127,7 +127,11 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var hasNextStep = hasSteps && currentStep < customSteps.length - 1;
   var hasPreviousStep = hasSteps && currentStep !== 0;
   var copyButtonProps = {
-    renderIcon: _iconsReact.Copy16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Copy, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: copyIconDescription,
     ref: copyRef
   };
@@ -283,7 +287,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), {
@@ -292,28 +296,28 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "sm",
     "aria-label": modalLabel,
     preventCloseOnClickOutside: true
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: getTitle(),
     label: modalLabel
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body-container")
   }, hasSteps && !apiKeyLoaded ? customSteps[currentStep].content : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, {
+  }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_react2.PasswordInput, {
     value: apiKey,
     labelText: apiKeyLabel,
     id: apiKeyInputId.current,
     showPasswordLabel: showAPIKeyLabel,
     hidePasswordLabel: hideAPIKeyLabel,
     tooltipPosition: "left"
-  }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     value: apiKey,
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
-  }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_react2.Form, {
     onSubmit: submitHandler
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,
     labelText: nameLabel,
@@ -323,18 +327,22 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: loading,
     required: nameRequired,
     "data-modal-primary-focus": true
-  })), loading && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineLoading, {
+  })), loading && /*#__PURE__*/_react.default.createElement(_react2.InlineLoading, {
     description: loadingText,
     className: "".concat(blockClass, "__loader")
   }), (copyError || error) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, null)), /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+    size: 16
+  })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__messaging-text")
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled16, null), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled, {
+    size: 16
+  }), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
     apiKey: apiKey,
     body: downloadBodyText,
     fileName: downloadFileName,
@@ -342,13 +350,13 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     fileType: downloadFileType
   }) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging-text")
-  }, generateSuccessBody)))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, {
+  }, generateSuccessBody)))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onBackHandler
-  }, getSecondaryButtonText()), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, apiKeyLoaded ? copyButtonProps : {}, {
+  }, getSecondaryButtonText()), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, apiKeyLoaded ? copyButtonProps : {}, {
     type: "submit",
     kind: "primary",
     onClick: submitHandler,

package/lib/components/AboutModal/AboutModal.js

@@ -31,9 +31,11 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _devtools = require("../../global/js/utils/devtools");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
-var _excluded = ["additionalInfo", "className", "closeIconDescription", "content", "copyrightText", "legalText", "links", "logo", "onClose", "open", "title"];
+var _propsHelper = require("../../global/js/utils/props-helper");
+
+var _excluded = ["additionalInfo", "className", "closeIconDescription", "content", "copyrightText", "legalText", "links", "logo", "modalAriaLabel", "onClose", "open", "tabListAriaLabel", "title"];
 
 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); }
 
@@ -64,8 +66,10 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       legalText = _ref.legalText,
       links = _ref.links,
       logo = _ref.logo,
+      modalAriaLabel = _ref.modalAriaLabel,
       onClose = _ref.onClose,
       open = _ref.open,
+      tabListAriaLabel = _ref.tabListAriaLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -94,22 +98,24 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onResize: handleResize,
     targetRef: bodyRef
   });
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (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.
-    (0, _defineProperty2.default)({}, "".concat(blockClass, "--with-tabs"), additionalInfo && additionalInfo.length > 1))
+    (0, _defineProperty2.default)({}, "".concat(blockClass, "--with-tabs"), additionalInfo && additionalInfo.length > 1)),
+    "aria-label": modalAriaLabel
   }, _objectSpread({
     onClose: onClose,
     open: open,
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__logo")
-  }, logo), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, logo), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
     iconDescription: closeIconDescription,
     label: title,
     labelClassName: "".concat(blockClass, "__title")
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     "aria-label": hasScrollingContent ? '' : null,
     "aria-labelledby": hasScrollingContent ? contentId : null,
     className: "".concat(blockClass, "__body"),
@@ -128,30 +134,42 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__legal-text")
   }, legalText), copyrightText && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__copyright-text")
-  }, copyrightText))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, {
+  }, copyrightText))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
   }, additionalInfo && additionalInfo.length > 0 && (additionalInfo.length === 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__version-label")
   }, additionalInfo[0].label), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__version-number")
-  }, additionalInfo[0].content)) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tabs, {
+  }, additionalInfo[0].content)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tab-container")
-  }, additionalInfo.map(function (tab, i) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
-      id: 'about-modal-tab-' + tab.label,
-      label: tab.label,
-      key: i
+  }, /*#__PURE__*/_react.default.createElement(_react2.Tabs, null, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
+    "aria-label": tabListAriaLabel
+  }, additionalInfo.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
+      key: index
+    }, tab.label);
+  })), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, additionalInfo.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
+      key: index
     }, tab.content);
-  })))));
+  })))))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 
 exports.AboutModal = AboutModal;
 exports.AboutModal = AboutModal = _settings.pkg.checkComponentEnabled(AboutModal, componentName);
-AboutModal.displayName = componentName; // The types and DocGen commentary for the component props,
+AboutModal.displayName = componentName;
+
+var tabListAriaLabelRequiredProps = function tabListAriaLabelRequiredProps(type) {
+  return (0, _propsHelper.isRequiredIf)(type, function (_ref2) {
+    var additionalInfo = _ref2.additionalInfo;
+    return additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.length;
+  });
+}; // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 
+
 AboutModal.propTypes = {
   /**
    * Additional information to be displayed in the footer. Can be used for
@@ -204,6 +222,11 @@ AboutModal.propTypes = {
    */
   logo: _propTypes.default.node.isRequired,
 
+  /**
+   * Specifies aria label for AboutModal
+   */
+  modalAriaLabel: _propTypes.default.string,
+
   /**
    * Specifies an optional handler which is called when the AboutModal
    * is closed. Returning `false` prevents the AboutModal from closing.
@@ -215,6 +238,11 @@ AboutModal.propTypes = {
    */
   open: _propTypes.default.bool,
 
+  /**
+   * Specifies the tab list aria label
+   */
+  tabListAriaLabel: tabListAriaLabelRequiredProps(_propTypes.default.string),
+
   /**
    * The title of the AboutModal is usually the product or service name.
    */

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() {