@carbon/ibm-products 2.43.2-canary.33 → 2.43.2-canary.331

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -6,101 +6,108 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import React__default, { forwardRef, useRef } from 'react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
+import { Popover, OperationalTag, PopoverContent, DismissibleTag, Tag, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
+var _excluded = ["allTagsModalSearchThreshold", "autoAlign", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
   _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-popover");
-
-// Default values for props
-var defaults = {
-  allTagsModalSearchThreshold: 10,
-  overflowAlign: 'bottom'
-};
-var TagOverflowPopover = /*#__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,
-    overflowType = _ref.overflowType,
-    showAllTagsLabel = _ref.showAllTagsLabel,
-    popoverOpen = _ref.popoverOpen,
-    setPopoverOpen = _ref.setPopoverOpen,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var localRef = useRef();
+var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _overflowTags$length;
+  var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
+    autoAlign = props.autoAlign,
+    className = props.className,
+    onShowAllClick = props.onShowAllClick,
+    overflowAlign = props.overflowAlign,
+    overflowTags = props.overflowTags,
+    overflowType = props.overflowType,
+    showAllTagsLabel = props.showAllTagsLabel,
+    popoverOpen = props.popoverOpen,
+    setPopoverOpen = props.setPopoverOpen,
+    rest = _objectWithoutProperties(props, _excluded);
+  var localRef = useRef(null);
   var overflowTagContent = useRef(null);
   useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
     evt.stopPropagation();
     evt.preventDefault();
-    setPopoverOpen(false);
-    onShowAllClick();
+    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    onShowAllClick === null || onShowAllClick === void 0 || onShowAllClick();
   };
-  var handleEscKeyPress = function handleEscKeyPress(event) {
-    var key = event.key;
+  var handleEscKeyPress = function handleEscKeyPress(evt) {
+    var key = evt.key;
     if (key === 'Escape') {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   };
   var getOverflowPopoverItems = function getOverflowPopoverItems() {
-    return overflowTags.filter(function (_, index) {
-      return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+    var thresh = allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0;
+    return overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.filter(function (_, index) {
+      return (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) > thresh ? index < thresh : index <= thresh;
     });
   };
+  var visibleItems = getOverflowPopoverItems();
+  var hasItems = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0;
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-    "aria-hidden": overflowTags.length === 0,
-    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    "aria-hidden": (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0,
+    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0)),
     ref: ref || localRef
   }), /*#__PURE__*/React__default.createElement(Popover, {
     align: overflowAlign,
+    autoAlign: autoAlign,
     className: cx(className, "".concat(blockClass, "__el")),
     dropShadow: true,
     highContrast: true,
     onKeyDown: handleEscKeyPress,
-    open: popoverOpen
-  }, /*#__PURE__*/React__default.createElement(Tag, {
+    open: popoverOpen || false
+  }, /*#__PURE__*/React__default.createElement(OperationalTag, {
     onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
+      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
-    className: cx("".concat(blockClass, "__trigger"))
-  }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
+    className: cx("".concat(blockClass, "__trigger")),
+    text: "+".concat(overflowTags.length)
+  }), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default.createElement("ul", {
     className: "".concat(blockClass, "__tag-list")
-  }, getOverflowPopoverItems().map(function (_ref2) {
-    var label = _ref2.label,
-      id = _ref2.id,
-      tagType = _ref2.tagType,
-      filter = _ref2.filter,
-      _onClose = _ref2.onClose,
-      other = _objectWithoutProperties(_ref2, _excluded2);
+  }, hasItems && visibleItems.map(function (_ref) {
+    var label = _ref.label,
+      id = _ref.id,
+      tagType = _ref.tagType,
+      filter = _ref.filter,
+      _onClose = _ref.onClose,
+      other = _objectWithoutProperties(_ref, _excluded2);
     var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
-    var isFilterable = overflowType === 'tag' ? filter : false;
+    var isFilterable = overflowType === 'tag' && (typeof _onClose === 'function' || filter);
+    var tag;
+    if (isFilterable) {
+      tag = /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+        onClose: function onClose() {
+          return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+        },
+        type: typeValue,
+        text: label
+      }));
+    } else {
+      tag = /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+        type: typeValue
+      }), label);
+    }
     return /*#__PURE__*/React__default.createElement("li", {
       className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: id
-    }, overflowType === 'tag' ? /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      onClose: function onClose() {
-        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
-      },
-      type: typeValue,
-      filter: isFilterable
-    }), label) : label);
-  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
+    }, overflowType === 'tag' ? tag : label);
+  })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
     onClick: handleShowAllTagsClick,
