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

package/lib/components/TagOverflow/TagOverflow.js

@@ -7,72 +7,51 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var react = require('@carbon/react');
+var index = require('../../_virtual/index.js');
+var constants = require('./constants.js');
+var TagOverflowModal = require('./TagOverflowModal.js');
+var TagOverflowPopover = require('./TagOverflowPopover.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var constants = require('./constants.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-var TagOverflowPopover = require('./TagOverflowPopover.js');
-var TagOverflowModal = require('./TagOverflowModal.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
+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"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
-
-// Default values for props
-var defaults = {
-  items: [],
-  align: 'start',
-  measurementOffset: 0,
-  overflowAlign: 'bottom',
-  overflowType: 'default',
-  onOverflowTagChange: function onOverflowTagChange() {}
-};
-
-/**
- * TODO: A description of the component.
- */
-exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? defaults.items : _ref$items,
-    tagComponent = _ref.tagComponent,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaults.align : _ref$align,
-    showAllTagsLabel = _ref.showAllTagsLabel,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    allTagsModalTarget = _ref.allTagsModalTarget,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    className = _ref.className,
-    containingElementRef = _ref.containingElementRef,
-    _ref$measurementOffse = _ref.measurementOffset,
-    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
-    maxVisible = _ref.maxVisible,
-    multiline = _ref.multiline,
-    _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-    overflowClassName = _ref.overflowClassName,
-    _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
-    _ref$onOverflowTagCha = _ref.onOverflowTagChange,
-    onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+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,
+    allTagsModalTitle = props.allTagsModalTitle,
+    autoAlign = props.autoAlign,
+    className = props.className,
+    containingElementRef = props.containingElementRef,
+    items = props.items,
+    maxVisible = props.maxVisible,
+    _props$measurementOff = props.measurementOffset,
+    measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
+    multiline = props.multiline,
+    _props$overflowAlign = props.overflowAlign,
+    overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
+    overflowClassName = props.overflowClassName,
+    _props$overflowType = props.overflowType,
+    overflowType = _props$overflowType === void 0 ? 'default' : _props$overflowType,
+    onOverflowTagChange = props.onOverflowTagChange,
+    showAllTagsLabel = props.showAllTagsLabel,
+    tagComponent = props.tagComponent,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var localContainerRef = React.useRef(null);
   var containerRef = ref || localContainerRef;
   var itemRefs = React.useRef(null);
@@ -109,7 +88,9 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     setShowAllModalOpen(false);
   };
   var handleResize = function handleResize() {
-    setContainerWidth(resizeElm.current.offsetWidth);
+    if (typeof resizeElm !== 'function' && resizeElm.current) {
+      setContainerWidth(resizeElm.current.offsetWidth);
+    }
   };
   useResizeObserver.useResizeObserver(resizeElm, handleResize);
   var getMap = function getMap() {
@@ -125,7 +106,6 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   };
   var getVisibleItems = React.useCallback(function () {
-    var _overflowRef$current;
     if (!itemRefs.current) {
       return items;
     }
@@ -137,13 +117,13 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
     var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
     var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
-    var overflowContainerWidth = ((_overflowRef$current = overflowRef.current) === null || _overflowRef$current === void 0 ? void 0 : _overflowRef$current.offsetWidth) > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
+    var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
     var maxWidth = spaceAvailable - overflowContainerWidth;
     var childrenWidth = 0;
     var maxReached = false;
     return items.reduce(function (prev, cur) {
       if (!maxReached) {
-        var itemWidth = map.get(cur.id) + itemOffset;
+        var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
         var fits = itemWidth + childrenWidth < maxWidth;
         if (fits) {
           childrenWidth += itemWidth;
@@ -154,13 +134,14 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       }
       return prev;
     }, []);
-  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
-  var getCustomComponent = function getCustomComponent(item) {
+  }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
+  var getCustomComponent = function getCustomComponent(item, tagComponent) {
     var className = item.className,
       id = item.id,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
-    return /*#__PURE__*/React__default["default"].createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
-      className: cx__default["default"]("".concat(blockClass, "__item"), className),
+    return /*#__PURE__*/React.createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
+      key: id,
+      className: cx("".concat(blockClass, "__item"), className),
       ref: function ref(node) {
         return itemRefHandler(id, node);
       }
@@ -173,9 +154,9 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
     }
     var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
-      var tagType = _ref2.tagType,
-        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded3);
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref) {
+      var tagType = _ref.tagType,
+        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded3);
       return _rollupPluginBabelHelpers.objectSpread2({
         type: tagType
       }, other);
@@ -183,21 +164,20 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
-  }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
   var handleTagOnClose = React.useCallback(function (onClose, index) {
     onClose === null || onClose === void 0 || onClose();
-    if (index <= visibleItems.length - 1) {
+    if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
       setPopoverOpen(false);
     }
   }, [visibleItems]);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
-    ref: containerRef,
-    role: "main"
-  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    ref: containerRef
+  }, devtools.getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {
-      return getCustomComponent(item);
+      return getCustomComponent(item, tagComponent);
     } else {
       var id = item.id,
         label = item.label,
@@ -205,15 +185,15 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
         _onClose = item.onClose,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
-      return /*#__PURE__*/React__default["default"].createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         ref: function ref(node) {
           return itemRefHandler(id, node);
         },
         key: id
-      }, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+      }, /*#__PURE__*/React.createElement(react.Tooltip, {
         align: overflowAlign,
         label: label
-      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      }, /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
         onClose: function onClose() {
@@ -221,10 +201,10 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
         }
       }), label)));
     }
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__indicator"),
     ref: overflowRef
