@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/StatusIndicator/StatusIndicator.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,12 +15,11 @@ import { Button } from '@carbon/react';
 import { Restart } from '@carbon/react/icons';
 
 var _Restart;
-var _excluded = ["children", "className", "onRetry", "retryLabel", "showRetry", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--status-indicator");
-var componentName = 'StatusIndicator';
-var defaults = {
+const blockClass = `${pkg.prefix}--status-indicator`;
+const componentName = 'StatusIndicator';
+const defaults = {
   retryLabel: 'Retry',
   showRetry: false
 };
@@ -29,38 +28,36 @@ var defaults = {
  * A list of icon/description pairs used to show multiple states of progress.
  * @deprecated This component is deprecated
  */
-var StatusIndicator = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    onRetry = _ref.onRetry,
-    _ref$retryLabel = _ref.retryLabel,
-    retryLabel = _ref$retryLabel === void 0 ? defaults.retryLabel : _ref$retryLabel,
-    _ref$showRetry = _ref.showRetry,
-    showRetry = _ref$showRetry === void 0 ? defaults.showRetry : _ref$showRetry,
-    title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let StatusIndicator = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    onRetry,
+    retryLabel = defaults.retryLabel,
+    showRetry = defaults.showRetry,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default.createElement("h1", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), /*#__PURE__*/React__default.createElement("ul", {
-    className: "".concat(blockClass, "__list")
+    className: `${blockClass}__list`
   }, children), showRetry && onRetry && retryLabel && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "__button"),
+    className: `${blockClass}__button`,
     kind: "ghost",
     onClick: onRetry,
     onKeyUp: onRetry,
-    renderIcon: function renderIcon() {
-      return _Restart || (_Restart = /*#__PURE__*/React__default.createElement(Restart, {
-        size: 16
-      }));
-    }
+    renderIcon: () => _Restart || (_Restart = /*#__PURE__*/React__default.createElement(Restart, {
+      size: 16
+    }))
   }, retryLabel));
 });
 StatusIndicator.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/StatusIndicator/StatusIndicatorStep.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,12 +15,11 @@ import { InlineLoading } from '@carbon/react';
 import { CircleStroke, ErrorOutline, CheckmarkOutline } from '@carbon/react/icons';
 
 var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
