@carbon/ibm-products 2.38.0 → 2.39.0

package/lib/components/TagOverflow/TagOverflow.js

@@ -14,45 +14,72 @@ var React = require('react');
 var index = require('../../node_modules/prop-types/index.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 TagSet = require('../TagSet/TagSet.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 = ["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(settings.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.
  */
 exports.TagOverflow = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var localContainerRef = React.useRef(null);
   var containerRef = ref || localContainerRef;
   var itemRefs = React.useRef(null);
   var overflowRef = React.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 = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -66,10 +93,25 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     overflowItems = _useState6[0],
     setOverflowItems = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    showAllModalOpen = _useState8[0],
+    setShowAllModalOpen = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _rollupPluginBabelHelpers.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.useResizeObserver(containerRef, handleResize);
+  useResizeObserver.useResizeObserver(resizeElm, handleResize);
   var getMap = function getMap() {
     if (!itemRefs.current) {
       itemRefs.current = new Map();
@@ -83,6 +125,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   };
   var getVisibleItems = React.useCallback(function () {
+    var _overflowRef$current;
     if (!itemRefs.current) {
       return items;
     }
@@ -91,13 +134,16 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       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;
@@ -108,7 +154,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       }
       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,
@@ -130,14 +176,16 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    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) {
@@ -162,14 +210,27 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__indicator"),
     ref: overflowRef
-  }, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(TagSet.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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.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["default"].createElement(TagOverflowModal.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
@@ -180,20 +241,56 @@ exports.TagOverflow = settings.pkg.checkComponentEnabled(exports.TagOverflow, co
 exports.TagOverflow.displayName = componentName;
 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 (_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.
 exports.TagOverflow.propTypes = {
+  /**
+   * align the Tags displayed by the TagSet. Default start.
+   */
+  align: index["default"].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: 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.
    */
   className: index["default"].string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: index["default"].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: index["default"].arrayOf(index["default"].shape({
@@ -205,12 +302,41 @@ exports.TagOverflow.propTypes = {
    * maximum visible items
    */
   maxVisible: index["default"].number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: index["default"].number,
   /**
    * display items in multiple lines
    */
   multiline: index["default"].bool,
+  /**
+   * Handler to get overflow tags
+   */
+  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']),
+  /**
+   * overflowClassName for the tooltip popup
+   */
+  overflowClassName: index["default"].string,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: index["default"].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: 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

@@ -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 {};

package/lib/components/TagOverflow/TagOverflowModal.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'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 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", "portalTarget", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label", "id"];
+var componentName = 'TagOverflowModal';
+var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
+
+// Default values for props
+var defaults = {
+  // marked as required by TagSet if needed, default used to satisfy <Search /> component
+  searchLabel: ''
+};
+var TagOverflowModal = function TagOverflowModal(_ref) {
+  var allTags = _ref.allTags,
+    className = _ref.className,
+    title = _ref.title,
+    onClose = _ref.onClose,
+    open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
+    _ref$searchLabel = _ref.searchLabel,
+    searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
+    searchPlaceholder = _ref.searchPlaceholder,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(''),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  var getFilteredItems = function getFilteredItems() {
+    var newFilteredModalTags = [];
+    if (open) {
+      if (search === '') {
+        newFilteredModalTags = allTags.slice(0);
+      } else {
+        var lCaseSearch = search.toLocaleLowerCase();
+        allTags.forEach(function (tag) {
+          var _tag$dataSearch, _tag$label;
+          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
+          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
+          if (dataSearch > -1 || labelSearch > -1) {
+            newFilteredModalTags.push(tag);
+          }
+        });
+      }
+    }
+    return newFilteredModalTags;
+  };
+  var handleSearch = function handleSearch(evt) {
+    setSearch(evt.target.value || '');
+  };
+  return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    containerClassName: "".concat(blockClass, "__container"),
+    className: cx__default["default"](className, blockClass),
+    size: "sm",
+    "aria-label": "Search all",
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
+    className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
+    title: title
+  }, /*#__PURE__*/React__default["default"].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, {
+    className: "".concat(blockClass, "__body"),
+    hasForm: true
+  }, getFilteredItems().map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      filter: false,
+      key: id
+    }), label);
+  })), /*#__PURE__*/React__default["default"].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
+  }))),
+  className: index["default"].string,
+  onClose: index["default"].func,
+  open: index["default"].bool,
+  portalTarget: index["default"].node,
+  searchLabel: index["default"].string,
+  searchPlaceholder: index["default"].string,
+  title: index["default"].string
+};
+TagOverflowModal.displayName = componentName;
+
+exports.TagOverflowModal = TagOverflowModal;

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

@@ -0,0 +1,2 @@
+export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'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 cx = require('classnames');
+var react = require('@carbon/react');
+var settings = require('../../settings.js');
+var useClickOutside = require('../../global/js/hooks/useClickOutside.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 = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var componentName = 'TagOverflowPopover';
+var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
+
+// Default values for props
+var defaults = {
+  allTagsModalSearchThreshold: 10,
+  overflowAlign: 'bottom'
+};
+var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
+    allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
+    className = _ref.className,
+    onShowAllClick = _ref.onShowAllClick,
+    _ref$overflowAlign = _ref.overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
+    showAllTagsLabel = _ref.showAllTagsLabel,
+    popoverOpen = _ref.popoverOpen,
+    setPopoverOpen = _ref.setPopoverOpen,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var localRef = React.useRef();
+  var overflowTagContent = React.useRef(null);
+  useClickOutside.useClickOutside(ref || localRef, function () {
+    if (popoverOpen) {
+      setPopoverOpen(false);
+    }
+  });
+  var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    setPopoverOpen(false);
+    onShowAllClick();
+  };
+  var handleEscKeyPress = function handleEscKeyPress(event) {
+    var key = event.key;
+    if (key === 'Escape') {
+      setPopoverOpen(false);
+    }
+  };
+  var getOverflowPopoverItems = function getOverflowPopoverItems() {
+    return overflowTags.filter(function (_, index) {
+      return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-hidden": overflowTags.length === 0,
+    className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    ref: ref || localRef
+  }), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
+    align: overflowAlign,
+    className: cx__default["default"](className, "".concat(blockClass, "__el")),
+    dropShadow: true,
+    highContrast: true,
+    onKeyDown: handleEscKeyPress,
+    open: popoverOpen
+  }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
+    onClick: function onClick() {
+      return setPopoverOpen(!popoverOpen);
+    },
+    className: cx__default["default"]("".concat(blockClass, "__trigger"))
+  }, "+", overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: overflowTagContent,
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "".concat(blockClass, "__tag-list")
+  }, getOverflowPopoverItems().map(function (tag) {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: cx__default["default"]("".concat(blockClass, "__tag-item"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
+      key: tag.id
+    }, tag.label);
+  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
+    className: "".concat(blockClass, "__show-all-tags-link"),
+    href: "",
+    onClick: handleShowAllTagsClick,
+    role: "button"
+  }, showAllTagsLabel)))));
+});
+TagOverflowPopover.displayName = componentName;
+TagOverflowPopover.propTypes = {
+  /**
+   * count of overflowTags over which a modal is offered
+   */
+  allTagsModalSearchThreshold: index["default"].number,
+  /**
+   * className
+   */
+  className: index["default"].string,
+  /**
+   * function to execute on clicking show all
+   */
+  onShowAllClick: index["default"].func.isRequired,
+  /**
+   * overflowAlign from the standard tooltip
+   */
+  overflowAlign: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * tags shown in overflow
+   */
+  overflowTags: index["default"].arrayOf(index["default"].object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: index["default"].oneOf(['default', 'tag']),
+  /**
+   * Open state of the popover
+   */
+  popoverOpen: index["default"].bool,
+  /**
+   * Setter function for the popoverOpen state value
+   */
+  setPopoverOpen: index["default"].func,
+  /**
+   * label for the overflow show all tags link
+   */
+  showAllTagsLabel: index["default"].string
+};
+
+exports.TagOverflowPopover = TagOverflowPopover;

package/lib/components/index.d.ts

@@ -54,6 +54,7 @@ export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
+export { GetStartedCard } from "./GetStartedCard";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";

package/lib/global/js/package-settings.d.ts

@@ -96,6 +96,7 @@ declare namespace defaults {
         let FilterPanelLabel: boolean;
         let FilterPanelSearch: boolean;
         let ConditionBuilder: boolean;
+        let GetStartedCard: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

package/lib/global/js/package-settings.js

@@ -99,6 +99,7 @@ var defaults = {
     FilterPanelLabel: false,
     FilterPanelSearch: false,
     ConditionBuilder: false,
+    GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/lib/index.js

@@ -136,6 +136,7 @@ var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/Filter
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
 var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
 var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
+var GetStartedCard = require('./components/GetStartedCard/GetStartedCard.js');
 
 
 
@@ -576,3 +577,7 @@ Object.defineProperty(exports, 'ConditionBuilder', {
 	enumerable: true,
 	get: function () { return ConditionBuilder.ConditionBuilder; }
 });
+Object.defineProperty(exports, 'GetStartedCard', {
+	enumerable: true,
+	get: function () { return GetStartedCard.GetStartedCard; }
+});

package/lib/settings.d.ts

@@ -82,6 +82,7 @@ export const pkg: {
         FilterPanelLabel: boolean;
         FilterPanelSearch: boolean;
         ConditionBuilder: boolean;
+        GetStartedCard: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;