@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.35

package/es/components/TagSet/TagSet.js

@@ -0,0 +1,324 @@
+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", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+  _excluded2 = ["label", "id"],
+  _excluded3 = ["label"];
+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) { _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, 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, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { TagSetOverflow } from './TagSetOverflow';
+import { TagSetModal } from './TagSetModal';
+import { Tag } from '@carbon/react';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
+import { pkg } from '../../settings';
+var componentName = 'TagSet';
+var blockClass = "".concat(pkg.prefix, "--tag-set");
+var allTagsModalSearchThreshold = 10;
+
+// Default values for props
+var defaults = {
+  align: 'start',
+  // allTagsModalTarget: document.body,
+  overflowAlign: 'bottom'
+};
+export var TagSet = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(3),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayCount = _useState2[0],
+    setDisplayCount = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    displayedTags = _useState4[0],
+    setDisplayedTags = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hiddenSizingTags = _useState6[0],
+    setHiddenSizingTags = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showAllModalOpen = _useState8[0],
+    setShowAllModalOpen = _useState8[1];
+  var localTagSetRef = useRef(null);
+  var tagSetRef = ref || localTagSetRef;
+  var sizingContainerRef = useRef();
+  var displayedArea = useRef(null);
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    sizingTags = _useState10[0],
+    setSizingTags = _useState10[1];
+  var overflowTag = useRef(null);
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    allTagsModalTarget = _useState12[0],
+    setAllTagsModalTarget = _useState12[1];
+  var handleShowAllClick = function handleShowAllClick() {
+    setShowAllModalOpen(true);
+  };
+  useEffect(function () {
+    if (allTagsModalTargetIn) {
+      setAllTagsModalTarget(allTagsModalTargetIn);
+    } else {
+      if (pkg.isFeatureEnabled('default-portal-target-body')) {
+        setAllTagsModalTarget(document.body);
+      }
+    }
+  }, [allTagsModalTargetIn]);
+  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 = _objectWithoutProperties(_ref2, _excluded2);
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: "".concat(blockClass, "__sizing-tag"),
+        ref: function ref(el) {
+          return newSizingTags[index] = el;
+        }
+      }, /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
+        // ensure id is not duplicated
+        "data-original-id": id,
+        filter: false
+      }), label));
+    }) : []);
+    setSizingTags(newSizingTags);
+  }, [tags]);
+  useEffect(function () {
+    // create visible and overflow tags
+    var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
+      var label = _ref3.label,
+        other = _objectWithoutProperties(_ref3, _excluded3);
+      return /*#__PURE__*/React.createElement(Tag, _extends({}, 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.createElement("div", {
+        key: index,
+        className: "".concat(blockClass, "__displayed-tag")
+      }, tag);
+    });
+    newDisplayedTags.push( /*#__PURE__*/React.createElement(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 = 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]);
+  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);
+  };
+  useResizeObserver(sizingContainerRef, {
+    callback: handleSizerTagsResize
+  });
+  useResizeObserver(tagSetRef, {
+    callback: handleResize
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx([blockClass, className]),
+    ref: tagSetRef
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(blockClass, "__space"), "".concat(blockClass, "__space--align-").concat(align)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__tag-container ").concat(blockClass, "__tag-container--hidden"),
+    "aria-hidden": true,
+    ref: sizingContainerRef
+  }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
+    ref: displayedArea
+  }, displayedTags)), (allTagsModalTarget ? createPortal : function (children) {
+    return children;
+  })( /*#__PURE__*/React.createElement(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
+TagSet = pkg.checkComponentEnabled(TagSet, componentName);
+
+/**
+ * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
+ * @returns null if no problems
+ */
+export var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref4) {
+  var tags = _ref4.tags;
+  return tags && tags.length > allTagsModalSearchThreshold;
+});
+
+// copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
+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.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.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.string,
+  /**
+   * maximum visible tags
+   */
+  maxVisible: PropTypes.number,
+  /**
+   * display tags in multiple lines
+   */
+  multiline: PropTypes.bool,
+  /**
+   * overflowAlign from the standard tooltip. Default center.
+   */
+  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,
+  /**
+   * 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.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+    label: PropTypes.string.isRequired,
+    // we duplicate this prop to improve the DocGen
+    type: PropTypes.oneOf(tagTypes)
+  })))
+};
+TagSet.displayName = componentName;
+export default TagSet;

package/es/components/TagSet/TagSetModal.js

@@ -0,0 +1,112 @@
+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 = ["allTags", "className", "title", "onClose", "open", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label"];
+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) { _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. 2021, 2020
+//
+// 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, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ComposedModal, ModalHeader, ModalBody, Search, Tag } from '@carbon/react';
+import { pkg } from '../../settings';
+import { prepareProps } from '../../global/js/utils/props-helper';
+var componentName = 'TagSetModal';
+var blockClass = "".concat(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: ''
+};
+export 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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredModalTags = _useState2[0],
+    setFilteredModalTags = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  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.createElement(ComposedModal, _extends({}, rest, {
+    containerClassName: "".concat(blockClass, "__container"),
+    className: cx(className, "".concat(blockClass)),
+    size: "sm",
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(ModalHeader, {
+    className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
+    title: title
+  }, /*#__PURE__*/React.createElement(Search, {
+    "data-modal-primary-focus": true,
+    className: "".concat(blockClass, "__search"),
+    labelText: searchLabel,
+    placeholder: searchPlaceholder,
+    onChange: handleSearch,
+    size: "lg"
+  })), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "".concat(blockClass, "__body"),
+    hasForm: true
+  }, filteredModalTags.map(function (_ref2, index) {
+    var label = _ref2.label,
+      other = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
+      filter: false,
+      key: "all-tags-".concat(index)
+    }), label);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__fade")
+  }));
+};
+TagSetModal.propTypes = {
+  allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+    label: PropTypes.string.isRequired
+  }))),
+  className: PropTypes.string,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+  searchLabel: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  title: PropTypes.string
+};
+TagSetModal.displayName = componentName;

