@carbon/react 1.58.0 → 1.58.1

package/es/components/Tag/DismissibleTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -35,18 +36,14 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagLabelRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagLabelRef]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -70,6 +67,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagLabelRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/es/components/Tag/OperationalTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,7 @@ import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
@@ -43,18 +44,14 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -69,9 +66,10 @@ const OperationalTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false,
+      onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      ref: tagRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -84,6 +82,7 @@ const OperationalTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/es/components/Tag/SelectableTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,7 @@ import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
@@ -31,21 +32,17 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -67,8 +64,9 @@ const SelectableTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false
+      onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      ref: tagRef,
       slug: slug,
       size: size,
       renderIcon: renderIcon,
@@ -82,6 +80,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagRef,
     slug: slug,
     size: size,
     renderIcon: renderIcon,

package/es/components/Tag/Tag.d.ts

@@ -4,7 +4,6 @@
  * 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 PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
@@ -40,7 +39,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -48,7 +47,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -66,7 +65,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -75,61 +74,6 @@ export interface TagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * wrapping element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Provide content to be rendered inside of a `Tag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `Tag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Determine if `Tag` is a filter/chip
-         */
-        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Optional prop to render a custom icon.
-         * Can be a React component class
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Text to show on clear filters
-         */
-        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;

package/es/components/Tag/Tag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
@@ -16,6 +16,8 @@ import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -39,7 +41,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = _ref => {
+const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef) {
   let {
     children,
     className,
@@ -59,17 +61,14 @@ const Tag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
+  const ref = useMergeRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${getInstanceId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
   const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx(`${prefix}--tag`, className, {
@@ -122,6 +121,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type && !isInteractiveTag
   });
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
+    ref: ref,
     disabled: disabled,
     className: tagClasses,
     id: tagId
@@ -138,7 +138,7 @@ const Tag = _ref => {
     title: children !== null && children !== undefined ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
-};
+});
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -160,7 +160,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: deprecate(PropTypes.bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  filter: deprecate(PropTypes.bool, 'The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -168,7 +168,7 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: deprecate(PropTypes.func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  onClose: deprecate(PropTypes.func, 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
@@ -186,7 +186,7 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: deprecate(PropTypes.string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  title: deprecate(PropTypes.string, 'The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */

package/es/components/Tag/isEllipsisActive.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const isEllipsisActive: (element: any) => boolean;

package/es/components/Tag/isEllipsisActive.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const isEllipsisActive = element => {
+  if (element) {
+    return element?.offsetWidth < element?.scrollWidth;
+  }
+  return false;
+};
+
+export { isEllipsisActive };

package/es/components/Tooltip/Tooltip.js

@@ -85,7 +85,7 @@ function Tooltip(_ref) {
   }
   function onMouseEnter() {
     // Interactive Tags should not support onMouseEnter
-    if (!rest?.onMouseEnter?.()) {
+    if (!rest?.onMouseEnter) {
       setIsPointerIntersecting(true);
       setOpen(true, enterDelayMs);
     }

package/lib/components/Tag/DismissibleTag.js

@@ -20,6 +20,7 @@ var iconsReact = require('@carbon/icons-react');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,18 +46,14 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagLabelRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagLabelRef]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -80,6 +77,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagLabelRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/lib/components/Tag/OperationalTag.js

@@ -19,6 +19,7 @@ var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,18 +54,14 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -79,9 +76,10 @@ const OperationalTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false,
+      onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: tagRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -94,6 +92,7 @@ const OperationalTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/lib/components/Tag/SelectableTag.js

@@ -19,6 +19,7 @@ var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,21 +42,17 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const [selectedTag, setSelectedTag] = React.useState(selected);
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -77,8 +74,9 @@ const SelectableTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false
+      onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: tagRef,
       slug: slug,
       size: size,
       renderIcon: renderIcon,
@@ -92,6 +90,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagRef,
     slug: slug,
     size: size,
     renderIcon: renderIcon,

package/lib/components/Tag/Tag.d.ts

@@ -4,7 +4,6 @@
  * 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 PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
@@ -40,7 +39,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -48,7 +47,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -66,7 +65,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -75,61 +74,6 @@ export interface TagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * wrapping element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Provide content to be rendered inside of a `Tag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `Tag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Determine if `Tag` is a filter/chip
-         */
-        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Optional prop to render a custom icon.
-         * Can be a React component class
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Text to show on clear filters
-         */
-        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;