-  }, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.TagOverflowPopover, {
+  }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TagOverflowPopover.TagOverflowPopover, {
     allTagsModalSearchThreshold: allTagsModalSearchThreshold,
     className: overflowClassName,
     onShowAllClick: handleShowAllClick,
@@ -235,11 +215,13 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     key: "tag-overflow-popover",
     ref: overflowRef,
     popoverOpen: popoverOpen,
-    setPopoverOpen: setPopoverOpen
-  }), /*#__PURE__*/React__default["default"].createElement(TagOverflowModal.TagOverflowModal, {
+    setPopoverOpen: setPopoverOpen,
+    autoAlign: autoAlign
+  }), /*#__PURE__*/React.createElement(TagOverflowModal.TagOverflowModal, {
     allTags: items,
     open: showAllModalOpen,
     title: allTagsModalTitle,
+    modalAriaLabel: allTagsModalAriaLabel,
     onClose: handleModalClose,
     overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
@@ -260,9 +242,9 @@ var tagTypes = Object.keys(constants.TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref3) {
-  var items = _ref3.items;
-  return items && items.length > allTagsModalSearchThreshold;
+var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index.default.string, function (_ref2) {
+  var items = _ref2.items;
+  return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
 });
 
 // The types and DocGen commentary for the component props,
@@ -272,7 +254,11 @@ exports.TagOverflow.propTypes = {
   /**
    * align the Tags displayed by the TagSet. Default start.
    */
-  align: index["default"].oneOf(['start', 'center', 'end']),
+  align: index.default.oneOf(['start', 'center', 'end']),
+  /**
+   * aria label for all tags modal with hasScrollingContent
+   */
+  allTagsModalAriaLabel: index.default.string,
   /**
    * label text for the show all search. **Note: Required if more than 10 tags**
    */
@@ -284,20 +270,19 @@ exports.TagOverflow.propTypes = {
   /**
    * portal target for the all tags modal
    */
-  allTagsModalTarget: index["default"].node,
+  allTagsModalTarget: index.default.node,
   /**
    * title for the show all modal. **Note: Required if more than 10 tags**
    */
   allTagsModalTitle: string_required_if_more_than_10_tags,
   /**
-   * Provide an optional class to be applied to the containing node.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
-  className: index["default"].string,
+  autoAlign: index.default.bool,
   /**
-   * Optional ref for custom resize container to measure available space
-   * Default will measure the available space of the TagSet container itself.
+   * Provide an optional class to be applied to the containing node.
    */
-  containingElementRef: index["default"].object,
+  className: index.default.string,
   /**
    * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
    * **label**\* (required) to supply the content,
@@ -308,40 +293,41 @@ exports.TagOverflow.propTypes = {
    * If you want to render a custom component, pass it as tagComponent prop and
    * then pass the props required for your custom component as the properties of item object
    */
-  items: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].string.isRequired,
-    label: index["default"].string.isRequired,
-    tagType: index["default"].oneOf(tagTypes)
+  //@ts-ignore
+  items: index.default.arrayOf(index.default.shape({
+    id: index.default.string.isRequired,
+    label: index.default.string.isRequired,
+    tagType: index.default.oneOf(tagTypes)
   }).isRequired),
   /**
    * maximum visible items
    */
-  maxVisible: index["default"].number,
+  maxVisible: index.default.number,
   /**
    * Specify offset amount for measure available space, only used when `containingElementSelector`
    * is also provided
    */
-  measurementOffset: index["default"].number,
+  measurementOffset: index.default.number,
   /**
    * display items in multiple lines
    */
-  multiline: index["default"].bool,
+  multiline: index.default.bool,
   /**
    * Handler to get overflow tags
    */
-  onOverflowTagChange: index["default"].func,
+  onOverflowTagChange: index.default.func,
   /**
    * overflowAlign from the standard tooltip. Default center.
    */
-  overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  overflowAlign: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
   /**
    * overflowClassName for the tooltip popup
    */
-  overflowClassName: index["default"].string,
+  overflowClassName: index.default.string,
   /**
    * Type of rendering displayed inside of the tag overflow component
    */
-  overflowType: index["default"].oneOf(['default', 'tag']),
+  overflowType: index.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *
@@ -351,7 +337,8 @@ exports.TagOverflow.propTypes = {
   /** Component definition of the items to be rendered inside TagOverflow.
    * If this is not passed, items will be rendered as Tag component
    */
-  tagComponent: index["default"].elementType
+  //@ts-ignore
+  tagComponent: index.default.elementType
 };
 
 exports.string_required_if_more_than_10_tags = string_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

@@ -7,29 +7,23 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label", "id", "filter"];
+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: ''
 };
@@ -37,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,
@@ -62,53 +58,54 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   var handleSearch = function handleSearch(evt) {
     setSearch(evt.target.value || '');
   };
-  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return renderPortalUse( /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     containerClassName: "".concat(blockClass, "__container"),
-    className: cx__default["default"](className, blockClass),
+    className: cx(className, blockClass),
     size: "sm",
     "aria-label": "Search all",
     open: open,
     onClose: onClose
-  }), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
+  }), /*#__PURE__*/React.createElement(react.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     closeModal: onClose,
     title: title
-  }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
+  }, /*#__PURE__*/React.createElement(react.Search, {
     "data-modal-primary-focus": true,
     className: "".concat(blockClass, "__search"),
     labelText: searchLabel,
     placeholder: searchPlaceholder,
     onChange: handleSearch,
     size: "lg"
-  })), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
+  })), /*#__PURE__*/React.createElement(react.ModalBody, {
     className: "".concat(blockClass, "__body"),
-    hasForm: true
+    hasForm: true,
+    hasScrollingContent: true,
+    "aria-label": modalAriaLabel
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
-      filter = _ref2.filter,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+      filter = _ref2.filter;
     var isFilterable = overflowType === 'tag' ? filter : false;
-    return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+    return /*#__PURE__*/React.createElement(react.Tag, {
       key: id,
       filter: isFilterable
-    }), label);
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, label);
+  }), /*#__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')), {}, {
-    label: index["default"].string.isRequired
+  allTags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
+    label: index.default.string.isRequired
   }))),
-  className: index["default"].string,
-  onClose: index["default"].func,
-  open: index["default"].bool,
-  overflowType: index["default"].oneOf(['default', 'tag']),
-  portalTarget: index["default"].node,
-  searchLabel: index["default"].string,
-  searchPlaceholder: index["default"].string,
-  title: index["default"].string
+  className: index.default.string,
+  onClose: index.default.func,
+  open: index.default.bool,
+  overflowType: index.default.oneOf(['default', 'tag']),
+  portalTarget: index.default.node,
+  searchLabel: index.default.string,
+  searchPlaceholder: index.default.string,
+  title: index.default.string
 };
 TagOverflowModal.displayName = componentName;
 

package/lib/components/TagOverflow/TagOverflowPopover.d.ts

@@ -1,2 +1,15 @@
-export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { TagOverflowItem } from './TagOverflow';
+export interface Props {
+    allTagsModalSearchThreshold?: number;
+    autoAlign?: boolean;
+    className?: string;
+    onShowAllClick: () => void;
+    overflowAlign?: string;
+    overflowTags: TagOverflowItem[];
+    overflowType?: string;
+    popoverOpen?: boolean;
+    setPopoverOpen?: (x: boolean) => void;
+    showAllTagsLabel?: string;
+}
+export declare const TagOverflowPopover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;