@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/SidePanel/constants.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIDE_PANEL_SIZES = void 0;
-
 /**
  * Copyright IBM Corp. 2020, 2021
  *
  * 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 SIDE_PANEL_SIZES = {
   xs: '16rem',
   sm: '20rem',

package/lib/components/SidePanel/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SidePanel", {
     return _SidePanel.SidePanel;
   }
 });
-
 var _SidePanel = require("./SidePanel");

package/lib/components/SidePanel/motion/variants.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelVariants = exports.overlayVariants = void 0;
+var _motionConstants = require("../../../global/js/utils/motionConstants");
+/**
+ * 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 overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+exports.overlayVariants = overlayVariants;
+var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: function hidden(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320
+    };
+  },
+  exit: function exit(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320,
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.exit
+      }
+    };
+  }
+};
+exports.panelVariants = panelVariants;

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -1,31 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleAddSelect = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _AddSelect = require("../AddSelect");
-
 var _devtools = require("../../global/js/utils/devtools");
-
 var _settings = require("../../settings");
-
 var _propsHelper = require("../../global/js/utils/props-helper");
-
 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; }
+//
+// Copyright IBM Corp. 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 componentName = 'SingleAddSelect';
 var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -42,22 +37,18 @@ SingleAddSelect.propTypes = {
    * optional class name
    */
   className: _propTypes.default.string,
-
   /**
    * text description that appears under the title
    */
   description: _propTypes.default.string,
-
   /**
    * label for global search input
    */
   globalSearchLabel: _propTypes.default.string,
-
   /**
    * placeholder for global search input
    */
   globalSearchPlaceholder: _propTypes.default.string,
-
   /**
    * object that contains the item data. for more information reference the
    * "Structuring items" section in the docs tab
@@ -70,52 +61,42 @@ SingleAddSelect.propTypes = {
       value: _propTypes.default.string.isRequired
     }))
   }),
-
   /**
    * label that display above the list of items
    */
   itemsLabel: _propTypes.default.string,
-
   /**
    * text to display when no results are found from the global search
    */
   noResultsDescription: _propTypes.default.string,
-
   /**
    * title to display when no results are found from the global search
    */
   noResultsTitle: _propTypes.default.string,
-
   /**
    * function to call when the close button clicked
    */
   onClose: _propTypes.default.func,
-
   /**
    * text for close button
    */
   onCloseButtonText: _propTypes.default.string,
-
   /**
    * function to call when the submit button is clicked. returns a selection
    */
   onSubmit: _propTypes.default.func,
-
   /**
    * text for the submit button
    */
   onSubmitButtonText: _propTypes.default.string,
-
   /**
    * specifies if the component is open or not
    */
   open: _propTypes.default.bool,
-
   /**
    * text that displays when displaying filtered items
    */
   searchResultsLabel: _propTypes.default.string,
-
   /**
    * header text
    */

package/lib/components/SingleAddSelect/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SingleAddSelect", {
     return _SingleAddSelect.SingleAddSelect;
   }
 });
-
 var _SingleAddSelect = require("./SingleAddSelect");

package/lib/components/StatusIcon/StatusIcon.js

@@ -1,49 +1,39 @@
 "use strict";
 
 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 _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 = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _icons = require("@carbon/react/icons");
-
 var _devtools = require("../../global/js/utils/devtools");
-
 var _settings = require("../../settings");
-
 var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
-
+/**
+ * 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.
+ */
 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__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _icons$kind;
-
   var kind = _ref.kind,
