@carbon/ibm-products 2.51.0 → 2.52.0

package/lib/components/Saving/Saving.js

@@ -11,7 +11,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -9,7 +9,7 @@
 
 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 devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/SearchBar/SearchBar.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/SidePanel/SidePanel.js

@@ -14,7 +14,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var variants = require('./motion/variants.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var constants = require('./constants.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var cx = require('classnames');

package/lib/components/SimpleHeader/SimpleHeader.js

@@ -8,7 +8,7 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var AddSelect = require('../AddSelect/AddSelect.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');

package/lib/components/StatusIcon/StatusIcon.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var icons = require('@carbon/react/icons');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -9,7 +9,7 @@
 
 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 devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -9,7 +9,7 @@
 
 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 devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -11,7 +11,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var lottie = require('lottie-web');
 var clamp = require('lodash/clamp');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/components/StringFormatter/StringFormatter.js

@@ -9,7 +9,7 @@
 
 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 devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');

package/lib/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/lib/components/TagOverflow/TagOverflow.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var constants = require('./constants.js');
 var TagOverflowModal = require('./TagOverflowModal.js');
 var TagOverflowPopover = require('./TagOverflowPopover.js');
@@ -20,7 +20,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../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"];
@@ -30,6 +30,7 @@ var allTagsModalSearchThreshold = 10;
 exports.TagOverflow = /*#__PURE__*/React.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,
@@ -220,6 +221,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     allTags: items,
     open: showAllModalOpen,
     title: allTagsModalTitle,
+    modalAriaLabel: allTagsModalAriaLabel,
     onClose: handleModalClose,
     overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
@@ -253,6 +255,10 @@ exports.TagOverflow.propTypes = {
    * align the Tags displayed by the TagSet. Default start.
    */
   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**
    */

package/lib/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/lib/components/TagOverflow/TagOverflowModal.js

@@ -9,19 +9,21 @@
 
 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');
 
-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(settings.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: ''
 };
@@ -29,6 +31,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,
@@ -74,7 +78,9 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     size: "lg"
   })), /*#__PURE__*/React.createElement(react.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,
@@ -84,9 +90,9 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
       key: id,
       filter: isFilterable
     }, label);
-  })), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  })));
+  }))));
 };
 TagOverflowModal.propTypes = {
   allTags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -9,7 +9,7 @@
 
 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');
@@ -71,12 +71,13 @@ var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     highContrast: true,
     onKeyDown: handleEscKeyPress,
     open: popoverOpen
-  }, /*#__PURE__*/React.createElement(react.Tag, {
+  }, /*#__PURE__*/React.createElement(react.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.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__trigger")),
+    text: "+".concat(overflowTags.length)
+  }), /*#__PURE__*/React.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
     ref: overflowTagContent,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React.createElement("ul", {

package/lib/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/lib/components/TagSet/TagSet.js

@@ -9,7 +9,7 @@
 
 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 react = require('@carbon/react');
 var TagSetModal = require('./TagSetModal.js');
 var TagSetOverflow = require('./TagSetOverflow.js');
@@ -19,7 +19,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../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';
@@ -47,6 +47,7 @@ exports.TagSet = /*#__PURE__*/React.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,
@@ -55,6 +56,7 @@ exports.TagSet = /*#__PURE__*/React.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,
@@ -171,11 +173,12 @@ exports.TagSet = /*#__PURE__*/React.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 = React.useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisibleCount);
@@ -246,11 +249,12 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
     className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), /*#__PURE__*/React.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
@@ -291,6 +295,10 @@ exports.TagSet.propTypes = {
    * align the Tags displayed by the TagSet. Default start.
    */
   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.
    */
@@ -330,6 +338,10 @@ exports.TagSet.propTypes = {
    * display tags in multiple lines
    */
   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
    */

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

@@ -9,20 +9,22 @@
 
 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');
 
-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: ''
 };
@@ -30,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,
@@ -87,7 +91,9 @@ var TagSetModal = function TagSetModal(_ref) {
     size: "lg"
   })), /*#__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);
@@ -95,9 +101,9 @@ var TagSetModal = function TagSetModal(_ref) {
       filter: false,
       key: "all-tags-".concat(index)
     }), label);
-  })), /*#__PURE__*/React.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')), {}, {

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
      */
@@ -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/lib/components/TagSet/TagSetOverflow.js

@@ -9,13 +9,13 @@
 
 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 useClickOutside = require('../../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(settings.pkg.prefix, "--tag-set-overflow");
 
@@ -26,6 +26,7 @@ var defaults = {
 var TagSetOverflow = /*#__PURE__*/React.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,
@@ -42,21 +43,44 @@ var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var overflowTagContent = React.useRef(null);
   useClickOutside.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.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
+      "aria-hidden": overflowTags.length === 0,
+      className: cx("".concat(blockClass), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+      ref: ref || localRef
+    }), /*#__PURE__*/React.createElement(react.OperationalTag, {
+      onClick: function onClick() {
+        return handleOverflowClick();
+      },
+      className: "".concat(blockClass, "__popover-trigger"),
+      size: size,
+      text: "+".concat(overflowTags.length)
+    }));
+  }
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: cx("".concat(blockClass), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
@@ -71,7 +95,7 @@ var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React.createElement(react.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,
@@ -114,6 +138,10 @@ TagSetOverflow.propTypes = {
    * className
    */
   className: index.default.string,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: index.default.func,
   /**
    * function to execute on clicking show all
    */
@@ -142,7 +170,7 @@ TagSetOverflow.propTypes = {
   /**
    * Setter function for the popoverOpen state value
    */
-  setPopoverOpen: index.default.func,
+  setPopoverOpen: index.default.func.isRequired,
   /**
    * label for the overflow show all tags link
    */

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -58,6 +58,13 @@ export interface TearsheetProps extends PropsWithChildren {
      * this prop to either true or false.
      */
     hasCloseIcon?: boolean;
+    /**
+     * The content for the header actions area, displayed alongside the title in
+     * the header area of the tearsheet. This is typically a drop-down, or a set
+     * of small buttons, or similar. NB the headerActions is only applicable for
+     * wide tearsheets.
+     */
+    headerActions?: ReactNode;
     /**
      * The content for the influencer section of the tearsheet, displayed
      * alongside the main content. This is typically a menu, or filter, or

package/lib/components/Tearsheet/Tearsheet.js

@@ -12,7 +12,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var TearsheetShell = require('./TearsheetShell.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -146,6 +146,13 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore */
   hasCloseIcon: index.default.bool,
+  /**
+   * The content for the header actions area, displayed alongside the title in
+   * the header area of the tearsheet. This is typically a drop-down, or a set
+   * of small buttons, or similar. NB the headerActions is only applicable for
+   * wide tearsheets.
+   */
+  headerActions: index.default.element,
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -13,7 +13,7 @@ var TearsheetShell = require('./TearsheetShell.js');
 var React = require('react');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 

package/lib/components/Tearsheet/TearsheetShell.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');

package/lib/components/Toolbar/Toolbar.js

@@ -9,7 +9,7 @@
 
 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 getFocusableElements = require('../../global/js/utils/getFocusableElements.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');