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

package/lib/components/TagSet/TagSetOverflow.js

@@ -23,13 +23,13 @@ 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");
+var _hooks = require("../../global/js/hooks");
 
-var _pconsole = require("../../global/js/utils/pconsole");
+var _settings = require("../../settings");
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "showAllTagsLabel"];
 
 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); }
 
@@ -40,8 +40,7 @@ var blockClass = "".concat(_settings.pkg.prefix, "--tag-set-overflow"); // Defau
 
 var defaults = {
   allTagsModalSearchThreshold: 10,
-  overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowAlign: 'bottom'
 };
 
 var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -51,46 +50,55 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       onShowAllClick = _ref.onShowAllClick,
       _ref$overflowAlign = _ref.overflowAlign,
       overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-      _ref$overflowDirectio = _ref.overflowDirection,
-      overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
       overflowTags = _ref.overflowTags,
       showAllTagsLabel = _ref.showAllTagsLabel,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      tipOpen = _useState2[0],
-      setTipOpen = _useState2[1];
+      popoverOpen = _useState2[0],
+      setPopoverOpen = _useState2[1];
 
+  var localRef = (0, _react.useRef)();
   var overflowTagContent = (0, _react.useRef)(null);
-
-  var handleChange = function handleChange(ev, _ref2) {
-    var open = _ref2.open;
-    setTipOpen(open);
-  };
+  (0, _hooks.useClickOutside)(ref || localRef, function () {
+    if (popoverOpen) {
+      setPopoverOpen(false);
+    }
+  });
 
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setTipOpen(false);
+    setPopoverOpen(false);
     onShowAllClick();
   };
 
+  var handleEscKeyPress = function handleEscKeyPress(event) {
+    var key = event.key;
+
+    if (key === 'Escape') {
+      setPopoverOpen(false);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: (0, _classnames.default)("".concat(blockClass), (0, _defineProperty2.default)({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tooltip, {
+    ref: ref || localRef
+  }), /*#__PURE__*/_react.default.createElement(_react2.Popover, {
     align: overflowAlign,
-    className: (0, _classnames.default)(className, "".concat(blockClass, "__tooltip")),
-    direction: overflowDirection,
-    onChange: handleChange,
-    open: tipOpen,
-    triggerText: /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
-      onClick: _pconsole.noop
-    }, "+", overflowTags.length),
-    showIcon: false
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, "".concat(blockClass, "__tagset-popover")),
+    dropShadow: true,
+    highContrast: true,
+    onKeyDown: handleEscKeyPress,
+    open: popoverOpen
+  }, /*#__PURE__*/_react.default.createElement(_react2.Tag, {
+    onClick: function onClick() {
+      return setPopoverOpen(!popoverOpen);
+    },
+    className: (0, _classnames.default)("".concat(blockClass, "__popover-trigger"))
+  }, "+", overflowTags.length), /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/_react.default.createElement("ul", {
@@ -104,12 +112,12 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }, /*#__PURE__*/_react.default.cloneElement(tag, {
       filter: false
     }));
-  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
+  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_react2.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
     onClick: handleShowAllTagsClick,
     role: "button"
-  }, showAllTagsLabel))));
+  }, showAllTagsLabel)))));
 });
 
 exports.TagSetOverflow = TagSetOverflow;
