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

package/lib/components/StatusIcon/StatusIcon.js

@@ -2,18 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StatusIcon = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -26,78 +28,14 @@ var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 
 var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
-var icons = {
-  fatal: {
-    sm: _iconsReact.Misuse16,
-    md: _iconsReact.Misuse20,
-    lg: _iconsReact.Misuse24,
-    xlg: _iconsReact.Misuse32
-  },
-  critical: {
-    sm: _iconsReact.ErrorFilled16,
-    md: _iconsReact.ErrorFilled20,
-    lg: _iconsReact.ErrorFilled24,
-    xlg: _iconsReact.ErrorFilled32
-  },
-  'major-warning': {
-    sm: _iconsReact.WarningAltInvertedFilled16,
-    md: _iconsReact.WarningAltInvertedFilled20,
-    lg: _iconsReact.WarningAltInvertedFilled24,
-    xlg: _iconsReact.WarningAltInvertedFilled32
-  },
-  'minor-warning': {
-    sm: _iconsReact.WarningAltFilled16,
-    md: _iconsReact.WarningAltFilled20,
-    lg: _iconsReact.WarningAltFilled24,
-    xlg: _iconsReact.WarningAltFilled32
-  },
-  undefined: {
-    sm: _iconsReact.UndefinedFilled16,
-    md: _iconsReact.UndefinedFilled20,
-    lg: _iconsReact.UndefinedFilled24,
-    xlg: _iconsReact.UndefinedFilled32
-  },
-  unknown: {
-    sm: _iconsReact.UnknownFilled16,
-    md: _iconsReact.UnknownFilled20,
-    lg: _iconsReact.UnknownFilled24,
-    xlg: _iconsReact.UnknownFilled32
-  },
-  normal: {
-    sm: _iconsReact.CheckmarkFilled16,
-    md: _iconsReact.CheckmarkFilled20,
-    lg: _iconsReact.CheckmarkFilled24,
-    xlg: _iconsReact.CheckmarkFilled32
-  },
-  info: {
-    sm: _iconsReact.InformationSquareFilled16,
-    md: _iconsReact.InformationSquareFilled20,
-    lg: _iconsReact.InformationSquareFilled24,
-    xlg: _iconsReact.InformationSquareFilled32
-  },
-  'in-progress': {
-    sm: _iconsReact.Renew16,
-    md: _iconsReact.Renew20,
-    lg: _iconsReact.Renew24,
-    xlg: _iconsReact.Renew32
-  },
-  running: {
-    sm: _iconsReact.Renew16,
-    md: _iconsReact.Renew20,
-    lg: _iconsReact.Renew24,
-    xlg: _iconsReact.Renew32
-  },
-  pending: {
-    sm: _iconsReact.Time16,
-    md: _iconsReact.Time20,
-    lg: _iconsReact.Time24,
-    xlg: _iconsReact.Time32
-  }
-};
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var blockClass = "".concat(_settings.pkg.prefix, "--status-icon");
 var componentName = 'StatusIcon';
-
-var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _icons$kind;
 
   var kind = _ref.kind,
@@ -106,6 +44,294 @@ var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className = _ref.className,
       iconDescription = _ref.iconDescription,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var icons = {
+    fatal: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Misuse, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    critical: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'major-warning': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltInvertedFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'minor-warning': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    undefined: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UndefinedFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    unknown: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.UnknownFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    normal: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    info: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    'in-progress': {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    running: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Renew, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    },
+    pending: {
+      sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 16,
+          ref: ref
+        }, props));
+      }),
+      md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 20,
+          ref: ref
+        }, props));
+      }),
+      lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 24,
+          ref: ref
+        }, props));
+      }),
+      xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Time, (0, _extends2.default)({
+          size: 32,
+          ref: ref
+        }, props));
+      })
+    }
+  };
   var IconComponent = (_icons$kind = icons[kind]) === null || _icons$kind === void 0 ? void 0 : _icons$kind[size];
   var classNames = (0, _classnames.default)(className, blockClass, "".concat(blockClass, "--").concat(theme), (0, _defineProperty2.default)({}, "".concat(blockClass, "--").concat(theme, "-").concat(kind), kind));
   return IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, (0, _extends2.default)({}, rest, {
@@ -113,7 +339,6 @@ var StatusIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("title", null, iconDescription));
 });
-
 exports.StatusIcon = StatusIcon;
 exports.StatusIcon = StatusIcon = _settings.pkg.checkComponentEnabled(StatusIcon, componentName);
 StatusIcon.displayName = componentName;
@@ -136,7 +361,7 @@ StatusIcon.propTypes = {
   /**
    * A required prop that displays the size of the icon associate with the status
    */
-  size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xlg']).isRequired,
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
 
   /**
    * A required prop that displays the theme of the icon associated with the status

package/lib/components/TagSet/TagSet.js

@@ -29,7 +29,7 @@ var _TagSetOverflow = require("./TagSetOverflow");
 
 var _TagSetModal = require("./TagSetModal");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _reactResizeDetector = require("react-resize-detector");
 
@@ -39,7 +39,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
 
 var _settings = require("../../settings");
 
-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"];
 
@@ -58,8 +58,7 @@ var allTagsModalSearchThreshold = 10; // Default values for props
 var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
-  overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowAlign: 'bottom'
 };
 
 var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -72,8 +71,6 @@ var TagSet = /*#__PURE__*/_react.default.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,
@@ -144,7 +141,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         ref: function ref(el) {
           return newSizingTags[index] = el;
         }
-      }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
+      }, /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
         // ensure id is not duplicated
         "data-original-id": id,
         filter: false
@@ -157,7 +154,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
       var label = _ref3.label,
           other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
         filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
@@ -177,13 +174,12 @@ var TagSet = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -355,18 +351,13 @@ TagSet.propTypes = {
   /**
    * overflowAlign from the standard tooltip. Default center.
    */
-  overflowAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+  overflowAlign: _propTypes.default.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.default.string,
 
-  /**
-   * overflowDirection from the standard tooltip
-   */
-  overflowDirection: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * label for the overflow show all tags link.
    *
@@ -384,7 +375,7 @@ TagSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/components/TagSet/TagSetModal.js

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
@@ -97,29 +97,30 @@ var TagSetModal = function TagSetModal(_ref) {
     setSearch(ev.target.value || '');
   };
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     containerClassName: "".concat(blockClass, "__container"),
     className: (0, _classnames.default)(className, "".concat(blockClass)),
     size: "sm",
     open: open,
     onClose: onClose
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
-    title: title,
-    className: "".concat(blockClass, "__header")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Search, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
+    className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
     "data-modal-primary-focus": true,
     className: "".concat(blockClass, "__search"),
     labelText: searchLabel,
     placeholder: searchPlaceholder,
     onChange: handleSearch,
     size: "lg"
-  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body"),
     hasForm: true
   }, filteredModalTags.map(function (_ref2, index) {
     var label = _ref2.label,
         other = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
       filter: false,
       key: "all-tags-".concat(index)
     }), label);
@@ -130,7 +131,7 @@ var TagSetModal = function TagSetModal(_ref) {
 
 exports.TagSetModal = TagSetModal;
 TagSetModal.propTypes = {
-  allTags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+  allTags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
     label: _propTypes.default.string.isRequired
   }))),
   className: _propTypes.default.string,