@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -0,0 +1,135 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
+
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var componentName = 'TagOverflowPopover';
+var blockClass = "".concat(pkg.prefix, "--tag-overflow-popover");
+
+// Default values for props
+var defaults = {
+  allTagsModalSearchThreshold: 10,
+  overflowAlign: 'bottom'
+};
+var TagOverflowPopover = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef();
+  var overflowTagContent = useRef(null);
+  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.createElement("span", _extends({}, rest, {
+    "aria-hidden": overflowTags.length === 0,
+    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    ref: ref || localRef
+  }), /*#__PURE__*/React__default.createElement(Popover, {
+    align: overflowAlign,
+    className: cx(className, "".concat(blockClass, "__el")),
+    dropShadow: true,
+    highContrast: true,
+    onKeyDown: handleEscKeyPress,
+    open: popoverOpen
+  }, /*#__PURE__*/React__default.createElement(Tag, {
+    onClick: function onClick() {
+      return setPopoverOpen(!popoverOpen);
+    },
+    className: cx("".concat(blockClass, "__trigger"))
+  }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
+    ref: overflowTagContent,
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "".concat(blockClass, "__tag-list")
+  }, getOverflowPopoverItems().map(function (tag) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_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.createElement(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: PropTypes.number,
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * function to execute on clicking show all
+   */
+  onShowAllClick: PropTypes.func.isRequired,
+  /**
+   * overflowAlign from the standard tooltip
+   */
+  overflowAlign: PropTypes.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: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
+  /**
+   * Open state of the popover
+   */
+  popoverOpen: PropTypes.bool,
+  /**
+   * Setter function for the popoverOpen state value
+   */
+  setPopoverOpen: PropTypes.func,
+  /**
+   * label for the overflow show all tags link
+   */
+  showAllTagsLabel: PropTypes.string
+};
+
+export { TagOverflowPopover };

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

@@ -1,8 +1,92 @@
-export let TagSet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React, { ReactNode, PropsWithChildren } from 'react';
+import { TagBaseProps } from '@carbon/type';
+type Align = 'start' | 'center' | 'end';
+type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+type OverflowType = 'default' | 'tag';
+type TagType = {
+    label: string;
+    type?: keyof typeof tagTypes;
+} & TagBaseProps;
+interface TagSetProps extends PropsWithChildren {
+    /**
+     * align the Tags displayed by the TagSet. Default start.
+     */
+    align?: Align;
+    /**
+     * label text for the show all search. **Note: Required if more than 10 tags**
+     */
+    allTagsModalSearchLabel?: string;
+    /**
+     * placeholder text for the show all search. **Note: Required if more than 10 tags**
+     */
+    allTagsModalSearchPlaceholderText?: string;
+    /**
+     * portal target for the all tags modal
+     */
+    allTagsModalTarget?: ReactNode;
+    /**
+     * title for the show all modal. **Note: Required if more than 10 tags**
+     */
+    allTagsModalTitle?: string;
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * Optional ref for custom resize container to measure available space
+     * Default will measure the available space of the TagSet container itself.
+     */
+    containingElementRef?: React.RefObject<HTMLElement>;
+    /**
+     * maximum visible tags
+     */
+    maxVisible?: number;
+    /**
+     * Specify offset amount for measure available space, only used when `containingElementSelector`
+     * is also provided
+     */
+    measurementOffset?: number;
+    /**
+     * display tags in multiple lines
+     */
+    multiline?: boolean;
+    /**
+     * Handler to get overflow tags
+     */
+    onOverflowTagChange?: (value: ReactNode) => void;
+    /**
+     * overflowAlign from the standard tooltip. Default center.
+     */
+    overflowAlign?: OverflowAlign;
+    /**
+     * overflowClassName for the tooltip popup
+     */
+    overflowClassName?: string;
+    /**
+     * Type of rendering displayed inside of the tag overflow component
+     */
+    overflowType?: OverflowType;
+    /**
+     * label for the overflow show all tags link.
+     *
+     * **Note:** Required if more than 10 tags
+     */
+    showAllTagsLabel: string;
+    /**
+     * The tags to be shown in the TagSet. Each tag is specified as an object
+     * with properties: **label**\* (required) to supply the tag content, and
+     * other properties will be passed to the Carbon Tag component, such as
+     * **type**, **disabled**, **ref**, **className** , and any other Tag props.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
+     */
+    tags?: TagType[];
+}
+export declare let TagSet: React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * 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;
+export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
+declare const tagTypes: string[];
 export default TagSet;
-import React from 'react';

package/es/components/TagSet/TagSet.js

@@ -32,18 +32,26 @@ var defaults = {
   overflowType: 'default',
   onOverflowTagChange: function onOverflowTagChange() {}
 };
+
+// interface TagType extends TagBaseProps
+// {
+//   label: string;
+//   // we duplicate this prop to improve the DocGen
+//   type?: typeof tagTypes[number];
+// }
+
 var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaults.align : _ref$align,
+    align = _ref$align === void 0 ? 'start' : _ref$align,
     allTagsModalTarget = _ref.allTagsModalTarget,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
     _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
     allTagsModalTitle = _ref.allTagsModalTitle,
     allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
@@ -73,7 +81,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setShowAllModalOpen = _useState8[1];
   var localTagSetRef = useRef(null);
   var tagSetRef = ref || localTagSetRef;
-  var sizingContainerRef = useRef();
+  var sizingContainerRef = useRef(null);
   var displayedArea = useRef(null);
   var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
@@ -98,7 +106,9 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         key: index,
         className: "".concat(blockClass, "__sizing-tag"),
         ref: function ref(el) {
-          return newSizingTags[index] = el;
+          if (el != null) {
+            newSizingTags[index] = el;
+          }
         }
       }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
@@ -155,7 +165,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible);
+      return setDisplayCount(maxVisible || 3);
     }
 
     // how many will fit?
