@carbon/ibm-products 2.38.0 → 2.39.0

package/es/components/NotificationsPanel/NotificationsPanel.d.ts

@@ -1,2 +1,163 @@
-export let NotificationsPanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
 import React from 'react';
+import { Link } from '@carbon/react';
+interface Link {
+    url: string;
+    text: string;
+}
+interface Data {
+    id?: string | number;
+    type?: 'error' | 'warning' | 'success' | 'informational';
+    timestamp?: Date;
+    title?: string;
+    description?: string;
+    link?: Link;
+    unread?: boolean;
+    onNotificationClick?: () => void;
+}
+interface NotificationsPanelProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Array of data for Notifications component to render
+     */
+    data: Data[];
+    /**
+     * Sets the `days ago` label text
+     */
+    daysAgoText?: (value: number) => string;
+    /**
+     * Label for Dismiss all button
+     */
+    dismissAllLabel?: string;
+    /**
+     * Label for Dismiss single notification icon button
+     */
+    dismissSingleNotificationIconDescription?: string;
+    /**
+     * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
+     */
+    doNotDisturbDefaultToggled?: boolean;
+    /**
+     * Optional: Label for Do not disturb toggle
+     */
+    doNotDisturbLabel?: string;
+    /**
+     * Sets the empty state label text when there are no notifications
+     */
+    emptyStateLabel?: string;
+    /**
+     * Sets the `hour ago` label text
+     */
+    hourAgoText?: (value: number) => string;
+    /**
+     * Sets the `hours ago` label text
+     */
+    hoursAgoText?: (value: number) => string;
+    /**
+     * Sets the `minute ago` label text
+     */
+    minuteAgoText?: (value: number) => string;
+    /**
+     * Sets the `minutes ago` label text
+     */
+    minutesAgoText?: (value: number) => string;
+    /**
+     * Sets the `month ago` label text
+     */
+    monthAgoText?: (value: number) => string;
+    /**
+     * Sets the `months ago` label text
+     */
+    monthsAgoText?: (value: number) => string;
+    /**
+     * Sets the `now` label text
+     */
+    nowText?: string;
+    /**
+     * Sets the notifications panel open state
+     */
+    onClickOutside: () => void;
+    /**
+     * Function that will dismiss all notifications
+     */
+    onDismissAllNotifications?: () => void;
+    /**
+     * Function that will dismiss a single notification
+     */
+    onDismissSingleNotification?: (prop: any) => void;
+    /**
+     * Optional: function that returns the current selected value of the disable notification toggle
+     */
+    onDoNotDisturbChange?: (prop: any) => void;
+    /**
+     * Event handler for the View all button
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Event handler for the View all button
+     */
+    onViewAllClick?: () => void;
+    /**
+     * Determines whether the notifications panel should render or not
+     */
+    open: boolean;
+    /**
+     * Sets the previous label text
+     */
+    previousLabel?: string;
+    /**
+     * Sets the `read less` label text
+     */
+    readLessLabel?: string;
+    /**
+     * Sets the `read more` label text
+     */
+    readMoreLabel?: string;
+    /**
+     * Sets the `seconds ago` label text
+     */
+    secondsAgoText?: (value: number) => string;
+    /**
+     * Sets the settings icon description text
+     */
+    settingsIconDescription?: string;
+    /**
+     * Sets the title for the Notifications panel
+     */
+    title?: string;
+    /**
+     * Sets the today label text
+     */
+    todayLabel?: string;
+    /**
+     * Sets the View all button text
+     */
+    viewAllLabel?: (value: number) => string;
+    /**
+     * Sets the `year ago` label text
+     */
+    yearAgoText?: (value: number) => string;
+    /**
+     * Sets the `years ago` label text
+     */
+    yearsAgoText?: (value: number) => string;
+    /**
+     * Sets the `Yesterday at` label text
+     */
+    yesterdayAtText?: (value: number) => string;
+    /**
+     * Sets the yesterday label text
+     */
+    yesterdayLabel?: string;
+}
+export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
+export {};

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -209,9 +209,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification.description;
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
-    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
+    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
+    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
@@ -222,14 +222,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
           size: 16
         }, props));
       },
-      iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === notification.id) {
+          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !item.showAll
+              showAll: !(item !== null && item !== void 0 && item['showAll'])
             });
           }
           return item;