@@ -113,6 +120,10 @@ TagOverflowPopover.propTypes = {
    * count of overflowTags over which a modal is offered
    */
   allTagsModalSearchThreshold: PropTypes.number,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * className
    */
@@ -128,6 +139,7 @@ TagOverflowPopover.propTypes = {
   /**
    * tags shown in overflow
    */
+  //@ts-ignore
   overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * Type of rendering displayed inside of the tag overflow component

package/es/components/TagOverflow/index.d.ts

@@ -1 +1,8 @@
-export { TagOverflow } from "./TagOverflow";
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * 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 { TagOverflow } from './TagOverflow';
+export type { TagOverflowProps } from './TagOverflow';

package/es/components/TagSet/TagSet.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { TagBaseProps } from '@carbon/type';
 type Align = 'start' | 'center' | 'end';
 type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
@@ -6,18 +6,26 @@ type OverflowType = 'default' | 'tag';
 type TagType = {
     label: string;
     type?: keyof typeof tagTypes;
+    /**
+     * @deprecated Use the `onClose` function instead to render as a DismissibleTag
+     */
+    filter?: boolean;
 } & TagBaseProps;
-interface TagSetProps extends PropsWithChildren {
+export interface TagSetProps extends PropsWithChildren {
     /**
      * align the Tags displayed by the TagSet. Default start.
      */
     align?: Align;
     /**
-     * label text for the show all search. **Note: Required if more than 10 tags**
+     * aria label for all tags modal with hasScrollingContent
+     */
+    allTagsModalAriaLabel?: string;
+    /**
+     * label text for the show all search.
      */
     allTagsModalSearchLabel?: string;
     /**
-     * placeholder text for the show all search. **Note: Required if more than 10 tags**
+     * placeholder text for the show all search.
      */
     allTagsModalSearchPlaceholderText?: string;
     /**
@@ -25,7 +33,7 @@ interface TagSetProps extends PropsWithChildren {
      */
     allTagsModalTarget?: ReactNode;
     /**
-     * title for the show all modal. **Note: Required if more than 10 tags**
+     * title for the show all modal.
      */
     allTagsModalTitle?: string;
     /**
@@ -50,6 +58,10 @@ interface TagSetProps extends PropsWithChildren {
      * display tags in multiple lines
      */
     multiline?: boolean;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * Handler to get overflow tags
      */
@@ -58,6 +70,10 @@ interface TagSetProps extends PropsWithChildren {
      * overflowAlign from the standard tooltip. Default center.
      */
     overflowAlign?: OverflowAlign;
+    /**
+     * 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;
     /**
      * overflowClassName for the tooltip popup
      */
@@ -68,10 +84,8 @@ interface TagSetProps extends PropsWithChildren {
     overflowType?: OverflowType;
     /**
      * label for the overflow show all tags link.
-     *
-     * **Note:** Required if more than 10 tags
      */
-    showAllTagsLabel: string;
+    showAllTagsLabel?: 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

package/es/components/TagSet/TagSet.js

@@ -5,21 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from 'classnames';
-import { TagSetOverflow } from './TagSetOverflow.js';
+import PropTypes from '../../_virtual/index.js';
+import { Tag, DismissibleTag } from '@carbon/react';
 import { TagSetModal } from './TagSetModal.js';
-import { Tag } from '@carbon/react';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { TagSetOverflow } from './TagSetOverflow.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
-  _excluded2 = ["label", "id"],
-  _excluded3 = ["label", "onClose"];
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+  _excluded2 = ["label", "id", "filter", "onClose"],
+  _excluded3 = ["label", "onClose", "filter"];
 var componentName = 'TagSet';
 var blockClass = "".concat(pkg.prefix, "--tag-set");
 var allTagsModalSearchThreshold = 10;
@@ -32,14 +32,6 @@ 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];
-// }
-
 var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'start' : _ref$align,
@@ -47,15 +39,22 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     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,
@@ -88,19 +87,29 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = useRef(null);
-  var _useState11 = useState(false),
+  var _useState11 = useState(0),
     _useState12 = _slicedToArray(_useState11, 2),
-    popoverOpen = _useState12[0],
-    setPopoverOpen = _useState12[1];
+    maxVisibleCount = _useState12[0],
+    setMaxVisibleCount = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    popoverOpen = _useState14[0],
+    setPopoverOpen = _useState14[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
+  useEffect(function () {
+    var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
+    setMaxVisibleCount(maxCount);
+  }, [maxVisible, tags]);
   useEffect(function () {
     var newSizingTags = [];
     // create sizing tags
     setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
       var label = _ref2.label,
         id = _ref2.id,
+        filter = _ref2.filter,
+        onClose = _ref2.onClose,
         other = _objectWithoutProperties(_ref2, _excluded2);
       return /*#__PURE__*/React__default.createElement("div", {
         key: index,
@@ -110,7 +119,10 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
             newSizingTags[index] = el;
           }
         }
-      }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      }, typeof onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+        "data-original-id": id,
+        text: label
+      })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
         "data-original-id": id
       }), label));
