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

package/es/components/TagSet/TagSet.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
     _excluded2 = ["label", "id"],
     _excluded3 = ["label"];
 
@@ -11,7 +11,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { TagSetOverflow } from './TagSetOverflow';
 import { TagSetModal } from './TagSetModal';
-import { Tag } from 'carbon-components-react';
+import { Tag } from '@carbon/react';
 import { useResizeDetector } from 'react-resize-detector';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
@@ -34,8 +34,7 @@ var allTagsModalSearchThreshold = 10; // Default values for props
 var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
-  overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowAlign: 'bottom'
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -47,8 +46,6 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$overflowAlign = _ref.overflowAlign,
       overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
       overflowClassName = _ref.overflowClassName,
-      _ref$overflowDirectio = _ref.overflowDirection,
-      overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
       allTagsModalTitle = _ref.allTagsModalTitle,
       allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
       allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
@@ -154,13 +151,12 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
-      overflowDirection: overflowDirection,
       showAllTagsLabel: showAllTagsLabel,
       key: "displayed-tag-overflow",
       ref: overflowTag
     }));
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
+  }, [displayCount, overflowAlign, overflowClassName, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -329,18 +325,13 @@ TagSet.propTypes = {
   /**
    * overflowAlign from the standard tooltip. Default center.
    */
-  overflowAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  overflowAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
 
   /**
    * overflowClassName for the tooltip popup
    */
   overflowClassName: PropTypes.string,
 
-  /**
-   * overflowDirection from the standard tooltip
-   */
-  overflowDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * label for the overflow show all tags link.
    *

package/es/components/TagSet/TagSetModal.js

@@ -18,7 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ComposedModal, ModalHeader, ModalBody, Search, Tag } from 'carbon-components-react';
+import { ComposedModal, ModalHeader, ModalBody, Search, Tag } from '@carbon/react';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
 var componentName = 'TagSetModal';
@@ -84,8 +84,9 @@ export var TagSetModal = function TagSetModal(_ref) {
     open: open,
     onClose: onClose
   }), /*#__PURE__*/React.createElement(ModalHeader, {
-    title: title,
-    className: "".concat(blockClass, "__header")
+    className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
+    title: title
   }, /*#__PURE__*/React.createElement(Search, {
     "data-modal-primary-focus": true,
     className: "".concat(blockClass, "__search"),

package/es/components/TagSet/TagSetOverflow.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "showAllTagsLabel"];
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -12,16 +12,15 @@ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Link, Tag, Tooltip } from 'carbon-components-react';
+import { Link, Tag, Popover, PopoverContent } from '@carbon/react';
+import { useClickOutside } from '../../global/js/hooks';
 import { pkg } from '../../settings';
-import { noop } from '../../global/js/utils/pconsole';
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(pkg.prefix, "--tag-set-overflow"); // Default values for props
 
 var defaults = {
   allTagsModalSearchThreshold: 10,
-  overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowAlign: 'bottom'
 };
 export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
@@ -30,46 +29,55 @@ export var TagSetOverflow = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      tipOpen = _useState2[0],
-      setTipOpen = _useState2[1];
+      popoverOpen = _useState2[0],
+      setPopoverOpen = _useState2[1];
 
+  var localRef = useRef();
   var overflowTagContent = useRef(null);
-
-  var handleChange = function handleChange(ev, _ref2) {
-    var open = _ref2.open;
-    setTipOpen(open);
-  };
+  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.createElement("span", _extends({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: cx("".concat(blockClass), _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Tooltip, {
+    ref: ref || localRef
+  }), /*#__PURE__*/React.createElement(Popover, {
     align: overflowAlign,
-    className: cx(className, "".concat(blockClass, "__tooltip")),
-    direction: overflowDirection,
-    onChange: handleChange,
-    open: tipOpen,
-    triggerText: /*#__PURE__*/React.createElement(Tag, {
-      onClick: noop
-    }, "+", overflowTags.length),
-    showIcon: false
-  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(className, "".concat(blockClass, "__tagset-popover")),
+    dropShadow: true,
+    highContrast: true,
+    onKeyDown: handleEscKeyPress,
+    open: popoverOpen
+  }, /*#__PURE__*/React.createElement(Tag, {
+    onClick: function onClick() {
+      return setPopoverOpen(!popoverOpen);
+    },
+    className: cx("".concat(blockClass, "__popover-trigger"))
+  }, "+", overflowTags.length), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React.createElement("ul", {
@@ -88,7 +96,7 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href: "",
     onClick: handleShowAllTagsClick,
     role: "button"
-  }, showAllTagsLabel))));
+  }, showAllTagsLabel)))));
 });
 TagSetOverflow.displayName = componentName;
 TagSetOverflow.propTypes = {
@@ -110,12 +118,7 @@ TagSetOverflow.propTypes = {
   /**
    * overflowAlign from the standard tooltip
    */
-  overflowAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-  /**
-   * overflowDirection from the standard tooltip
-   */
-  overflowDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  overflowAlign: PropTypes.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/es/components/TagSet/constants.js

@@ -0,0 +1,20 @@
+//
+// 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.
+//
+export 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'
+};

package/es/components/Tearsheet/Tearsheet.js

@@ -20,7 +20,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { allPropTypes } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button } from 'carbon-components-react';
+import { Button } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
 import { tearsheetHasCloseIcon, TearsheetShell } from './TearsheetShell';
 var componentName = 'Tearsheet'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -98,7 +98,7 @@ Tearsheet.propTypes = _objectSpread({
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: allPropTypes([ActionSet.validateActions(function () {
-    return 'max';
+    return '2xl';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -20,7 +20,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button } from 'carbon-components-react';
+import { Button } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
 import { tearsheetHasCloseIcon, TearsheetShell, tearsheetShellWideProps as blocked } from './TearsheetShell';
 var componentName = 'TearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.

package/es/components/Tearsheet/TearsheetShell.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 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.
@@ -21,15 +21,14 @@ import { useResizeDetector } from 'react-resize-detector'; // Other standard imp
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { pkg, carbon } from '../../settings';
+import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole'; // Carbon and package components we use.
 
-import { Button, ComposedModal, ModalHeader, ModalBody } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap'; // The block part of our conventional BEM class names (bc__E--M).
 
 var bc = "".concat(pkg.prefix, "--tearsheet");
-var bcModalHeader = "".concat(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
@@ -74,7 +73,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       verticalPosition = _ref.verticalPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  // node the modal tearsheet is hosted in
+  var carbonPrefix = usePrefix();
+  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // node the modal tearsheet is hosted in
+
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       portalTarget = _useState2[0],
@@ -126,14 +127,14 @@ export var TearsheetShell = /*#__PURE__*/React.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);
@@ -207,11 +208,12 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onFocus: handleFocus,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(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.createElement(ModalHeader, {
       className: cx("".concat(bc, "__header"), (_cx3 = {}, _defineProperty(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), _defineProperty(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
       closeClassName: cx(_defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+      closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__header-content")
@@ -252,7 +254,7 @@ export var TearsheetShell = /*#__PURE__*/React.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.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer

package/es/components/Toolbar/Toolbar.js

@@ -13,6 +13,7 @@ var _excluded = ["children", "className", "vertical"];
 import cx from 'classnames';
 import { bool, node, string } from 'prop-types';
 import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getFocusableElements as _getFocusableElements } from '../../global/js/utils/getFocusableElements';
 import { pkg } from '../../settings';
 var checkComponentEnabled = pkg.checkComponentEnabled,
@@ -91,7 +92,7 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
     onKeyDown: onKeyDown
   }, vertical && {
     'aria-orientation': 'vertical'
-  }, {
+  }, getDevtoolsProps(componentName), {
     role: "toolbar"
   }), /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
     value: {

package/es/components/Toolbar/ToolbarButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["caret", "children", "className"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -9,32 +9,36 @@ var _excluded = ["caret", "children", "className"];
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Button } from 'carbon-components-react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
-import { bool, node, string } from 'prop-types';
+import { bool, func, node, string } from 'prop-types';
 import React, { forwardRef, useContext } from 'react';
 import { pkg } from '../../settings';
 import { blockClass as toolbarClass, ToolbarContext } from './Toolbar';
-var blockClass = "".concat(toolbarClass, "__button");
+export var blockClass = "".concat(toolbarClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 
-var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var ToolbarButton = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    tooltipPosition: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+  var Icon = renderIcon;
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    align: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
+    label: iconDescription,
     ref: ref,
     className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
-    size: "md",
-    hasIconOnly: true
-  }), /*#__PURE__*/React.createElement(React.Fragment, null, children, caret && /*#__PURE__*/React.createElement("span", {
+    size: "md"
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, Icon ? /*#__PURE__*/React.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__caret")
   })));
 });
@@ -48,7 +52,12 @@ ToolbarButton.propTypes = {
   children: node,
 
   /** Provide an optional class to be applied to the containing node */
-  className: string
+  className: string,
+
+  /** Specifies the label for the icon button */
+  iconDescription: string.isRequired,
+
+  /** Specifies the icon to be used by the ToolbarButton component */
+  renderIcon: func.isRequired
 };
-ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
-export { blockClass, ToolbarButton };
+ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);

package/es/components/UserProfileImage/UserProfileImage.js

@@ -17,8 +17,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { User20, User24, User32, Group20, Group24, Group32 } from '@carbon/icons-react';
-import { TooltipIcon } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { User, Group } from '@carbon/icons-react';
+import { IconButton } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -42,14 +42,38 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   var icons = {
     user: {
-      md: User20,
-      lg: User24,
-      xlg: User32
+      md: function md(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 32
+        }, props));
+      }
     },
     group: {
-      md: Group20,
-      lg: Group24,
-      xlg: Group32
+      md: function md(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 32
+        }, props));
+      }
     }
   };
 
