@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/lib/components/TagSet/TagSet.js

@@ -7,26 +7,19 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
-var cx = require('classnames');
-var TagSetOverflow = require('./TagSetOverflow.js');
-var TagSetModal = require('./TagSetModal.js');
+var index = require('../../_virtual/index.js');
 var react = require('@carbon/react');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var TagSetModal = require('./TagSetModal.js');
+var TagSetOverflow = require('./TagSetOverflow.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 var componentName = 'TagSet';
@@ -41,30 +34,29 @@ var defaults = {
   overflowType: 'default',
   onOverflowTagChange: function onOverflowTagChange() {}
 };
-
-// interface TagType extends TagBaseProps
-// {
-//   label: string;
-//   // we duplicate this prop to improve the DocGen
-//   type?: typeof tagTypes[number];
-// }
-
-exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'start' : _ref$align,
     allTagsModalTarget = _ref.allTagsModalTarget,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
+    overflowAutoAlign = _ref.overflowAutoAlign,
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    showAllTagsLabel = _ref.showAllTagsLabel,
+    allTagsModalAriaLabel = _ref.allTagsModalAriaLabel,
+    _ref$allTagsModalTitl = _ref.allTagsModalTitle,
+    allTagsModalTitle = _ref$allTagsModalTitl === void 0 ? 'All tags' : _ref$allTagsModalTitl,
+    _ref$allTagsModalSear = _ref.allTagsModalSearchLabel,
+    allTagsModalSearchLabel = _ref$allTagsModalSear === void 0 ? 'Search all tags' : _ref$allTagsModalSear,
+    _ref$allTagsModalSear2 = _ref.allTagsModalSearchPlaceholderText,
+    allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
+    _ref$showAllTagsLabel = _ref.showAllTagsLabel,
+    showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
+    onOverflowClick = _ref.onOverflowClick,
     tags = _ref.tags,
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
@@ -97,13 +89,21 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = React.useRef(null);
-  var _useState11 = React.useState(false),
+  var _useState11 = React.useState(0),
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    popoverOpen = _useState12[0],
-    setPopoverOpen = _useState12[1];
+    maxVisibleCount = _useState12[0],
+    setMaxVisibleCount = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+    popoverOpen = _useState14[0],
+    setPopoverOpen = _useState14[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
+  React.useEffect(function () {
+    var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
+    setMaxVisibleCount(maxCount);
+  }, [maxVisible, tags]);
   React.useEffect(function () {
     var newSizingTags = [];
     // create sizing tags
@@ -111,7 +111,7 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
       var label = _ref2.label,
         id = _ref2.id,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-      return /*#__PURE__*/React__default["default"].createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index,
         className: "".concat(blockClass, "__sizing-tag"),
         ref: function ref(el) {
@@ -119,7 +119,7 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
             newSizingTags[index] = el;
           }
         }
-      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      }, /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         // ensure id is not duplicated
         "data-original-id": id
       }), label));
@@ -133,12 +133,16 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     }
   }, [displayCount]);
   React.useEffect(function () {
+    var size = 'md';
     // create visible and overflow tags
     var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
       var label = _ref3.label,
         _onClose = _ref3.onClose,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
-      return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      if (index == tags.length - 1 && other.size) {
+        size = other.size;
+      }
+      return /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         key: "displayed-tag-".concat(index),
         onClose: function onClose() {
           return handleTagOnClose(_onClose, index);
@@ -151,30 +155,33 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
 
     // add wrapper around displayed tags
     newDisplayedTags = newDisplayedTags.map(function (tag, index) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: index,
         className: "".concat(blockClass, "__displayed-tag")
       }, tag);
     });