-var _excluded = ["className", "description", "errorMessage", "status"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--status-indicator-step");
-var componentName = 'StatusIndicatorStep';
-var defaults = {
+const blockClass = `${pkg.prefix}--status-indicator-step`;
+const componentName = 'StatusIndicatorStep';
+const defaults = {
   status: 'inactive'
 };
 
@@ -28,20 +27,21 @@ var defaults = {
  * An icon/description pair that describes one step of the `StatusIndicator`.
  * @deprecated This component is deprecated
  */
-var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    description = _ref.description,
-    errorMessage = _ref.errorMessage,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? defaults.status : _ref$status,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    errorMessage,
+    status = defaults.status,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--").concat(status)),
+    className: cx(blockClass, className, `${blockClass}--${status}`),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__details")
+    className: `${blockClass}__details`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__icon")
+    className: `${blockClass}__icon`
   }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React__default.createElement(CircleStroke, {
     size: 16,
     viewBox: "1 1 14 14"
@@ -50,14 +50,14 @@ var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default.createElement(CheckmarkOutline, {
     size: 16
   })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__text")
+    className: `${blockClass}__text`
   }, description)), status === 'error' && errorMessage && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__error-message")
+    className: `${blockClass}__error-message`
   }, errorMessage));
 });
 StatusIndicatorStep.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/StringFormatter/StringFormatter.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -16,10 +16,9 @@ import { StringFormatterAlignment, propMappingFunction, deprecated_StringFormatt
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
-var blockClass = "".concat(pkg.prefix, "--string-formatter");
-var componentName = 'StringFormatter';
-var defaults = {
+const blockClass = `${pkg.prefix}--string-formatter`;
+const componentName = 'StringFormatter';
+const defaults = {
   lines: 1,
   tooltipDirection: StringFormatterAlignment.BOTTOM_START,
   truncate: false,
@@ -30,32 +29,59 @@ var defaults = {
  * StringFormatter allows for truncating text while displaying a tooltip
  * overlay on hover or focus with the entirety of the provided copy.
  */
-var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$lines = _ref.lines,
-    lines = _ref$lines === void 0 ? defaults.lines : _ref$lines,
-    _ref$tooltipDirection = _ref.tooltipDirection,
-    tooltipDirection = _ref$tooltipDirection === void 0 ? defaults.tooltipDirection : _ref$tooltipDirection,
-    _ref$truncate = _ref.truncate,
-    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? defaults.width : _ref$width,
-    value = _ref.value,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var contentRef = useRef(null);
-  useIsomorphicEffect(function () {
-    contentRef.current.style.maxWidth = width;
-    contentRef.current.style.WebkitLineClamp = lines;
-  }, [lines, width]);
-  var stringFormatterContent = /*#__PURE__*/React__default.createElement("span", {
+let StringFormatter = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    className,
+    lines = defaults.lines,
+    tooltipDirection = defaults.tooltipDirection,
+    truncate = defaults.truncate,
+    width = defaults.width,
+    value,
+    ...rest
+  } = _ref;
+  const outerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [isTextTruncated, setIsTextTruncated] = useState(false);
+  const mergedRefs = node => {
+    outerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  useIsomorphicEffect(() => {
+    const checkTruncation = () => {
+      const element = contentRef.current;
+      if (element) {
+        element.style.webkitLineClamp = truncate ? lines : undefined;
+        element.style.maxWidth = width;
+        const buffer = element.clientHeight / (2 * lines);
+        // add a buffer of at least half of line height/clientHeight. to get a stable outcome.
+        const isOverflowing = element.scrollHeight > element.clientHeight + buffer;
+        setIsTextTruncated(isOverflowing);
+      }
+    };
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    if (outerRef.current) {
+      resizeObserver.observe(outerRef.current);
+      checkTruncation();
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [lines, value, width, truncate]);
+  const stringFormatterContent = /*#__PURE__*/React__default.createElement("span", {
     ref: contentRef,
-    className: cx("".concat(blockClass, "--content"), _defineProperty({}, "".concat(blockClass, "--truncate"), truncate))
+    className: cx(`${blockClass}--content`, {
+      [`${blockClass}--truncate`]: truncate
+    })
   }, value);
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     className: cx(blockClass, className),
-    ref: ref
-  }, getDevtoolsProps(componentName)), truncate ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
-    className: "".concat(blockClass, "__tooltip"),
+    ref: mergedRefs
+  }, getDevtoolsProps(componentName)), truncate && isTextTruncated ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    className: `${blockClass}__tooltip`,
     align: tooltipDirection,
     definition: value,
     openOnHover: true
@@ -63,15 +89,13 @@ var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 });
 StringFormatter = pkg.checkComponentEnabled(StringFormatter, componentName);
 StringFormatter.displayName = componentName;
-StringFormatter.validateAlignment = function () {
-  return function (props, propName, componentName) {
-    var prop = props[propName];
-    var deprecatedAlignValues = Object.values(deprecated_StringFormatterAlignment);
-    if (deprecatedAlignValues.includes(prop)) {
-      var mappedNewProp = propMappingFunction(prop);
-      console.warn("\"".concat(prop, "\" is a deprecated value for the \"").concat(propName, "\" prop on the \"").concat(componentName, "\" component. Use \"").concat(mappedNewProp, "\" instead. Allowable values are: ").concat(Object.values(StringFormatterAlignment).join(', '), "."));
-    }
-  };
+StringFormatter.validateAlignment = () => (props, propName, componentName) => {
+  const prop = props[propName];
+  const deprecatedAlignValues = Object.values(deprecated_StringFormatterAlignment);
+  if (deprecatedAlignValues.includes(prop)) {
+    const mappedNewProp = propMappingFunction(prop);
+    console.warn(`"${prop}" is a deprecated value for the "${propName}" prop on the "${componentName}" component. Use "${mappedNewProp}" instead. Allowable values are: ${Object.values(StringFormatterAlignment).join(', ')}.`);
+  }
 };
 StringFormatter.propTypes = {
   /**
@@ -82,7 +106,7 @@ StringFormatter.propTypes = {
   lines: PropTypes.number,
   /** Specify the direction of the tooltip. Can be either top or bottom. */
   tooltipDirection: allPropTypes([StringFormatter.validateAlignment(), PropTypes.oneOf(Object.values(deprecated_StringFormatterAlignment), Object.values(StringFormatterAlignment))]),
-  /** Whether or not the value should be truncated. */
+  /** Whether or not the value should be truncated. if it exceeds lines. */
   truncate: PropTypes.bool,
   /** Value to format. */
   value: PropTypes.string.isRequired,

package/es/components/StringFormatter/utils/enums.js

@@ -5,16 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../../_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 deprecated_StringFormatterAlignment = {
+const deprecated_StringFormatterAlignment = {
   TOP: 'top',
   TOP_LEFT: 'top-left',
   TOP_RIGHT: 'top-right',
@@ -28,7 +19,7 @@ var deprecated_StringFormatterAlignment = {
   RIGHT_BOTTOM: 'right-bottom',
   RIGHT_TOP: 'right-top'
 };
-var StringFormatterAlignment = {
+const StringFormatterAlignment = {
   TOP: 'top',
   TOP_START: 'top-start',
   TOP_END: 'top-end',
@@ -42,8 +33,17 @@ var StringFormatterAlignment = {
   RIGHT_END: 'right-end',
   RIGHT_START: 'right-start'
 };
-var propMappingFunction = function propMappingFunction(deprecatedValue) {
-  var mapping = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, deprecated_StringFormatterAlignment.TOP_LEFT, StringFormatterAlignment.TOP_START), deprecated_StringFormatterAlignment.TOP_RIGHT, StringFormatterAlignment.TOP_END), deprecated_StringFormatterAlignment.BOTTOM_LEFT, StringFormatterAlignment.BOTTOM_START), deprecated_StringFormatterAlignment.BOTTOM_RIGHT, StringFormatterAlignment.BOTTOM_END), deprecated_StringFormatterAlignment.LEFT_BOTTOM, StringFormatterAlignment.LEFT_END), deprecated_StringFormatterAlignment.LEFT_TOP, StringFormatterAlignment.LEFT_START), deprecated_StringFormatterAlignment.RIGHT_BOTTOM, StringFormatterAlignment.RIGHT_END), deprecated_StringFormatterAlignment.RIGHT_START, StringFormatterAlignment.RIGHT_START);
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    [deprecated_StringFormatterAlignment.TOP_LEFT]: StringFormatterAlignment.TOP_START,
+    [deprecated_StringFormatterAlignment.TOP_RIGHT]: StringFormatterAlignment.TOP_END,
+    [deprecated_StringFormatterAlignment.BOTTOM_LEFT]: StringFormatterAlignment.BOTTOM_START,
+    [deprecated_StringFormatterAlignment.BOTTOM_RIGHT]: StringFormatterAlignment.BOTTOM_END,
+    [deprecated_StringFormatterAlignment.LEFT_BOTTOM]: StringFormatterAlignment.LEFT_END,
+    [deprecated_StringFormatterAlignment.LEFT_TOP]: StringFormatterAlignment.LEFT_START,
+    [deprecated_StringFormatterAlignment.RIGHT_BOTTOM]: StringFormatterAlignment.RIGHT_END,
+    [deprecated_StringFormatterAlignment.RIGHT_START]: StringFormatterAlignment.RIGHT_START
+  };
   return mapping[deprecatedValue];
 };
 

