odaptos_design_system 2.0.1 → 2.0.2

package/dist/Atoms/Typography/Text.d.ts

@@ -9,9 +9,10 @@ interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
     textDecoration?: 'underline' | 'line-through';
     className?: string;
     required?: boolean;
+    id?: string;
 }
 /** This text should be use to display basic text
  * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
  */
-export declare const Text: ({ text, color, size, weight, italic, textDecoration, className, required, ...props }: TextProps) => React.JSX.Element;
+export declare const Text: ({ text, color, size, weight, italic, textDecoration, className, required, id, ...props }: TextProps) => React.JSX.Element;
 export {};

package/dist/odaptos_design_system.cjs.development.js

@@ -14901,7 +14901,23 @@ const Tag = ({
       return 'xs';
     } else if (size === 'base') return 'sm';else return 'sm';
   };
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+  const [isEllipsisActive, setIsEllipsisActive] = React.useState(false);
+  React.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__default.createElement(Tooltip, {
+    tooltipDescription: text,
+    arrow: true,
+    isTooltipActive: isEllipsisActive
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     style: {
       backgroundColor: customColor
     },
@@ -14912,6 +14928,7 @@ const Tag = ({
       stroke: getTextColor()
     }
   }), /*#__PURE__*/React__default.createElement(Text, {
+    id: "tag_text",
     size: getTextSize(),
     text: text,
     color: getTextColor()
@@ -14925,7 +14942,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}";
@@ -16100,6 +16117,7 @@ const Text = ({
   textDecoration,
   className,
   required,
+  id,
   ...props
 }) => {
   const getTextSize = () => {
@@ -16112,6 +16130,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__default.createElement("p", Object.assign({}, props, {
+    id: id,
     style: {
       color: color
     },