package/es/components/TagSet/TagSetOverflow.js

@@ -0,0 +1,123 @@
+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", "overflowTags", "showAllTagsLabel"];
+//
+// 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, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link, Tag, Popover, PopoverContent } from '@carbon/react';
+import { useClickOutside } from '../../global/js/hooks';
+import { pkg } from '../../settings';
+var componentName = 'TagSetOverflow';
+var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
+
+// Default values for props
+var defaults = {
+  allTagsModalSearchThreshold: 10,
+  overflowAlign: 'bottom'
+};
+export var TagSetOverflow = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverOpen = _useState2[0],
+    setPopoverOpen = _useState2[1];
+  var localRef = useRef();
+  var overflowTagContent = useRef(null);
+  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.createElement("span", _extends({}, rest, {
+    "aria-hidden": overflowTags.length === 0,
+    className: cx("".concat(blockClass), _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    ref: ref || localRef
+  }), /*#__PURE__*/React.createElement(Popover, {
+    align: overflowAlign,
+    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", {
+    className: "".concat(blockClass, "__tag-list")
+  }, overflowTags.filter(function (_, index) {
+    return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+  }).map(function (tag, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "".concat(blockClass, "__tag-item"),
+      key: index
+    }, /*#__PURE__*/React.cloneElement(tag, {
+      filter: false
+    }));
+  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React.createElement(Link, {
+    className: "".concat(blockClass, "__show-all-tags-link"),
+    href: "",
+    onClick: handleShowAllTagsClick,
+    role: "button"
+  }, showAllTagsLabel)))));
+});
+TagSetOverflow.displayName = componentName;
+TagSetOverflow.propTypes = {
+  /**
+   * count of overflowTags over which a modal is offered
+   */
+  allTagsModalSearchThreshold: PropTypes.number,
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * function to execute on clicking show all
+   */
+  onShowAllClick: PropTypes.func.isRequired,
+  /**
+   * overflowAlign from the standard tooltip
+   */
+  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
+   */
+  overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * label for the overflow show all tags link
+   */
+  showAllTagsLabel: PropTypes.string
+};

package/es/components/TagSet/constants.js

@@ -0,0 +1,21 @@
+//
+// 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/TagSet/index.js

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+export { TagSet } from './TagSet';