@@ -100,9 +124,10 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
   };
 
-  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(TooltipIcon, {
-    tooltipText: tooltipText,
-    className: "".concat(blockClass, "__tooltip")
+  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
+    label: tooltipText,
+    className: "".concat(blockClass, "__tooltip"),
+    kind: "ghost"
   }, renderUserProfileImage()) : renderUserProfileImage());
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -123,7 +148,7 @@ UserProfileImage.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the included ones
    */
-  icon: PropTypes.object,
+  icon: PropTypes.func,
 
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
@@ -151,7 +176,7 @@ UserProfileImage.propTypes = {
   /**
    * Set the size of the avatar circle
    */
-  size: PropTypes.oneOf(['xlg', 'lg', 'md']).isRequired,
+  size: PropTypes.oneOf(['xl', 'lg', 'md']).isRequired,
 
   /**
    * Set theme in which the component will be rendered

package/es/components/WebTerminal/WebTerminal.js

@@ -21,8 +21,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Close16 as Close, Help16 as Help } from '@carbon/icons-react';
-import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { Close, Help } from '@carbon/icons-react';
+import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools'; // The block part of our conventional BEM class names (blockClass__E--M).
@@ -120,7 +120,11 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions")
   }, showDocumentationLinks && /*#__PURE__*/React.createElement(OverflowMenu, {
-    renderIcon: Help,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Help, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: documentationLinksIconDescription,
     ariaLabel: documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
@@ -141,11 +145,16 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       renderIcon: renderIcon,
       onClick: onClick,
       iconDescription: iconDescription,
-      kind: "ghost"
+      kind: "ghost",
+      "aria-label": iconDescription
     });
   })), /*#__PURE__*/React.createElement(Button, {
     hasIconOnly: true,
-    renderIcon: Close,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Close, _extends({
+        size: 16
+      }, props));
+    },
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
@@ -169,7 +178,7 @@ WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    renderIcon: PropTypes.object.isRequired,
+    renderIcon: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
     iconDescription: PropTypes.string.isRequired
   })),

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from 'carbon-components-react';
-import { Terminal20 as Terminal, Search20 as Search, User20 as User } from '@carbon/icons-react';
+import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from '@carbon/react';
+import { Terminal, Search, User } from '@carbon/icons-react';
 import { useWebTerminal } from '../hooks';
 
 var Navigation = function Navigation() {
@@ -15,13 +15,19 @@ var Navigation = function Navigation() {
   }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Web terminal",
     onClick: openWebTerminal
-  }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+  }, /*#__PURE__*/React.createElement(Terminal, {
+    size: 20
+  })), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
-  }, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+  }, /*#__PURE__*/React.createElement(Search, {
+    size: 20
+  })), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "User",
     onClick: function onClick() {}
-  }, /*#__PURE__*/React.createElement(User, null))));
+  }, /*#__PURE__*/React.createElement(User, {
+    size: 20
+  }))));
 };
 
 export default Navigation;

package/es/components/_Canary/Canary.js

@@ -16,7 +16,7 @@ import cx from 'classnames'; // load the package settings direct, because Canary
 
 import pkg from '../../global/js/package-settings'; // Carbon and package components we use.
 
-import { CodeSnippet } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { CodeSnippet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--canary");
 /**

package/es/global/js/hooks/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 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.