odaptos_design_system 2.0.1 → 2.0.2

package/dist/odaptos_design_system.esm.js

@@ -14893,7 +14893,23 @@ const Tag = ({
       return 'xs';
     } else if (size === 'base') return 'sm';else return 'sm';
   };
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+  useEffect(() => {
+    const checkEllipsis = () => {
+      const element = document.querySelector('#tag_text');
+      if (element) {
+        setIsEllipsisActive(element.scrollWidth > element.clientWidth);
+      }
+    };
+    checkEllipsis();
+    window.addEventListener('resize', checkEllipsis);
+    return () => window.removeEventListener('resize', checkEllipsis);
+  }, []);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    tooltipDescription: text,
+    arrow: true,
+    isTooltipActive: isEllipsisActive
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     style: {
       backgroundColor: customColor
     },
@@ -14904,6 +14920,7 @@ const Tag = ({
       stroke: getTextColor()
     }
   }), /*#__PURE__*/React.createElement(Text, {
+    id: "tag_text",
     size: getTextSize(),
     text: text,
     color: getTextColor()
@@ -14917,7 +14934,7 @@ const Tag = ({
       fill: getTextColor(),
       stroke: getTextColor()
     }
-  }));
+  })));
 };
 
 var css_248z$O = ".TextInput-modules_input__Ky9uR{font-family:var(--sdFontFamilyOpenSans);font-size:var(--sdTypoTextNoDecorationRegularBase);font-style:normal;font-weight:var(--sdFontWeightRegular);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130);margin:unset;text-align:left;width:100%}.TextInput-modules_input__Ky9uR svg{height:1rem;width:1rem}input{font-family:var(--sdFontFamilyOpenSans);font-size:var(--sdTypoTextNoDecorationRegularBase);font-style:normal;font-weight:var(--sdFontWeightRegular);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130);margin:unset;text-align:left}input.TextInput-modules_input__Ky9uR{height:1rem}.TextInput-modules_MuiInputBase-root-MuiOutlinedInput-root__Kq7D9{font-family:var(--sdFontFamilyOpenSans);font-size:var(--sdTypoTextNoDecorationRegularBase);font-style:normal;font-weight:var(--sdFontWeightRegular);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130);margin:unset;text-align:left}.TextInput-modules_input_top_label__Xj8GH{margin-bottom:.625rem}.TextInput-modules_input__Ky9uR .TextInput-modules_MuiInputBase-input__beBli{color:var(--gray-black);font-family:OpenSans;font-size:1rem;padding:.375rem .75rem}.TextInput-modules_text_below__oT18E{margin:.25rem .5rem .25rem .75rem}";
@@ -16092,6 +16109,7 @@ const Text = ({
   textDecoration,
   className,
   required,
+  id,
   ...props
 }) => {
   const getTextSize = () => {
@@ -16104,6 +16122,7 @@ const Text = ({
     if (textDecoration === 'underline') return styles$Y.text_underline;else if (textDecoration === 'line-through') return styles$Y.text_line_through;else return '';
   };
   return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    id: id,
     style: {
       color: color
     },