package/es/components/TagOverflow/TagOverflow.js

@@ -5,7 +5,7 @@
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useCallback, createElement } from 'react';
 import { DismissibleTag, Tag } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
@@ -18,63 +18,57 @@ import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { useOverflowItems } from '../../global/js/hooks/useOverflowItems/useOverflowItems.js';
 
-var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "items", "maxVisible", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
-  _excluded2 = ["className"],
-  _excluded3 = ["id", "label", "tagType", "onClose", "filter"];
-var blockClass = "".concat(pkg.prefix, "--tag-overflow");
-var componentName = 'TagOverflow';
-var allTagsModalSearchThreshold = 10;
-var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$align = props.align,
-    align = _props$align === void 0 ? 'start' : _props$align,
-    allTagsModalAriaLabel = props.allTagsModalAriaLabel,
-    allTagsModalSearchLabel = props.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
-    allTagsModalTarget = props.allTagsModalTarget,
-    allTagsModalTitle = props.allTagsModalTitle,
-    autoAlign = props.autoAlign,
-    className = props.className,
-    items = props.items,
-    maxVisible = props.maxVisible,
-    _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 = _objectWithoutProperties(props, _excluded);
-  var containerRef = useRef(null);
-  var offsetRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showAllModalOpen = _useState2[0],
-    setShowAllModalOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    popoverOpen = _useState4[0],
-    setPopoverOpen = _useState4[1];
-  var _useOverflowItems = useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange),
-    visibleItems = _useOverflowItems.visibleItems,
-    overflowItems = _useOverflowItems.hiddenItems,
-    itemRefHandler = _useOverflowItems.itemRefHandler;
-  var handleShowAllClick = function handleShowAllClick() {
+const blockClass = `${pkg.prefix}--tag-overflow`;
+const componentName = 'TagOverflow';
+const allTagsModalSearchThreshold = 10;
+let TagOverflow = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    align = 'start',
+    allTagsModalAriaLabel,
+    allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText,
+    allTagsModalTarget,
+    allTagsModalTitle,
+    autoAlign,
+    className,
+    items,
+    maxVisible,
+    overflowAlign = 'bottom',
+    overflowClassName,
+    overflowType = 'default',
+    onOverflowTagChange,
+    showAllTagsLabel,
+    tagComponent,
+    ...rest
+  } = props;
+  const containerRef = useRef(null);
+  const offsetRef = useRef(null);
+  const [showAllModalOpen, setShowAllModalOpen] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const {
+    visibleItems,
+    hiddenItems: overflowItems,
+    itemRefHandler
+  } = useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange);
+  const handleShowAllClick = () => {
     setShowAllModalOpen(true);
   };