-    newDisplayedTags.push( /*#__PURE__*/React__default["default"].createElement(TagSetOverflow.TagSetOverflow, {
+    newDisplayedTags.push( /*#__PURE__*/React.createElement(TagSetOverflow.TagSetOverflow, {
       allTagsModalSearchThreshold: allTagsModalSearchThreshold,
+      overflowAutoAlign: overflowAutoAlign,
       className: overflowClassName,
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
       overflowType: overflowType,
       showAllTagsLabel: showAllTagsLabel,
+      size: size,
       key: "displayed-tag-overflow",
       ref: overflowTag,
       popoverOpen: popoverOpen,
+      onOverflowClick: onOverflowClick,
       setPopoverOpen: setPopoverOpen
     }));
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, onOverflowClick, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = React.useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible || 3);
+      return setDisplayCount(maxVisibleCount);
     }
 
     // how many will fit?
@@ -204,12 +211,12 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     if (willFit < 1) {
       setDisplayCount(0);
     } else {
-      setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
+      setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
+  }, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
   React.useEffect(function () {
     checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
+  }, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
 
   /* don't know how to test resize */
   /* istanbul ignore next */
@@ -230,23 +237,24 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
   useResizeObserver.useResizeObserver(sizingContainerRef, handleSizerTagsResize);
   var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
   useResizeObserver.useResizeObserver(resizeOption, handleResize);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"]([blockClass, className]),
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx([blockClass, className]),
     ref: tagSetRef
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(blockClass, "__space"), "".concat(blockClass, "__space--align-").concat(align)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, devtools.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__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
+  }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), /*#__PURE__*/React__default["default"].createElement(TagSetModal.TagSetModal, {
+  }, displayedTags)), !onOverflowClick && /*#__PURE__*/React.createElement(TagSetModal.TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    modalAriaLabel: allTagsModalAriaLabel,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -260,7 +268,7 @@ exports.TagSet = settings.pkg.checkComponentEnabled(exports.TagSet, componentNam
  * 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 = propsHelper.isRequiredIf(index["default"].string, function (_ref4) {
+var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index.default.string, function (_ref4) {
   var tags = _ref4.tags;
   return tags && tags.length > allTagsModalSearchThreshold;
 });
@@ -286,68 +294,78 @@ exports.TagSet.propTypes = {
   /**
    * align the Tags displayed by the TagSet. Default start.
    */
-  align: index["default"].oneOf(['start', 'center', 'end']),
+  align: index.default.oneOf(['start', 'center', 'end']),
+  /**
+   * aria label for all tags modal with hasScrollingContent
+   */
+  allTagsModalAriaLabel: index.default.string,
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
-  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  allTagsModalSearchLabel: index.default.string,
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * placeholder text for the show all search.
    */
-  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  allTagsModalSearchPlaceholderText: index.default.string,
   /**
    * portal target for the all tags modal
    */
-  allTagsModalTarget: index["default"].node,
+  allTagsModalTarget: index.default.node,
   /**
-   * title for the show all modal. **Note: Required if more than 10 tags**
+   * title for the show all modal.
    */
-  allTagsModalTitle: string_required_if_more_than_10_tags,
+  allTagsModalTitle: index.default.string,
   /**
    * className
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Optional ref for custom resize container to measure available space
    * Default will measure the available space of the TagSet container itself.
    */
   /**@ts-ignore */
-  containingElementRef: index["default"].object,
+  containingElementRef: index.default.object,
   /**
    * maximum visible tags
    */
-  maxVisible: index["default"].number,
+  maxVisible: index.default.number,
   /**
    * Specify offset amount for measure available space, only used when `containingElementSelector`
    * is also provided
    */
-  measurementOffset: index["default"].number,
+  measurementOffset: index.default.number,
   /**
    * display tags in multiple lines
    */
-  multiline: index["default"].bool,
+  multiline: index.default.bool,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: index.default.func,
   /**
    * Handler to get overflow tags
    */
-  onOverflowTagChange: index["default"].func,
+  onOverflowTagChange: index.default.func,
   /**
    * overflowAlign from the standard tooltip. Default center.
    */
-  overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  overflowAlign: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: index.default.bool,
   /**
    * overflowClassName for the tooltip popup
    */
-  overflowClassName: index["default"].string,
+  overflowClassName: index.default.string,
   /**
    * Type of rendering displayed inside of the tag overflow component
    */
-  overflowType: index["default"].oneOf(['default', 'tag']),
+  overflowType: index.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
-   *
-   * **Note:** Required if more than 10 tags
    */
-  showAllTagsLabel: string_required_if_more_than_10_tags,
+  showAllTagsLabel: index.default.string,
   /**
    * 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
@@ -356,10 +374,10 @@ exports.TagSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Tag.propTypes), {}, {
-    label: index["default"].string.isRequired,
+  tags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Tag.propTypes), {}, {
+    label: index.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
-    type: index["default"].oneOf(tagTypes)
+    type: index.default.oneOf(tagTypes)
   })))
 };
 exports.TagSet.displayName = componentName;

package/lib/components/TagSet/TagSetModal.d.ts

@@ -9,6 +9,7 @@ type AllTags = TagType[] & Omit<React.ComponentProps<Tag>, 'filter'>[];
 interface TagSetModalProps {
     allTags?: AllTags;
     className?: string;
+    modalAriaLabel?: string;
     onClose?: () => void;
     open?: boolean;
     portalTarget?: ReactNode;
@@ -17,7 +18,7 @@ interface TagSetModalProps {
     title?: string;
 }
 export declare const TagSetModal: {
-    ({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagSetModalProps): any;
+    ({ allTags, className, title, modalAriaLabel, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagSetModalProps): any;
     propTypes: {
         allTags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Validator<string>;

package/lib/components/TagSet/TagSetModal.js

@@ -7,29 +7,24 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
+var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
   _excluded2 = ["label"];
 var componentName = 'TagSetModal';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-set-modal");
 
 // Default values for props
 var defaults = {
+  // required for accessibility if using hasScrollingContent
+  modalAriaLabel: 'List of all tags',
   // marked as required by TagSet if needed, default used to satisfy <Search /> component
   searchLabel: ''
 };
@@ -37,6 +32,8 @@ var TagSetModal = function TagSetModal(_ref) {
   var allTags = _ref.allTags,
     className = _ref.className,
     title = _ref.title,
+    _ref$modalAriaLabel = _ref.modalAriaLabel,
+    modalAriaLabel = _ref$modalAriaLabel === void 0 ? defaults.modalAriaLabel : _ref$modalAriaLabel,
     onClose = _ref.onClose,
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
@@ -75,48 +72,50 @@ var TagSetModal = function TagSetModal(_ref) {
   var handleSearch = function handleSearch(ev) {
     setSearch(ev.target.value || '');
   };
-  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return renderPortalUse( /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     containerClassName: "".concat(blockClass, "__container"),
-    className: cx__default["default"](className, "".concat(blockClass)),
+    className: cx(className, "".concat(blockClass)),
     size: "sm",
     open: open,
     onClose: onClose
-  }), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
+  }), /*#__PURE__*/React.createElement(react.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     closeModal: onClose,
     title: title
-  }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
+  }, /*#__PURE__*/React.createElement(react.Search, {
     "data-modal-primary-focus": true,
     className: "".concat(blockClass, "__search"),
     labelText: searchLabel,
     placeholder: searchPlaceholder,
     onChange: handleSearch,
     size: "lg"
-  })), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
+  })), /*#__PURE__*/React.createElement(react.ModalBody, {
     className: "".concat(blockClass, "__body"),
-    hasForm: true
+    hasForm: true,
+    hasScrollingContent: true,
+    "aria-label": modalAriaLabel
   }, filteredModalTags.map(function (_ref2, index) {
     var label = _ref2.label,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+    return /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
       filter: false,
       key: "all-tags-".concat(index)
     }), label);
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  })));
+  }))));
 };
 TagSetModal.propTypes = {
-  allTags: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
-    label: index["default"].string.isRequired
+  allTags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
+    label: index.default.string.isRequired
   }))),
