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

package/lib/components/TagSet/TagSet.js

@@ -1,386 +0,0 @@
-"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 _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"];
-
-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 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);
-
-  var _useState = (0, _react.useState)(3),
-      _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];
-
-  var _useState5 = (0, _react.useState)([]),
-      _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];
-
-  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];
-
-  var overflowTag = (0, _react.useRef)(null);
-
-  var _useState11 = (0, _react.useState)(null),
-      _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);
-    } else {
-      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
-        setAllTagsModalTarget(document.body);
-      }
-    }
-  }, [allTagsModalTargetIn]);
-  (0, _react.useEffect)(function () {
-    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);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: "".concat(blockClass, "__sizing-tag"),
-        ref: function ref(el) {
-          return newSizingTags[index] = el;
-        }
-      }, /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
-        // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
-      }), label));
-    }) : []);
-    setSizingTags(newSizingTags);
-  }, [tags]);
-  (0, _react.useEffect)(function () {
-    // 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);
-      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
-
-    newDisplayedTags = newDisplayedTags.map(function (tag, index) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: "".concat(blockClass, "__displayed-tag")
-      }, tag);
-    });
-    newDisplayedTags.push( /*#__PURE__*/_react.default.createElement(_TagSetOverflow.TagSetOverflow, {
-      allTagsModalSearchThreshold: allTagsModalSearchThreshold,
-      className: overflowClassName,
-      onShowAllClick: handleShowAllClick,
-      overflowTags: newOverflowTags,
-      overflowAlign: overflowAlign,
-      showAllTagsLabel: showAllTagsLabel,
-      key: "displayed-tag-overflow",
-      ref: overflowTag
-    }));
-    setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, showAllTagsLabel, tags]);
-  var checkFullyVisibleTags = (0, _react.useCallback)(function () {
-    if (multiline) {
-      return setDisplayCount(maxVisible);
-    } // 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;
-        } else {
-          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 {
-      setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
-    }
-  }, [maxVisible, multiline, sizingTags, tagSetRef]);
-  (0, _react.useEffect)(function () {
-    checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
-  /* don't know how to test resize */
-
-  /* istanbul ignore next */
-
-  var handleResize = function handleResize() {
-    /* istanbul ignore next */
-    // not sure how to test resize
-    checkFullyVisibleTags();
-  };
-  /* don't know how to test resize */
-
-  /* istanbul ignore next */
-
-
-  var handleSizerTagsResize = function handleSizerTagsResize() {
-    /* istanbul ignore next */
-    // not sure how to test resize
-    checkFullyVisibleTags();
-  };
-
-  var handleModalClose = function handleModalClose() {
-    setShowAllModalOpen(false);
-  };
-
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
-  });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: tagSetRef
-  });
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)([blockClass, className]),
-    ref: tagSetRef
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(["".concat(blockClass, "__space"), "".concat(blockClass, "__space--align-").concat(align)])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__tag-container ").concat(blockClass, "__tag-container--hidden"),
-    "aria-hidden": true,
-    ref: sizingContainerRef
-  }, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
-    ref: displayedArea
-  }, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
-    return children;
-  })( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
-    allTags: tags,
-    open: showAllModalOpen,
-    title: allTagsModalTitle,
-    onClose: handleModalClose,
-    searchLabel: allTagsModalSearchLabel,
-    searchPlaceholder: allTagsModalSearchPlaceholderText
-  }), allTagsModalTarget));
-}); // 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
-
-exports.string_required_if_more_than_10_tags = string_required_if_more_than_10_tags;
-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'
-};
-var tagTypes = Object.keys(TYPES);
-TagSet.types = tagTypes;
-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
-   * other properties will be passed to the Carbon Tag component, such as
-   * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
-   *
-   * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
-   */
-  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)
-  })))
-};
-TagSet.displayName = componentName;
-var _default = TagSet;
-exports.default = _default;

