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

package/es/components/StatusIcon/StatusIcon.js

@@ -1,91 +1,23 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
 
 /**
- * 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.
  */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Misuse16, Misuse20, Misuse24, Misuse32, ErrorFilled16, ErrorFilled20, ErrorFilled24, ErrorFilled32, WarningAltInvertedFilled16, WarningAltInvertedFilled20, WarningAltInvertedFilled24, WarningAltInvertedFilled32, WarningAltFilled16, WarningAltFilled20, WarningAltFilled24, WarningAltFilled32, UndefinedFilled16, UndefinedFilled20, UndefinedFilled24, UndefinedFilled32, UnknownFilled16, UnknownFilled20, UnknownFilled24, UnknownFilled32, CheckmarkFilled16, CheckmarkFilled20, CheckmarkFilled24, CheckmarkFilled32, InformationSquareFilled16, InformationSquareFilled20, InformationSquareFilled24, InformationSquareFilled32, Renew16, Renew20, Renew24, Renew32, Time16, Time20, Time24, Time32 } from '@carbon/icons-react';
+import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/icons-react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
-var icons = {
-  fatal: {
-    sm: Misuse16,
-    md: Misuse20,
-    lg: Misuse24,
-    xlg: Misuse32
-  },
-  critical: {
-    sm: ErrorFilled16,
-    md: ErrorFilled20,
-    lg: ErrorFilled24,
-    xlg: ErrorFilled32
-  },
-  'major-warning': {
-    sm: WarningAltInvertedFilled16,
-    md: WarningAltInvertedFilled20,
-    lg: WarningAltInvertedFilled24,
-    xlg: WarningAltInvertedFilled32
-  },
-  'minor-warning': {
-    sm: WarningAltFilled16,
-    md: WarningAltFilled20,
-    lg: WarningAltFilled24,
-    xlg: WarningAltFilled32
-  },
-  undefined: {
-    sm: UndefinedFilled16,
-    md: UndefinedFilled20,
-    lg: UndefinedFilled24,
-    xlg: UndefinedFilled32
-  },
-  unknown: {
-    sm: UnknownFilled16,
-    md: UnknownFilled20,
-    lg: UnknownFilled24,
-    xlg: UnknownFilled32
-  },
-  normal: {
-    sm: CheckmarkFilled16,
-    md: CheckmarkFilled20,
-    lg: CheckmarkFilled24,
-    xlg: CheckmarkFilled32
-  },
-  info: {
-    sm: InformationSquareFilled16,
-    md: InformationSquareFilled20,
-    lg: InformationSquareFilled24,
-    xlg: InformationSquareFilled32
-  },
-  'in-progress': {
-    sm: Renew16,
-    md: Renew20,
-    lg: Renew24,
-    xlg: Renew32
-  },
-  running: {
-    sm: Renew16,
-    md: Renew20,
-    lg: Renew24,
-    xlg: Renew32
-  },
-  pending: {
-    sm: Time16,
-    md: Time20,
-    lg: Time24,
-    xlg: Time32
-  }
-};
 var blockClass = "".concat(pkg.prefix, "--status-icon");
 var componentName = 'StatusIcon';
-export var StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+export var StatusIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _icons$kind;
 
   var kind = _ref.kind,
@@ -95,6 +27,294 @@ export var StatusIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       iconDescription = _ref.iconDescription,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var icons = {
+    fatal: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Misuse, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    critical: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'major-warning': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltInvertedFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'minor-warning': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(WarningAltFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    undefined: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UndefinedFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    unknown: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(UnknownFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    normal: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    info: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(InformationSquareFilled, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'in-progress': {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    running: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Renew, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    pending: {
+      sm: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/forwardRef(function (props, ref) {
+        return /*#__PURE__*/React.createElement(Time, _extends({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    }
+  };
   var IconComponent = (_icons$kind = icons[kind]) === null || _icons$kind === void 0 ? void 0 : _icons$kind[size];
   var classNames = cx(className, blockClass, "".concat(blockClass, "--").concat(theme), _defineProperty({}, "".concat(blockClass, "--").concat(theme, "-").concat(kind), kind));
   return IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({}, rest, {
@@ -123,7 +343,7 @@ StatusIcon.propTypes = {
   /**
    * A required prop that displays the size of the icon associate with the status
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg']).isRequired,
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
 
   /**
    * A required prop that displays the theme of the icon associated with the status

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.