-      theme = _ref.theme,
-      size = _ref.size,
-      className = _ref.className,
-      iconDescription = _ref.iconDescription,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    theme = _ref.theme,
+    size = _ref.size,
+    className = _ref.className,
+    iconDescription = _ref.iconDescription,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var icons = {
     fatal: {
       sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -347,22 +337,18 @@ StatusIcon.propTypes = {
    * Provide an optional class to be applied to the modal root node.
    */
   className: _propTypes.default.string,
-
   /**
    * A required prop that provides a title element and tooltip for the icon for accessibility purposes
    */
   iconDescription: _propTypes.default.string.isRequired,
-
   /**
    * A required prop that displays the respective icon associated with the status
    */
   kind: _propTypes.default.oneOf(['fatal', 'critical', 'major-warning', 'minor-warning', 'undefined', 'unknown', 'normal', 'info', 'in-progress', 'running', 'pending']).isRequired,
-
   /**
    * A required prop that displays the size of the icon associate with the status
    */
   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/StatusIcon/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "StatusIcon", {
     return _StatusIcon.StatusIcon;
   }
 });
-
 var _StatusIcon = require("./StatusIcon");

package/lib/components/TagSet/TagSet.js

@@ -1,124 +1,96 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.string_required_if_more_than_10_tags = exports.default = exports.TagSet = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _TagSetOverflow = require("./TagSetOverflow");
-
 var _TagSetModal = require("./TagSetModal");
-
 var _react2 = require("@carbon/react");
-
-var _reactResizeDetector = require("react-resize-detector");
-
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
-
 var _propsHelper = require("../../global/js/utils/props-helper");
-
 var _settings = require("../../settings");
-
 var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
-    _excluded2 = ["label", "id"],
-    _excluded3 = ["label"];
-
+  _excluded2 = ["label", "id"],
+  _excluded3 = ["label"]; //
+// 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.
+//
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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) { (0, _defineProperty2.default)(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; }
-
 var componentName = 'TagSet';
 var blockClass = "".concat(_settings.pkg.prefix, "--tag-set");
-var allTagsModalSearchThreshold = 10; // Default values for props
+var allTagsModalSearchThreshold = 10;
 
+// Default values for props
 var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
   overflowAlign: 'bottom'
 };
-
 var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? defaults.align : _ref$align,
-      allTagsModalTargetIn = _ref.allTagsModalTarget,
-      className = _ref.className,
-      maxVisible = _ref.maxVisible,
-      multiline = _ref.multiline,
-      _ref$overflowAlign = _ref.overflowAlign,
-      overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-      overflowClassName = _ref.overflowClassName,
-      allTagsModalTitle = _ref.allTagsModalTitle,
-      allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-      allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-      showAllTagsLabel = _ref.showAllTagsLabel,
-      tags = _ref.tags,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    align = _ref$align === void 0 ? defaults.align : _ref$align,
+    allTagsModalTargetIn = _ref.allTagsModalTarget,
+    className = _ref.className,
+    maxVisible = _ref.maxVisible,
+    multiline = _ref.multiline,
+    _ref$overflowAlign = _ref.overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowClassName = _ref.overflowClassName,
+    allTagsModalTitle = _ref.allTagsModalTitle,
+    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
+    showAllTagsLabel = _ref.showAllTagsLabel,
+    tags = _ref.tags,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(3),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      displayCount = _useState2[0],
-      setDisplayCount = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    displayCount = _useState2[0],
+    setDisplayCount = _useState2[1];
   var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      displayedTags = _useState4[0],
-      setDisplayedTags = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    displayedTags = _useState4[0],
+    setDisplayedTags = _useState4[1];
   var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      hiddenSizingTags = _useState6[0],
-      setHiddenSizingTags = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hiddenSizingTags = _useState6[0],
+    setHiddenSizingTags = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      showAllModalOpen = _useState8[0],
-      setShowAllModalOpen = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    showAllModalOpen = _useState8[0],
+    setShowAllModalOpen = _useState8[1];
   var localTagSetRef = (0, _react.useRef)(null);
   var tagSetRef = ref || localTagSetRef;
   var sizingContainerRef = (0, _react.useRef)();
   var displayedArea = (0, _react.useRef)(null);
-
   var _useState9 = (0, _react.useState)([]),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      sizingTags = _useState10[0],
-      setSizingTags = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    sizingTags = _useState10[0],
+    setSizingTags = _useState10[1];
   var overflowTag = (0, _react.useRef)(null);
-
   var _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      allTagsModalTarget = _useState12[0],