@@ -237,7 +237,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification.showAll ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -246,14 +246,13 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       "aria-label": notification.title,
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
-      type: "button",
       role: "button",
       tabIndex: 0,
       onClick: function onClick() {
         return notification.onNotificationClick(notification);
       },
       onKeyDown: function onKeyDown(event) {
-        if (event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
+        if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
           return;
         }
         event.which === 13 && notification.onNotificationClick(notification);
@@ -316,7 +315,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
@@ -405,6 +404,7 @@ NotificationsPanel.propTypes = {
   /**
    * Array of data for Notifications component to render
    */
+  /**@ts-ignore*/
   data: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     type: PropTypes.oneOf(['error', 'warning', 'success', 'informational']),

package/es/components/SidePanel/SidePanel.js

@@ -346,7 +346,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       });
     }
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !doAnimateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default.createElement(Button, {
       "aria-label": navigationBackIconDescription,

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

@@ -2,4 +2,9 @@
  * TODO: A description of the component.
  */
 export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
+ * @returns null if no problems
+ */
+export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
 import React from 'react';

package/es/components/TagOverflow/TagOverflow.js

@@ -10,40 +10,67 @@ import React__default, { useRef, useState, useCallback, useEffect } from 'react'
 import PropTypes from '../../node_modules/prop-types/index.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 { Tooltip, Tag } from '@carbon/react';
 import { TYPES } from './constants.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { TagSet } from '../TagSet/TagSet.js';
+import { TagOverflowPopover } from './TagOverflowPopover.js';
+import { TagOverflowModal } from './TagOverflowModal.js';
 
-var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
+var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
   _excluded2 = ["className", "id"];
 var blockClass = "".concat(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
+var allTagsModalSearchThreshold = 10;
+
+// TODO: support prop overflowType
 
 // Default values for props
 var defaults = {
-  items: []
+  items: [],
+  align: 'start',
+  measurementOffset: 0,
+  overflowAlign: 'bottom',
+  overflowType: 'default',
+  onOverflowTagChange: function onOverflowTagChange() {}
 };
 
 /**
  * TODO: A description of the component.
  */
 var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$items = _ref.items,
+  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 = _objectWithoutProperties(_ref, _excluded);
   var localContainerRef = useRef(null);
   var containerRef = ref || localContainerRef;
   var itemRefs = useRef(null);
   var overflowRef = useRef(null);
-  // measurementOffset is the value of margin applied on each items
+  // itemOffset is the value of margin applied on each items
   // This value is required for calculating how many items will fit within the container
-  var measurementOffset = 4;
+  var itemOffset = 4;
   var overflowIndicatorWidth = 40;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -57,10 +84,25 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     overflowItems = _useState6[0],
     setOverflowItems = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showAllModalOpen = _useState8[0],
+    setShowAllModalOpen = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    popoverOpen = _useState10[0],
+    setPopoverOpen = _useState10[1];
+  var resizeElm = containingElementRef && containingElementRef.current ? containingElementRef : containerRef;
+  var handleShowAllClick = function handleShowAllClick() {
+    setShowAllModalOpen(true);
+  };
+  var handleModalClose = function handleModalClose() {
+    setShowAllModalOpen(false);
+  };
   var handleResize = function handleResize() {
-    setContainerWidth(containerRef.current.offsetWidth);
+    setContainerWidth(resizeElm.current.offsetWidth);
   };
-  useResizeObserver(containerRef, handleResize);
+  useResizeObserver(resizeElm, handleResize);
   var getMap = function getMap() {
     if (!itemRefs.current) {
       itemRefs.current = new Map();
@@ -74,6 +116,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   var getVisibleItems = useCallback(function () {
+    var _overflowRef$current;
     if (!itemRefs.current) {
       return items;
     }
@@ -82,13 +125,16 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       return _visibleItems;
     }
     var map = getMap();
-    var overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
-    var maxWidth = containerWidth - overflowContainerWidth;
+    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 maxWidth = spaceAvailable - overflowContainerWidth;
     var childrenWidth = 0;
     var maxReached = false;
     return items.reduce(function (prev, cur) {
       if (!maxReached) {
-        var itemWidth = map.get(cur.id) + measurementOffset;
+        var itemWidth = map.get(cur.id) + itemOffset;
         var fits = itemWidth + childrenWidth < maxWidth;
         if (fits) {
           childrenWidth += itemWidth;
@@ -99,7 +145,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
       return prev;
     }, []);
-  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
+  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
   var getCustomComponent = function getCustomComponent(item) {
     var className = item.className,
       id = item.id,
@@ -121,14 +167,16 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
       return {
         type: item.tagType,
-        label: item.label
+        label: item.label,
+        id: item.id
       };
     });
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
-  }, [containerWidth, items, maxVisible, getVisibleItems]);
+    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
+  }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
   }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
@@ -153,14 +201,27 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__indicator"),
     ref: overflowRef
-  }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(TagSet, {
-    tags: overflowItems,
-    allTagsModalTitle: "All tags",
-    containingElementRef: overflowRef,
-    allTagsModalSearchLabel: "Search all tags",
-    allTagsModalSearchPlaceholderText: "Search all tags",
-    showAllTagsLabel: "Show all tags"
-  })));
+  }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
+    allTagsModalSearchThreshold: allTagsModalSearchThreshold,
+    className: overflowClassName,
+    onShowAllClick: handleShowAllClick,
+    overflowTags: overflowItems,
+    overflowAlign: overflowAlign,
+    overflowType: overflowType,
+    showAllTagsLabel: showAllTagsLabel,
+    key: "tag-overflow-popover",
+    ref: overflowRef,
+    popoverOpen: popoverOpen,
+    setPopoverOpen: setPopoverOpen
+  }), /*#__PURE__*/React__default.createElement(TagOverflowModal, {
+    allTags: items,
+    open: showAllModalOpen,
+    title: allTagsModalTitle,
+    onClose: handleModalClose,
+    searchLabel: allTagsModalSearchLabel,
+    searchPlaceholder: allTagsModalSearchPlaceholderText,
+    portalTarget: allTagsModalTarget
+  }))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -171,20 +232,56 @@ TagOverflow = pkg.checkComponentEnabled(TagOverflow, componentName);
 TagOverflow.displayName = componentName;
 var tagTypes = Object.keys(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 = isRequiredIf(PropTypes.string, function (_ref2) {
+  var items = _ref2.items;
+  return items && items.length > allTagsModalSearchThreshold;
+});
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 TagOverflow.propTypes = {
+  /**
+   * align the Tags displayed by the TagSet. Default start.
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * label text for the show all search. **Note: Required if more than 10 tags**
+   */
+  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  /**
+   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   */
+  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  /**
+   * portal target for the all tags modal
+   */
+  allTagsModalTarget: PropTypes.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.
    */
   className: PropTypes.string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: PropTypes.object,
   /**
    * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
-   * **label**\* (required) to supply the item content,
-   * **id**\* (required) to uniquely identify the each item.
-   * **tagType** the type value to be passed to the Carbon Tag component
-   * if you are passing an tagComponent prop for rendering custom components,
+   * **label**\* (required) to supply the content,
+   * **id**\* (required) to uniquely identify each item.
+   * **tagType** the type value to be passed to the Carbon Tag component.
+   * Refer https://react.carbondesignsystem.com/?path=/docs/components-tag--default to see the possible values for tagType
+   *
+   * 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: PropTypes.arrayOf(PropTypes.shape({
@@ -196,14 +293,41 @@ TagOverflow.propTypes = {
    * maximum visible items
    */
   maxVisible: PropTypes.number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: PropTypes.number,
   /**
    * display items in multiple lines
    */
   multiline: PropTypes.bool,
+  /**
+   * Handler to get overflow tags
+   */
+  onOverflowTagChange: PropTypes.func,
+  /**
+   * 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']),
+  /**
+   * overflowClassName for the tooltip popup
+   */
+  overflowClassName: PropTypes.string,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  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,
   /** Component definition of the items to be rendered inside TagOverflow.
    * If this is not passed, items will be rendered as Tag component
    */
   tagComponent: PropTypes.elementType
 };
 
-export { TagOverflow };
+export { TagOverflow, string_required_if_more_than_10_tags };

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

@@ -0,0 +1,29 @@
+export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
+    [x: string]: any;
+    allTags: any;
+    className: any;
+    title: any;
+    onClose: any;
+    open: any;
+    portalTarget: any;
+    searchLabel?: string | undefined;
+    searchPlaceholder: any;
+}): any;
+export namespace TagOverflowModal {
+    export namespace propTypes {
+        let allTags: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+        }> | null | undefined)[]>;
+        let className: PropTypes.Requireable<string>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        let open: PropTypes.Requireable<boolean>;
+        let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let searchLabel: PropTypes.Requireable<string>;
+        let searchPlaceholder: PropTypes.Requireable<string>;
+        let title: PropTypes.Requireable<string>;
+    }
+    export { componentName as displayName };
+}
+import PropTypes from 'prop-types';
+declare const componentName: "TagOverflowModal";
+export {};