@carbon/react 1.58.0 → 1.58.1

package/lib/components/Tag/Tag.js

@@ -20,6 +20,8 @@ require('../Text/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
+var react = require('@floating-ui/react');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -49,7 +51,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = _ref => {
+const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref, forwardRef) {
   let {
     children,
     className,
@@ -69,17 +71,14 @@ const Tag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
+  const ref = react.useMergeRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${getInstanceId()}`;
   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]);
   const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
   const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx__default["default"](`${prefix}--tag`, className, {
@@ -132,6 +131,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type && !isInteractiveTag
   });
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
     disabled: disabled,
     className: tagClasses,
     id: tagId
@@ -148,7 +148,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
@@ -170,7 +170,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: deprecate["default"](PropTypes__default["default"].bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  filter: deprecate["default"](PropTypes__default["default"].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.
    */
@@ -178,7 +178,7 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: deprecate["default"](PropTypes__default["default"].func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  onClose: deprecate["default"](PropTypes__default["default"].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
@@ -196,7 +196,7 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: deprecate["default"](PropTypes__default["default"].string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  title: deprecate["default"](PropTypes__default["default"].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/lib/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/lib/components/Tag/isEllipsisActive.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isEllipsisActive = element => {
+  if (element) {
+    return element?.offsetWidth < element?.scrollWidth;
+  }
+  return false;
+};
+
+exports.isEllipsisActive = isEllipsisActive;

package/lib/components/Tooltip/Tooltip.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.58.0",
+  "version": "1.58.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "574070ef9eef05d6e1e5899354bbadc77ba5f3ee"
+  "gitHead": "08968165fe61174317b023555b812528d21bab39"
 }