-  className: index["default"].string,
-  onClose: index["default"].func,
-  open: index["default"].bool,
-  portalTarget: index["default"].node,
-  searchLabel: index["default"].string,
-  searchPlaceholder: index["default"].string,
-  title: index["default"].string
+  className: index.default.string,
+  onClose: index.default.func,
+  open: index.default.bool,
+  portalTarget: index.default.node,
+  searchLabel: index.default.string,
+  searchPlaceholder: index.default.string,
+  title: index.default.string
 };
 TagSetModal.displayName = componentName;
 

package/lib/components/TagSet/TagSetOverflow.d.ts

@@ -10,6 +10,10 @@ interface TagSetOverflowProps {
      * className
      */
     className?: string;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * function to execute on clicking show all
      */
@@ -26,6 +30,10 @@ interface TagSetOverflowProps {
      * Type of rendering displayed inside of the tag overflow component
      */
     overflowType?: OverflowType;
+    /**
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+     */
+    overflowAutoAlign?: boolean;
     /**
      * Open state of the popover
      */
@@ -33,11 +41,15 @@ interface TagSetOverflowProps {
     /**
      * Setter function for the popoverOpen state value
      */
-    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    setPopoverOpen: (value: boolean) => void;
     /**
      * label for the overflow show all tags link
      */
     showAllTagsLabel?: string;
+    /**
+     * Size of the overflow tag
+     */
+    size?: string;
 }
 export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
     children?: React.ReactNode;