@@ -124,16 +136,27 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [displayCount]);
   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,
+        filter = _ref3.filter,
         other = _objectWithoutProperties(_ref3, _excluded3);
+      if (index == tags.length - 1 && other.size) {
+        size = other.size;
+      }
+      if (typeof _onClose === 'function' || filter) {
+        return /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+          key: "displayed-tag-".concat(index),
+          onClose: function onClose() {
+            return handleTagOnClose(_onClose, index);
+          },
+          text: label
+        }));
+      }
       return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-        key: "displayed-tag-".concat(index),
-        onClose: function onClose() {
-          return handleTagOnClose(_onClose, index);
-        }
+        key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
 
@@ -149,23 +172,26 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
     newDisplayedTags.push( /*#__PURE__*/React__default.createElement(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 = useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible || 3);
+      return setDisplayCount(maxVisibleCount);
     }
 
     // how many will fit?
@@ -195,12 +221,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     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]);
   useEffect(function () {
     checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
+  }, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
 
   /* don't know how to test resize */
   /* istanbul ignore next */
@@ -233,11 +259,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React__default.createElement("div", {
     className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), /*#__PURE__*/React__default.createElement(TagSetModal, {
+  }, displayedTags)), !onOverflowClick && /*#__PURE__*/React__default.createElement(TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    modalAriaLabel: allTagsModalAriaLabel,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -279,21 +306,25 @@ TagSet.propTypes = {
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * aria label for all tags modal with hasScrollingContent
    */
-  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  allTagsModalAriaLabel: PropTypes.string,
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
-  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  allTagsModalSearchLabel: PropTypes.string,
+  /**
+   * placeholder text for the show all search.
+   */
+  allTagsModalSearchPlaceholderText: PropTypes.string,
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget: PropTypes.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: PropTypes.string,
   /**
    * className
    */
@@ -317,6 +348,10 @@ TagSet.propTypes = {
    * display tags in multiple lines
    */
   multiline: PropTypes.bool,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: PropTypes.func,
   /**
    * Handler to get overflow tags
    */
@@ -325,6 +360,10 @@ TagSet.propTypes = {
    * 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']),
+  /**
+   * 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: PropTypes.bool,
   /**
    * overflowClassName for the tooltip popup
    */
@@ -335,10 +374,8 @@ TagSet.propTypes = {
   overflowType: PropTypes.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: PropTypes.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

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

@@ -5,10 +5,11 @@ import { Tag } from '@carbon/react';
 interface TagType {
     label: string;
 }
-type AllTags = TagType[] & Omit<React.ComponentProps<Tag>, 'filter'>[];
+type AllTags = TagType[] & Omit<React.ComponentProps<typeof 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/es/components/TagSet/TagSetModal.js

@@ -7,20 +7,22 @@
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Tag, ComposedModal, ModalHeader, Search, ModalBody } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 
-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(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: ''
 };
@@ -28,6 +30,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,
@@ -85,17 +89,18 @@ var TagSetModal = function TagSetModal(_ref) {
     size: "lg"
   })), /*#__PURE__*/React__default.createElement(ModalBody, {
     className: "".concat(blockClass, "__body"),
-    hasForm: true
+    hasForm: true,
+    hasScrollingContent: true,
+    "aria-label": modalAriaLabel
   }, filteredModalTags.map(function (_ref2, index) {
     var label = _ref2.label,
       other = _objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      filter: false,
       key: "all-tags-".concat(index)
     }), label);
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  })));
+  }))));
 };
 TagSetModal.propTypes = {
   allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {