@carbon/ibm-products 2.43.2-canary.271 → 2.43.2-canary.281

package/es/components/ProductiveCard/ProductiveCard.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';

package/es/components/RemoveModal/RemoveModal.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ComposedModal, ModalHeader, ModalBody, TextInput, ModalFooter, Button } from '@carbon/react';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/Saving/Saving.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as
 import { InlineLoading, Button } from '@carbon/react';
 import { ErrorOutline, Save, CheckmarkOutline, ErrorFilled } from '@carbon/react/icons';
 import React__default, { forwardRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/ScrollGradient/ScrollGradient.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg, carbon } from '../../settings.js';

package/es/components/SearchBar/SearchBar.js

@@ -8,7 +8,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { MultiSelect, Search, Button } from '@carbon/react';
 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 { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/SidePanel/SidePanel.js

@@ -12,7 +12,7 @@ import { Button, IconButton } from '@carbon/react';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import cx from 'classnames';

package/es/components/SimpleHeader/SimpleHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import React__default, { useCallback, useEffect } from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';

package/es/components/SingleAddSelect/SingleAddSelect.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import { AddSelect } from '../AddSelect/AddSelect.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';

package/es/components/StatusIcon/StatusIcon.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, InProgress, CheckmarkOutline, Pending } from '@carbon/react/icons';
 import React__default, { forwardRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/StatusIndicator/StatusIndicator.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/StatusIndicator/StatusIndicatorStep.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useState, useRef, useEffect } from 'react';
 import lottie from 'lottie-web';
 import clamp from 'lodash/clamp';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/StringFormatter/StringFormatter.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

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

@@ -16,6 +16,7 @@ export interface TagOverflowItem {
 }
 export interface TagOverflowProps {
     align?: 'start' | 'center' | 'end';
+    allTagsModalAriaLabel?: string;
     allTagsModalSearchLabel?: string;
     allTagsModalSearchPlaceholderText?: string;
     allTagsModalTarget?: ReactNode;

package/es/components/TagOverflow/TagOverflow.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useCallback, useEffect, createElement } from 'react';
 import { Tooltip, Tag } from '@carbon/react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { TYPES } from './constants.js';
 import { TagOverflowModal } from './TagOverflowModal.js';
 import { TagOverflowPopover } from './TagOverflowPopover.js';
@@ -18,7 +18,7 @@ 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", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
+var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
   _excluded4 = ["id", "label", "tagType", "onClose"];
@@ -28,6 +28,7 @@ var allTagsModalSearchThreshold = 10;
 var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$align = props.align,
     align = _props$align === void 0 ? 'start' : _props$align,
+    allTagsModalAriaLabel = props.allTagsModalAriaLabel,
     allTagsModalSearchLabel = props.allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
     allTagsModalTarget = props.allTagsModalTarget,
@@ -218,6 +219,7 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     allTags: items,
     open: showAllModalOpen,
     title: allTagsModalTitle,
+    modalAriaLabel: allTagsModalAriaLabel,
     onClose: handleModalClose,
     overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
@@ -251,6 +253,10 @@ TagOverflow.propTypes = {
    * align the Tags displayed by the TagSet. Default start.
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * aria label for all tags modal with hasScrollingContent
+   */
+  allTagsModalAriaLabel: PropTypes.string,
   /**
    * label text for the show all search. **Note: Required if more than 10 tags**
    */

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

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

package/es/components/TagOverflow/TagOverflowModal.js

@@ -7,19 +7,21 @@
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } 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", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
+var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-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: ''
 };
@@ -27,6 +29,8 @@ var TagOverflowModal = function TagOverflowModal(_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,
     overflowType = _ref.overflowType,
@@ -72,7 +76,9 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     size: "lg"
   })), /*#__PURE__*/React__default.createElement(ModalBody, {
     className: "".concat(blockClass, "__body"),
-    hasForm: true
+    hasForm: true,
+    hasScrollingContent: true,
+    "aria-label": modalAriaLabel
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
@@ -82,9 +88,9 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
       key: id,
       filter: isFilterable
     }, label);
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  })));
+  }))));
 };
 TagOverflowModal.propTypes = {
   allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -7,9 +7,9 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
+import { Popover, OperationalTag, PopoverContent, Tag, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
@@ -69,12 +69,13 @@ var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
     highContrast: true,
     onKeyDown: handleEscKeyPress,
     open: popoverOpen
-  }, /*#__PURE__*/React__default.createElement(Tag, {
+  }, /*#__PURE__*/React__default.createElement(OperationalTag, {
     onClick: function onClick() {
       return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
-    className: cx("".concat(blockClass, "__trigger"))
-  }, "+", overflowTags === null || overflowTags === void 0 ? void 0 : 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", {

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

@@ -12,6 +12,10 @@ export interface TagSetProps extends PropsWithChildren {
      * align the Tags displayed by the TagSet. Default start.
      */
     align?: Align;
+    /**
+     * aria label for all tags modal with hasScrollingContent
+     */
+    allTagsModalAriaLabel?: string;
     /**
      * label text for the show all search.
      */
@@ -50,6 +54,10 @@ export 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
      */

package/es/components/TagSet/TagSet.js

@@ -7,7 +7,7 @@
 
 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 PropTypes from '../../_virtual/index.js';
 import { Tag } from '@carbon/react';
 import { TagSetModal } from './TagSetModal.js';
 import { TagSetOverflow } from './TagSetOverflow.js';
@@ -17,7 +17,7 @@ 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", "overflowAutoAlign", "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';
@@ -45,6 +45,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
+    allTagsModalAriaLabel = _ref.allTagsModalAriaLabel,
     _ref$allTagsModalTitl = _ref.allTagsModalTitle,
     allTagsModalTitle = _ref$allTagsModalTitl === void 0 ? 'All tags' : _ref$allTagsModalTitl,
     _ref$allTagsModalSear = _ref.allTagsModalSearchLabel,
@@ -53,6 +54,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     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,
@@ -169,11 +171,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       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, overflowAutoAlign]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, onOverflowClick, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisibleCount);
@@ -244,11 +247,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
@@ -289,6 +293,10 @@ TagSet.propTypes = {
    * align the Tags displayed by the TagSet. Default start.
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * aria label for all tags modal with hasScrollingContent
+   */
+  allTagsModalAriaLabel: PropTypes.string,
   /**
    * label text for the show all search.
    */
@@ -328,6 +336,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
    */

package/es/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/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,7 +89,9 @@ 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);
@@ -93,9 +99,9 @@ var TagSetModal = function TagSetModal(_ref) {
       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')), {}, {

package/es/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
      */
@@ -37,7 +41,7 @@ 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
      */

package/es/components/TagSet/TagSetOverflow.js

@@ -7,13 +7,13 @@
 
 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 PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Popover, OperationalTag, PopoverContent, Link } from '@carbon/react';
+import { OperationalTag, Popover, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
+var _excluded = ["allTagsModalSearchThreshold", "onOverflowClick", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
 
@@ -24,6 +24,7 @@ var defaults = {
 var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
     allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
+    onOverflowClick = _ref.onOverflowClick,
     className = _ref.className,
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
@@ -40,21 +41,44 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var overflowTagContent = useRef(null);
   useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    setPopoverOpen(false);
     onShowAllClick();
   };
   var handleEscKeyPress = function handleEscKeyPress(event) {
     var key = event.key;
     if (key === 'Escape') {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   };
+  var handleOverflowClick = function handleOverflowClick() {
+    // If a custom overflow function is provided then trigger that function
+    // on clicking the overflow
+    if (onOverflowClick) {
+      onOverflowClick(overflowTags);
+    } else {
+      setPopoverOpen(!popoverOpen);
+    }
+  };
+  if (onOverflowClick) {
+    return /*#__PURE__*/React__default.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__default.createElement(OperationalTag, {
+      onClick: function onClick() {
+        return handleOverflowClick();
+      },
+      className: "".concat(blockClass, "__popover-trigger"),
+      size: size,
+      text: "+".concat(overflowTags.length)
+    }));
+  }
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: cx("".concat(blockClass), _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
@@ -69,7 +93,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React__default.createElement(OperationalTag, {
     onClick: function onClick() {
-      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
+      return setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger")),
     size: size,
@@ -112,6 +136,10 @@ TagSetOverflow.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: PropTypes.func,
   /**
    * function to execute on clicking show all
    */
@@ -140,7 +168,7 @@ TagSetOverflow.propTypes = {
   /**
    * Setter function for the popoverOpen state value
    */
-  setPopoverOpen: PropTypes.func,
+  setPopoverOpen: PropTypes.func.isRequired,
   /**
    * label for the overflow show all tags link
    */

package/es/components/Tearsheet/Tearsheet.js

@@ -10,7 +10,7 @@ import { Button } from '@carbon/react';
 import React__default from 'react';
 import { tearsheetHasCloseIcon, portalType, TearsheetShell } from './TearsheetShell.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -11,7 +11,7 @@ import { tearsheetHasCloseIcon, portalType, TearsheetShell, tearsheetShellWidePr
 import React__default from 'react';
 import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/Tearsheet/TearsheetShell.js

@@ -8,7 +8,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';