@carbon/ibm-products 2.46.0-rc.0 → 2.47.0-rc.0

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

@@ -1,10 +1,41 @@
 /**
- * TODO: A description of the component.
+ * Copyright IBM Corp. 2024, 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.
  */
-export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React, { RefObject, ReactNode } from 'react';
+export interface TagOverflowItem {
+    className?: string;
+    filter?: string;
+    id: string;
+    label: string;
+    onClose: () => void;
+    tagType?: 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray' | 'high-contrast' | 'outline';
+    type?: string;
+}
+export interface Props {
+    align?: 'start' | 'center' | 'end';
+    allTagsModalSearchLabel?: string;
+    allTagsModalSearchPlaceholderText?: string;
+    allTagsModalTarget?: ReactNode;
+    allTagsModalTitle?: string;
+    className?: string;
+    containingElementRef?: RefObject<HTMLElement>;
+    items: TagOverflowItem[];
+    maxVisible?: number;
+    measurementOffset?: number;
+    multiline?: boolean;
+    overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+    overflowClassName?: string;
+    overflowType?: 'default' | 'tag';
+    onOverflowTagChange?: (arr: TagOverflowItem[]) => void;
+    showAllTagsLabel?: string;
+    tagComponent?: string;
+}
+export declare let TagOverflow: React.ForwardRefExoticComponent<Props & 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;
-import React from 'react';
+export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;

package/lib/components/TagOverflow/TagOverflow.js

@@ -27,52 +27,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "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,
+    allTagsModalSearchLabel = props.allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
+    allTagsModalTarget = props.allTagsModalTarget,
+    allTagsModalTitle = props.allTagsModalTitle,
+    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 +93,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 +111,6 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   };
   var getVisibleItems = React.useCallback(function () {
-    var _overflowRef$current;
     if (!itemRefs.current) {
       return items;
     }
@@ -137,13 +122,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,12 +139,13 @@ 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), {}, {
+    return /*#__PURE__*/React.createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
+      key: id,
       className: cx__default["default"]("".concat(blockClass, "__item"), className),
       ref: function ref(node) {
         return itemRefHandler(id, node);
@@ -173,9 +159,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,10 +169,10 @@ 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]);
@@ -194,10 +180,10 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     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) {
+  }, 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,
@@ -224,7 +210,7 @@ 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(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.TagOverflowPopover, {
+  }, (overflowItems === null || overflowItems === void 0 ? void 0 : 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,
@@ -260,9 +246,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,
@@ -293,11 +279,6 @@ exports.TagOverflow.propTypes = {
    * 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 content,
@@ -308,6 +289,7 @@ 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
    */
+  //@ts-ignore
   items: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string.isRequired,
     label: index["default"].string.isRequired,
@@ -351,6 +333,7 @@ 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
    */
+  //@ts-ignore
   tagComponent: index["default"].elementType
 };
 

package/lib/components/TagOverflow/TagOverflowModal.js

@@ -23,8 +23,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
 
@@ -86,13 +85,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, 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__default["default"].createElement(react.Tag, {
       key: id,
       filter: isFilterable
-    }), label);
+    }, label);
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__fade")
   })));

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

@@ -1,2 +1,14 @@
-export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { TagOverflowItem } from './TagOverflow';
+export interface Props {
+    allTagsModalSearchThreshold?: number;
+    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>>;

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -26,52 +26,48 @@ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "
   _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 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 TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _overflowTags$length;
+  var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
+    className = props.className,
+    onShowAllClick = props.onShowAllClick,
+    overflowAlign = props.overflowAlign,
+    overflowTags = props.overflowTags,
+    overflowType = props.overflowType,
+    showAllTagsLabel = props.showAllTagsLabel,
+    popoverOpen = props.popoverOpen,
+    setPopoverOpen = props.setPopoverOpen,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var localRef = React.useRef(null);
   var overflowTagContent = React.useRef(null);
   useClickOutside.useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
     evt.stopPropagation();
     evt.preventDefault();
-    setPopoverOpen(false);
-    onShowAllClick();
+    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    onShowAllClick === null || onShowAllClick === void 0 || onShowAllClick();
   };