@@ -133,12 +141,7 @@ TagSetOverflow.propTypes = {
   /**
    * overflowAlign from the standard tooltip
    */
-  overflowAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
-
-  /**
-   * overflowDirection from the standard tooltip
-   */
-  overflowDirection: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  overflowAlign: _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
 
   /**
    * tags shown in overflow

package/lib/components/TagSet/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPES = void 0;
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+var TYPES = {
+  red: 'Red',
+  magenta: 'Magenta',
+  purple: 'Purple',
+  blue: 'Blue',
+  cyan: 'Cyan',
+  teal: 'Teal',
+  green: 'Green',
+  gray: 'Gray',
+  'cool-gray': 'Cool-Gray',
+  'warm-gray': 'Warm-Gray',
+  'high-contrast': 'High-Contrast',
+  outline: 'Outline'
+};
+exports.TYPES = TYPES;

package/lib/components/Tearsheet/Tearsheet.js

@@ -21,7 +21,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ActionSet = require("../ActionSet");
 
@@ -110,13 +110,13 @@ Tearsheet.propTypes = _objectSpread({
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
-    return 'max';
-  }), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+    return '2xl';
+  }), _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
   })))]),
 
   /**

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -21,7 +21,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ActionSet = require("../ActionSet");
 
@@ -99,12 +99,12 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
     return 'lg';
-  }), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  }), _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
   })))]),
 
   /**

package/lib/components/Tearsheet/TearsheetShell.js

@@ -31,7 +31,7 @@ var _settings = require("../../settings");
 
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ActionSet = require("../ActionSet");
 
@@ -49,7 +49,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(_settings.pkg.prefix, "--tearsheet");
-var bcModalHeader = "".concat(_settings.carbon.prefix, "--modal-header");
 var componentName = 'TearsheetShell';
 var maxDepth = 3; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Global data structure to communicate the state of tearsheet stacking
@@ -101,8 +100,9 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       title = _ref.title,
       verticalPosition = _ref.verticalPosition,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
+  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // node the modal tearsheet is hosted in
 
-  // node the modal tearsheet is hosted in
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       portalTarget = _useState2[0],
@@ -154,14 +154,14 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
 
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.innerModal.current.contains(document.activeElement)) {
+    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   }; // Callback to give the tearsheet the opportunity to claim focus
 
 
   handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.innerModal.current.querySelector(selectorPrimaryFocus) : modalRef.current.startSentinel.current;
+    var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
     setTimeout(function () {
       return element.focus();
     }, 1);
@@ -223,7 +223,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return (portalTarget ? _reactDom.createPortal : function (children) {
       return children;
-    })( /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+    })( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
       "aria-label": title,
       className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), size === 'wide'), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
@@ -235,11 +235,12 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       onFocus: handleFocus,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(_settings.carbon.prefix, "--overflow-menu-options"), ".".concat(_settings.carbon.prefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
-    }), includeHeader && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+    }), includeHeader && /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
       className: (0, _classnames.default)("".concat(bc, "__header"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
       closeClassName: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+      closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__header-content")
@@ -258,7 +259,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }, headerActions)), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__header-navigation")
     }, navigation)), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      element: _carbonComponentsReact.ModalBody,
+      element: _react2.ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: (0, _classnames.default)((_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
@@ -280,7 +281,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       actions: actions,
       buttonSize: size === 'wide' ? 'xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: size === 'wide' ? 'max' : 'lg'
+      size: size === 'wide' ? '2xl' : 'lg'
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
@@ -330,12 +331,12 @@ TearsheetShell.propTypes = _objectSpread({
    */
   actions: _propTypes.default.arrayOf( // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
-  _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  _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
   }))),
 
   /**

package/lib/components/Toolbar/Toolbar.js

@@ -23,6 +23,8 @@ var _propTypes = require("prop-types");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _devtools = require("../../global/js/utils/devtools");
+
 var _getFocusableElements2 = require("../../global/js/utils/getFocusableElements");
 
 var _settings = require("../../settings");
@@ -110,7 +112,7 @@ var Toolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, r) {
     onKeyDown: onKeyDown
   }, vertical && {
     'aria-orientation': 'vertical'
-  }, {
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
     role: "toolbar"
   }), /*#__PURE__*/_react.default.createElement(ToolbarContext.Provider, {
     value: {

package/lib/components/Toolbar/ToolbarButton.js

@@ -15,19 +15,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = require("prop-types");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _settings = require("../../settings");
 
 var _Toolbar = require("./Toolbar");
 
-var _excluded = ["caret", "children", "className"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
 
 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); }
 
@@ -37,22 +37,26 @@ var blockClass = "".concat(_Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 
 exports.blockClass = blockClass;
-var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var ToolbarButton = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _useContext;
 
   var caret = _ref.caret,
       children = _ref.children,
       className = _ref.className,
+      renderIcon = _ref.renderIcon,
+      _ref$iconDescription = _ref.iconDescription,
+      iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
-    tooltipPosition: ((_useContext = (0, _react.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+  var Icon = renderIcon;
+  return /*#__PURE__*/_react2.default.createElement(_react.IconButton, (0, _extends2.default)({
+    align: ((_useContext = (0, _react2.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
+    label: iconDescription,
     ref: ref,
     className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
-    size: "md",
-    hasIconOnly: true
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, caret && /*#__PURE__*/_react.default.createElement("span", {
+    size: "md"
+  }), /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, Icon ? /*#__PURE__*/_react2.default.createElement(Icon, null) : null, children, caret && /*#__PURE__*/_react2.default.createElement("span", {
     className: "".concat(blockClass, "__caret")
   })));
 });
@@ -67,6 +71,12 @@ ToolbarButton.propTypes = {
   children: _propTypes.node,
 
   /** Provide an optional class to be applied to the containing node */
-  className: _propTypes.string
+  className: _propTypes.string,
+
+  /** Specifies the label for the icon button */
+  iconDescription: _propTypes.string.isRequired,
+
+  /** Specifies the icon to be used by the ToolbarButton component */
+  renderIcon: _propTypes.func.isRequired
 };
 exports.ToolbarButton = ToolbarButton = _settings.pkg.checkComponentEnabled(ToolbarButton, componentName);

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -25,7 +25,7 @@ var _settings = require("../../settings");
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -50,14 +50,38 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var icons = {
     user: {
-      md: _iconsReact.User20,
-      lg: _iconsReact.User24,
-      xlg: _iconsReact.User32
+      md: function md(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.User, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.User, (0, _extends2.default)({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.User, (0, _extends2.default)({
+          size: 32
+        }, props));
+      }
     },
     group: {
-      md: _iconsReact.Group20,
-      lg: _iconsReact.Group24,
-      xlg: _iconsReact.Group32
+      md: function md(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Group, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Group, (0, _extends2.default)({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Group, (0, _extends2.default)({
+          size: 32
+        }, props));
+      }
     }
   };
 
@@ -108,9 +132,10 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
   };
 
-  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TooltipIcon, {
-    tooltipText: tooltipText,
-    className: "".concat(blockClass, "__tooltip")
+  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    label: tooltipText,
+    className: "".concat(blockClass, "__tooltip"),
+    kind: "ghost"
   }, renderUserProfileImage()) : renderUserProfileImage());
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -133,7 +158,7 @@ UserProfileImage.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the included ones
    */
-  icon: _propTypes.default.object,
+  icon: _propTypes.default.func,
 
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
@@ -161,7 +186,7 @@ UserProfileImage.propTypes = {
   /**
    * Set the size of the avatar circle
    */
-  size: _propTypes.default.oneOf(['xlg', 'lg', 'md']).isRequired,
+  size: _propTypes.default.oneOf(['xl', 'lg', 'md']).isRequired,
 
   /**
    * Set theme in which the component will be rendered

package/lib/components/WebTerminal/WebTerminal.js

@@ -27,7 +27,7 @@ var _settings = require("../../settings");
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _motion = require("@carbon/motion");
 
@@ -139,32 +139,41 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__bar")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
-    renderIcon: _iconsReact.Help16,
+  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Help, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: documentationLinksIconDescription,
     ariaLabel: documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
   }, documentationLinks.map(function (_ref4, i) {
     var rest = (0, _extends2.default)({}, _ref4);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
       key: i
     }, rest));
   })), actions.map(function (_ref5) {
     var renderIcon = _ref5.renderIcon,
         onClick = _ref5.onClick,
         iconDescription = _ref5.iconDescription;
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Button, {
       key: iconDescription,
       hasIconOnly: true,
       renderIcon: renderIcon,
       onClick: onClick,
       iconDescription: iconDescription,
-      kind: "ghost"
+      kind: "ghost",
+      "aria-label": iconDescription
     });
-  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     hasIconOnly: true,
-    renderIcon: _iconsReact.Close16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
@@ -190,7 +199,7 @@ WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   actions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    renderIcon: _propTypes.default.object.isRequired,
+    renderIcon: _propTypes.default.func.isRequired,
     onClick: _propTypes.default.func.isRequired,
     iconDescription: _propTypes.default.string.isRequired
   })),
@@ -213,7 +222,7 @@ WebTerminal.propTypes = {
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
-  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _carbonComponentsReact.OverflowMenuItem.propTypes))),
+  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _react2.OverflowMenuItem.propTypes))),
 
   /**
    * Description for the documentation link overflow menu tooltip

package/lib/components/WebTerminal/preview-components/Navigation.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -19,21 +19,27 @@ var Navigation = function Navigation() {
   var _useWebTerminal = (0, _hooks.useWebTerminal)(),
       openWebTerminal = _useWebTerminal.openWebTerminal;
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Header, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Header, {
     "aria-label": "IBM Platform Name"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderName, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.HeaderName, {
     href: "#",
     prefix: "IBM"
-  }, "[Platform]"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, "[Platform]"), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "Web terminal",
     onClick: openWebTerminal
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal, {
+    size: 20
+  })), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Search20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Search, {
+    size: 20
+  })), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "User",
     onClick: function onClick() {}
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.User20, null))));
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.User, {
+    size: 20
+  }))));
 };
 
 var _default = Navigation;

package/lib/components/_Canary/Canary.js

@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _packageSettings = _interopRequireDefault(require("../../global/js/package-settings"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _excluded = ["className", "componentName"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -37,7 +37,7 @@ var Canary = function Canary(_ref
   var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className)
-  }), /*#__PURE__*/_react.default.createElement("h2", null, "This component ", /*#__PURE__*/_react.default.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/_react.default.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.CodeSnippet, {
+  }), /*#__PURE__*/_react.default.createElement("h2", null, "This component ", /*#__PURE__*/_react.default.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/_react.default.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/_react.default.createElement(_react2.CodeSnippet, {
     type: "multi"
   }, instructions), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"

package/lib/global/js/utils/test-helper.js

@@ -64,7 +64,8 @@ var scssCompile = function scssCompile(file) {
     // When the sass API is revised it may be feasible to switch back to
     // using the API for SCSS compilation and checking.
     execFileSync('sass', [compressed ? '--style=compressed' : '--style=expanded', '--no-source-map', '--load-path', loadPath1, '--load-path', loadPath2, file], {
-      stdio: ['ignore', 'pipe', 'pipe']
+      stdio: ['ignore', 'pipe', 'pipe'],
+      maxBuffer: 1024 * 1024 * 1.5
     }).toString()
   );
 };