@@ -163,7 +173,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (sizingTags.length > 0) {
       var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
       var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
-      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef === null || tagSetRef === void 0 ? void 0 : tagSetRef['current'].offsetWidth;
       for (var i in sizingTags) {
         var _sizingTags$i;
         var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
@@ -174,7 +184,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
           break;
         }
       }
-      if (willFit < sizingTags.length) {
+      if (willFit < sizingTags.length && overflowTag.current) {
         while (willFit > 0 && spaceAvailable < overflowTag.current.offsetWidth) {
           // Highly unlikely any useful tag is smaller
           willFit -= 1; // remove one tag
@@ -262,7 +272,7 @@ var TYPES = {
   outline: 'Outline'
 };
 var tagTypes = Object.keys(TYPES);
-TagSet.types = tagTypes;
+TagSet['types'] = tagTypes;
 TagSet.propTypes = {
   /**
    * align the Tags displayed by the TagSet. Default start.
@@ -292,6 +302,7 @@ TagSet.propTypes = {
    * Optional ref for custom resize container to measure available space
    * Default will measure the available space of the TagSet container itself.
    */
+  /**@ts-ignore */
   containingElementRef: PropTypes.object,
   /**
    * maximum visible tags

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

@@ -1,29 +1,35 @@
-export function TagSetModal({ 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 TagSetModal {
-    export namespace propTypes {
-        let allTags: PropTypes.Requireable<(PropTypes.InferProps<{
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Tag } from '@carbon/react';
+interface TagType {
+    label: string;
+}
+type AllTags = TagType[] & Omit<React.ComponentProps<Tag>, 'filter'>[];
+interface TagSetModalProps {
+    allTags?: AllTags;
+    className?: string;
+    onClose?: () => void;
+    open?: boolean;
+    portalTarget?: ReactNode;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    title?: string;
+}
+export declare const TagSetModal: {
+    ({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagSetModalProps): any;
+    propTypes: {
+        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: "TagSetModal";
+        className: PropTypes.Requireable<string>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        open: PropTypes.Requireable<boolean>;
+        portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        searchLabel: PropTypes.Requireable<string>;
+        searchPlaceholder: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};
 export {};

package/es/components/TagSet/TagSetModal.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { ComposedModal, ModalHeader, Search, ModalBody, Tag } from '@carbon/react';
+import { Tag, ComposedModal, ModalHeader, Search, ModalBody } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
@@ -47,11 +47,11 @@ var TagSetModal = function TagSetModal(_ref) {
   useEffect(function () {
     var newFilteredModalTags = [];
     if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
+      if (search === '' && allTags) {
+        newFilteredModalTags = allTags === null || allTags === void 0 ? void 0 : allTags.slice(0);
       } else {
         var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
+        allTags === null || allTags === void 0 || 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);

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

@@ -1,2 +1,45 @@
-export const TagSetOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+type OverflowType = 'default' | 'tag';
+interface TagSetOverflowProps {
+    /**
+     * count of overflowTags over which a modal is offered
+     */
+    allTagsModalSearchThreshold?: number;
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * function to execute on clicking show all
+     */
+    onShowAllClick: () => void;
+    /**
+     * overflowAlign from the standard tooltip
+     */
+    overflowAlign?: OverflowAlign;
+    /** @type {Array<any>}
+     * tags shown in overflow
+     */
+    overflowTags: ReactNode[];
+    /**
+     * Type of rendering displayed inside of the tag overflow component
+     */
+    overflowType?: OverflowType;
+    /**
+     * Open state of the popover
+     */
+    popoverOpen?: boolean;
+    /**
+     * Setter function for the popoverOpen state value
+     */
+    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    /**
+     * label for the overflow show all tags link
+     */
+    showAllTagsLabel?: string;
+}
+export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/es/components/TagSet/TagSetOverflow.js

@@ -19,8 +19,7 @@ var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
 
 // Default values for props
 var defaults = {
-  allTagsModalSearchThreshold: 10,
-  overflowAlign: 'bottom'
+  allTagsModalSearchThreshold: 10
 };
 var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
@@ -28,30 +27,30 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     className = _ref.className,
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowTags = _ref.overflowTags,
     overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     popoverOpen = _ref.popoverOpen,
     setPopoverOpen = _ref.setPopoverOpen,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var localRef = useRef();
+  var localRef = useRef(null);
   var overflowTagContent = useRef(null);
   useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setPopoverOpen(false);
+    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     onShowAllClick();
   };
   var handleEscKeyPress = function handleEscKeyPress(event) {
     var key = event.key;
     if (key === 'Escape') {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   };
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
@@ -67,7 +66,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     open: popoverOpen
   }, /*#__PURE__*/React__default.createElement(Tag, {
     onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
+      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger"))
   }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
@@ -85,10 +84,12 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     if (overflowType === 'default') {
       tagProps.filter = false;
     }
-    return /*#__PURE__*/React__default.createElement("li", {
-      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
-      key: index
-    }, /*#__PURE__*/React__default.cloneElement(tag, tagProps));
+    if ( /*#__PURE__*/React__default.isValidElement(tag)) {
+      return /*#__PURE__*/React__default.createElement("li", {
+        className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
+        key: index
+      }, /*#__PURE__*/React__default.cloneElement(tag, tagProps));
+    }
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -117,6 +118,7 @@ TagSetOverflow.propTypes = {
   /**
    * tags shown in overflow
    */
+  /**@ts-ignore */
   overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * Type of rendering displayed inside of the tag overflow component

package/es/components/WebTerminal/WebTerminal.js

@@ -72,7 +72,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   */
   useEffect(function () {
     if (isInitiallyOpen) {
-      openWebTerminal();
+      openWebTerminal === null || openWebTerminal === void 0 || openWebTerminal();
     }
   }, []); // eslint-disable-line
 
@@ -92,7 +92,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (prefersReducedMotion) {
       setRender(false);
     }
-    closeWebTerminal();
+    closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
   };
   return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,

package/es/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -1,2 +1,15 @@
-export let WebTerminalContentWrapper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+import React, { ReactNode } from 'react';
+interface WebTerminalContentWrapperProps {
+    /**
+     * Pass in content as children.
+     */
+    children: ReactNode | ReactNode[];
+}
+export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/WebTerminal/hooks/index.d.ts

@@ -1,12 +1,17 @@
-export const WebTerminalContext: React.Context<any>;
-export function WebTerminalProvider({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace WebTerminalProvider {
-    namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-    }
+import React, { ReactNode } from 'react';
+export interface WebTerminalContextType {
+    open?: boolean;
+    openWebTerminal?: () => void;
+    closeWebTerminal?: () => void;
+    toggleWebTerminal?: () => void;
 }
-export function useWebTerminal(): any;
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare const WebTerminalContext: React.Context<WebTerminalContextType>;
+interface WebTerminalProviderProps {
+    /**
+     * Provide your own terminal component as children to show up in the web terminal
+     */
+    children: ReactNode | ReactNode[];
+}
+export declare let WebTerminalProvider: React.FC<WebTerminalProviderProps>;
+export declare const useWebTerminal: () => WebTerminalContextType;
+export {};

package/es/components/WebTerminal/hooks/index.js

@@ -10,7 +10,7 @@ import React__default, { useState, useCallback, useContext, createContext } from
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { pkg } from '../../../settings.js';
 
-var WebTerminalContext = /*#__PURE__*/createContext();
+var WebTerminalContext = /*#__PURE__*/createContext({});
 var componentName = 'WebTerminalProvider';
 var WebTerminalProvider = function WebTerminalProvider(_ref) {
   var children = _ref.children;

package/es/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/es/global/js/package-settings.d.ts

@@ -24,6 +24,7 @@ declare namespace defaults {
         let AboutModal: boolean;
         let APIKeyModal: boolean;
         let Cascade: boolean;
+        let Checklist: boolean;
         let CreateModal: boolean;
         let CreateFullPage: boolean;
         let CreateFullPageStep: boolean;
@@ -95,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;
@@ -112,7 +114,6 @@ declare namespace defaults {
         let DescriptionListRow: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;
-        let Checklist: boolean;
         let EmptyStateV2: boolean;
         let Guidebanner: boolean;
         let GuidebannerElement: boolean;