-  var handleEscKeyPress = function handleEscKeyPress(event) {
-    var key = event.key;
+  var handleEscKeyPress = function handleEscKeyPress(evt) {
+    var key = evt.key;
     if (key === 'Escape') {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   };
   var getOverflowPopoverItems = function getOverflowPopoverItems() {
-    return overflowTags.filter(function (_, index) {
-      return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+    var thresh = allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0;
+    return overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.filter(function (_, index) {
+      return (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) > thresh ? index < thresh : index <= thresh;
     });
   };
+  var visibleItems = getOverflowPopoverItems();
+  var hasItems = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0;
   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)),
+    "aria-hidden": (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0,
+    className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0)),
     ref: ref || localRef
   }), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     align: overflowAlign,
@@ -82,21 +78,21 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
     open: popoverOpen
   }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
     onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
+      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : 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", {
+  }, "+", overflowTags === null || overflowTags === void 0 ? void 0 : 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 (_ref2) {
-    var label = _ref2.label,
-      id = _ref2.id,
-      tagType = _ref2.tagType,
-      filter = _ref2.filter,
-      _onClose = _ref2.onClose,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  }, hasItems && visibleItems.map(function (_ref) {
+    var label = _ref.label,
+      id = _ref.id,
+      tagType = _ref.tagType,
+      filter = _ref.filter,
+      _onClose = _ref.onClose,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
     var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
     var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -109,7 +105,7 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
       type: typeValue,
       filter: isFilterable
     }), label) : label);
-  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
+  })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default["default"].createElement(react.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
     onClick: handleShowAllTagsClick,
@@ -137,6 +133,7 @@ TagOverflowPopover.propTypes = {
   /**
    * tags shown in overflow
    */
+  //@ts-ignore
   overflowTags: index["default"].arrayOf(index["default"].object).isRequired,
   /**
    * Type of rendering displayed inside of the tag overflow component

package/lib/components/Tearsheet/TearsheetShell.js

@@ -176,10 +176,13 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
-  }, [position, depth, firstElement, open]);
+  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -1,2 +1,60 @@
-export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2024, 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 React from 'react';
+import '../../global/js/utils/props-helper';
+/**
+ * TODO: A description of the component.
+ */
+type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
+type Size = 'xl' | 'lg' | 'md' | 'sm';
+type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+type ImageProps = {
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: string;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: string;
+} | {
+    image?: never;
+    imageDescription?: never;
+};
+type UserAvatarBaseProps = {
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+     */
+    name?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Set the size of the avatar circle
+     */
+    size?: Size;
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserAvatarProps = UserAvatarBaseProps & ImageProps;
+export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/UserAvatar/UserAvatar.js

@@ -35,42 +35,23 @@ var componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var iconSize = {
@@ -81,7 +62,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
     var firstChar = parts[0].charAt(0).toUpperCase();
     var secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
@@ -161,10 +142,12 @@ exports.UserAvatar.propTypes = {
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
+  /**@ts-ignore */
   image: index["default"].string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
+  /**@ts-ignore */
   imageDescription: index["default"].string.isRequired.if(function (_ref3) {
     var image = _ref3.image;
     return !!image;
@@ -176,6 +159,7 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
+  /**@ts-ignore */
   renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Set the size of the avatar circle

package/lib/global/js/utils/scrollableAncestor.js

@@ -11,6 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 
+/**
+ * Copyright IBM Corp. 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.
+ */
+
 var windowExists = (typeof window === "undefined" ? "undefined" : _rollupPluginBabelHelpers["typeof"](window)) !== "undefined";
 
 // determine whether the target is scrollable

package/lib/global/js/utils/uuidv4.d.ts

@@ -1,2 +1,8 @@
 export default uuidv4;
+/**
+ * Copyright IBM Corp. 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.
+ */
 declare function uuidv4(): any;

package/lib/global/js/utils/uuidv4.js

@@ -9,6 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+// https://stackoverflow.com/a/2117523
+
 function uuidv4() {
   var randomValues = function randomValues(c) {
     return typeof crypto !== 'undefined' ? crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4 : Math.random() * 16 >> c / 4;

package/lib/global/js/utils/wait.d.ts

@@ -1,2 +1,8 @@
 export default wait;
+/**
+ * Copyright IBM Corp. 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.
+ */
 declare function wait(ms: any): Promise<any>;

package/lib/global/js/utils/wait.js

@@ -9,6 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+// utility function for an async timeout
+
 function wait(ms) {
   return new Promise(function (resolve) {
     return setTimeout(resolve, ms);