-  var handleModalClose = function handleModalClose() {
+  const handleModalClose = () => {
     setShowAllModalOpen(false);
   };
-  var getCustomComponent = function getCustomComponent(item, tagComponent) {
-    var className = item.className,
-      other = _objectWithoutProperties(item, _excluded2);
-    return /*#__PURE__*/createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
-      className: cx("".concat(blockClass, "__item"), className)
-    }));
+  const getCustomComponent = (item, tagComponent) => {
+    const {
+      className,
+      ...other
+    } = item;
+    return /*#__PURE__*/createElement(tagComponent, {
+      ...other,
+      className: cx(`${blockClass}__item`, className)
+    });
   };
-  var handleTagOnClose = useCallback(function (onClose, index) {
-    onClose === null || onClose === void 0 || onClose();
-    if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
+  const handleTagOnClose = useCallback((onClose, index) => {
+    onClose?.();
+    if (index <= visibleItems?.length - 1) {
       setPopoverOpen(false);
     }
   }, [visibleItems]);
@@ -83,34 +77,34 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
   }, getDevtoolsProps(componentName), {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__visible-tags"), "".concat(blockClass, "--align-").concat(align)),
+    className: cx(`${blockClass}__visible-tags`, `${blockClass}--align-${align}`),
     ref: containerRef
-  }, visibleItems.map(function (item, index) {
-    var id = item.id,
-      label = item.label,
-      tagType = item.tagType,
-      _onClose = item.onClose,
-      filter = item.filter,
-      other = _objectWithoutProperties(item, _excluded3);
+  }, visibleItems.map((item, index) => {
+    const {
+      id,
+      label,
+      tagType,
+      onClose,
+      filter,
+      ...other
+    } = item;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__tag-container"),
-      ref: function ref(node) {
+      className: `${blockClass}__tag-container`,
+      ref: node => {
         itemRefHandler(id, node);
       },
       key: id
-    }, tagComponent ? getCustomComponent(item, tagComponent) : typeof _onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
-      className: "".concat(blockClass, "__item--tag"),
+    }, tagComponent ? getCustomComponent(item, tagComponent) : typeof onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+      className: `${blockClass}__item--tag`,
       type: tagType,
-      onClose: function onClose() {
-        return handleTagOnClose(_onClose, index);
-      },
+      onClose: () => handleTagOnClose(onClose, index),
       text: label
     })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      className: "".concat(blockClass, "__item--tag"),
+      className: `${blockClass}__item--tag`,
       type: tagType
     }), label));
   }), overflowItems.length > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__indicator"),
+    className: `${blockClass}__indicator`,
     ref: offsetRef
   }, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
     allTagsModalSearchThreshold: allTagsModalSearchThreshold,
@@ -144,15 +138,17 @@ TagOverflow = pkg.checkComponentEnabled(TagOverflow, componentName);
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TagOverflow.displayName = componentName;
-var tagTypes = Object.keys(TYPES);
+const tagTypes = Object.keys(TYPES);
 
 /**
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref) {
-  var items = _ref.items;
-  return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
+const string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, _ref => {
+  let {
+    items
+  } = _ref;
+  return items?.length > allTagsModalSearchThreshold;
 });
 
 // The types and DocGen commentary for the component props,