package/lib/components/TagSet/TagSetModal.js

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TagSetModal = 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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react2 = require("@carbon/react");
-
-var _settings = require("../../settings");
-
-var _propsHelper = require("../../global/js/utils/props-helper");
-
-var _excluded = ["allTags", "className", "title", "onClose", "open", "searchLabel", "searchPlaceholder"],
-    _excluded2 = ["label"];
-
-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 = 'TagSetModal';
-var blockClass = "".concat(_settings.pkg.prefix, "--tag-set-modal"); // Default values for props
-
-var defaults = {
-  // marked as required by TagSet if needed, default used to satisfy <Search /> component
-  searchLabel: ''
-};
-
-var TagSetModal = function TagSetModal(_ref) {
-  var allTags = _ref.allTags,
-      className = _ref.className,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      open = _ref.open,
-      _ref$searchLabel = _ref.searchLabel,
-      searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
-      searchPlaceholder = _ref.searchPlaceholder,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filteredModalTags = _useState2[0],
-      setFilteredModalTags = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      search = _useState4[0],
-      setSearch = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    var newFilteredModalTags = [];
-
-    if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
-      } else {
-        var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$dataSearch$toLoc, _tag$label, _tag$label$toLocaleLo;
-
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 ? void 0 : (_tag$dataSearch$toLoc = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch$toLoc === void 0 ? void 0 : _tag$dataSearch$toLoc.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 ? void 0 : (_tag$label$toLocaleLo = _tag$label.toLocaleLowerCase()) === null || _tag$label$toLocaleLo === void 0 ? void 0 : _tag$label$toLocaleLo.indexOf(lCaseSearch);
-
-          if (dataSearch > -1 || labelSearch > -1) {
-            newFilteredModalTags.push(tag);
-          }
-        });
-      }
-    }
-
-    setFilteredModalTags(newFilteredModalTags);
-  }, [allTags, open, search]);
-
-  var handleSearch = function handleSearch(ev) {
-    setSearch(ev.target.value || '');
-  };
-
-  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(_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(_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(_react2.Tag, (0, _extends2.default)({}, other, {
-      filter: false,
-      key: "all-tags-".concat(index)
-    }), label);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__fade")
-  }));
-};
-
-exports.TagSetModal = TagSetModal;
-TagSetModal.propTypes = {
-  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,
-  onClose: _propTypes.default.func,
-  open: _propTypes.default.bool,
-  searchLabel: _propTypes.default.string,
-  searchPlaceholder: _propTypes.default.string,
-  title: _propTypes.default.string
-};
-TagSetModal.displayName = componentName;

package/lib/components/TagSet/TagSetOverflow.js

@@ -1,155 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TagSetOverflow = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-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 _react2 = require("@carbon/react");
-
-var _hooks = require("../../global/js/hooks");
-
-var _settings = require("../../settings");
-
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "showAllTagsLabel"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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 componentName = 'TagSetOverflow';
-var blockClass = "".concat(_settings.pkg.prefix, "--tag-set-overflow"); // Default values for props
-
-var defaults = {
-  allTagsModalSearchThreshold: 10,
-  overflowAlign: 'bottom'
-};
-
-var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
-      allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
-      className = _ref.className,
-      onShowAllClick = _ref.onShowAllClick,
-      _ref$overflowAlign = _ref.overflowAlign,
-      overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-      overflowTags = _ref.overflowTags,
-      showAllTagsLabel = _ref.showAllTagsLabel,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      popoverOpen = _useState2[0],
-      setPopoverOpen = _useState2[1];
-
-  var localRef = (0, _react.useRef)();
-  var overflowTagContent = (0, _react.useRef)(null);
-  (0, _hooks.useClickOutside)(ref || localRef, function () {
-    if (popoverOpen) {
-      setPopoverOpen(false);
-    }
-  });
-
-  var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    setPopoverOpen(false);
-    onShowAllClick();
-  };
-
-  var handleEscKeyPress = function handleEscKeyPress(event) {
-    var key = event.key;
-
-    if (key === 'Escape') {
-      setPopoverOpen(false);
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
-    "aria-hidden": overflowTags.length === 0,
-    className: (0, _classnames.default)("".concat(blockClass), (0, _defineProperty2.default)({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
-    ref: ref || localRef
-  }), /*#__PURE__*/_react.default.createElement(_react2.Popover, {
-    align: overflowAlign,
-    className: (0, _classnames.default)(className, "".concat(blockClass, "__tagset-popover")),
-    dropShadow: true,
-    highContrast: true,
-    onKeyDown: handleEscKeyPress,
-    open: popoverOpen
-  }, /*#__PURE__*/_react.default.createElement(_react2.Tag, {
-    onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
-    },
-    className: (0, _classnames.default)("".concat(blockClass, "__popover-trigger"))
-  }, "+", overflowTags.length), /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: overflowTagContent,
-    className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "".concat(blockClass, "__tag-list")
-  }, overflowTags.filter(function (_, index) {
-    return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
-  }).map(function (tag, index) {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
-      key: index
-    }, /*#__PURE__*/_react.default.cloneElement(tag, {
-      filter: false
-    }));
-  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_react2.Link, {
-    className: "".concat(blockClass, "__show-all-tags-link"),
-    href: "",
-    onClick: handleShowAllTagsClick,
-    role: "button"
-  }, showAllTagsLabel)))));
-});
-
-exports.TagSetOverflow = TagSetOverflow;
-TagSetOverflow.displayName = componentName;
-TagSetOverflow.propTypes = {
-  /**
-   * count of overflowTags over which a modal is offered
-   */
-  allTagsModalSearchThreshold: _propTypes.default.number,
-
-  /**
-   * className
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * function to execute on clicking show all
-   */
-  onShowAllClick: _propTypes.default.func.isRequired,
-
-  /**
-   * overflowAlign from the standard tooltip
-   */
-  overflowAlign: _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
-
-  /**
-   * tags shown in overflow
-   */
-  overflowTags: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-
-  /**
-   * label for the overflow show all tags link
-   */
-  showAllTagsLabel: _propTypes.default.string
-};