-      setAllTagsModalTarget = _useState12[1];
-
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    allTagsModalTarget = _useState12[0],
+    setAllTagsModalTarget = _useState12[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
-
   (0, _react.useEffect)(function () {
     if (allTagsModalTargetIn) {
       setAllTagsModalTarget(allTagsModalTargetIn);
@@ -129,12 +101,12 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [allTagsModalTargetIn]);
   (0, _react.useEffect)(function () {
-    var newSizingTags = []; // create sizing tags
-
+    var newSizingTags = [];
+    // create sizing tags
     setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
       var label = _ref2.label,
-          id = _ref2.id,
-          other = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+        id = _ref2.id,
+        other = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
         className: "".concat(blockClass, "__sizing-tag"),
@@ -153,15 +125,17 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     // create visible and overflow tags
     var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
       var label = _ref3.label,
-          other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+        other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
       return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
         filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
-    }) : []; // separate out tags for the overflow
+    }) : [];
 
-    var newOverflowTags = newDisplayedTags.splice(displayCount, newDisplayedTags.length - displayCount); // add wrapper around displayed tags
+    // separate out tags for the overflow
+    var newOverflowTags = newDisplayedTags.splice(displayCount, newDisplayedTags.length - displayCount);
 
+    // add wrapper around displayed tags
     newDisplayedTags = newDisplayedTags.map(function (tag, index) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
@@ -183,17 +157,14 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var checkFullyVisibleTags = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
-    } // how many will fit?
-
+    }
 
+    // how many will fit?
     var willFit = 0;
-
     if (sizingTags.length > 0) {
       var spaceAvailable = tagSetRef.current.offsetWidth;
-
       for (var i in sizingTags) {
         var tagWidth = sizingTags[i].offsetWidth;
-
         if (spaceAvailable >= tagWidth) {
           spaceAvailable -= tagWidth;
           willFit += 1;
@@ -201,17 +172,14 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           break;
         }
       }
-
       if (willFit < sizingTags.length) {
         while (willFit > 0 && spaceAvailable < overflowTag.current.offsetWidth) {
           // Highly unlikely any useful tag is smaller
           willFit -= 1; // remove one tag
-
           spaceAvailable += sizingTags[willFit].offsetWidth;
         }
       }
     }
-
     if (willFit < 1) {
       setDisplayCount(0);
     } else {
@@ -221,37 +189,28 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
-  /* don't know how to test resize */
 
+  /* don't know how to test resize */
   /* istanbul ignore next */
-
   var handleResize = function handleResize() {
-    /* istanbul ignore next */
-    // not sure how to test resize
+    /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleTags();
   };
-  /* don't know how to test resize */
 
+  /* don't know how to test resize */
   /* istanbul ignore next */
-
-
   var handleSizerTagsResize = function handleSizerTagsResize() {
-    /* istanbul ignore next */
-    // not sure how to test resize
+    /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleTags();
   };
-
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleSizerTagsResize
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: tagSetRef
+  (0, _useResizeObserver.useResizeObserver)(tagSetRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
@@ -275,21 +234,22 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText
   }), allTagsModalTarget));
-}); // Return a placeholder if not released and not enabled by feature flag
-
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 exports.TagSet = TagSet;
 exports.TagSet = TagSet = _settings.pkg.checkComponentEnabled(TagSet, componentName);
+
 /**
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-
 var string_required_if_more_than_10_tags = (0, _propsHelper.isRequiredIf)(_propTypes.default.string, function (_ref4) {
   var tags = _ref4.tags;
   return tags && tags.length > allTagsModalSearchThreshold;
-}); // copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
+});
 
+// copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
 exports.string_required_if_more_than_10_tags = string_required_if_more_than_10_tags;
 var TYPES = {
   red: 'Red',
@@ -312,59 +272,48 @@ TagSet.propTypes = {
    * align the Tags displayed by the TagSet. Default start.
    */
   align: _propTypes.default.oneOf(['start', 'center', 'end']),
-
   /**
    * label text for the show all search. **Note: Required if more than 10 tags**
    */
   allTagsModalSearchLabel: string_required_if_more_than_10_tags,
-
   /**
    * placeholder text for the show all search. **Note: Required if more than 10 tags**
    */
   allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
-
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget: _propTypes.default.node,
-
   /**
    * title for the show all modal. **Note: Required if more than 10 tags**
    */
   allTagsModalTitle: string_required_if_more_than_10_tags,
-
   /**
    * className
    */
   className: _propTypes.default.string,
-
   /**
    * maximum visible tags
    */
   maxVisible: _propTypes.default.number,
-
   /**
    * display tags in multiple lines
    */
   multiline: _propTypes.default.bool,
-
   /**
    * overflowAlign from the standard tooltip. Default center.
    */
   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,
-
   /**
    * label for the overflow show all tags link.
    *
    * **Note:** Required if more than 10 tags
    */
   showAllTagsLabel: string_required_if_more_than_10_tags,
-
   /**
    * The tags to be shown in the TagSet. Each tag is specified as an object
    * with properties: **label**\* (required) to supply the tag content, and