odaptos_design_system 2.0.0 → 2.0.2

package/dist/Atoms/Tag/Tag.d.ts

@@ -8,7 +8,8 @@ interface TagProps extends HTMLAttributes<HTMLDivElement> {
     amountNumber?: number | undefined;
     customColor?: string;
     className?: string;
+    canBeRemoved?: boolean;
 }
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
-export declare const Tag: ({ text, status, size, iconLeft, iconRight, amountNumber, customColor, className, ...props }: TagProps) => React.JSX.Element;
+export declare const Tag: ({ text, status, size, iconLeft, iconRight, amountNumber, customColor, className, canBeRemoved, ...props }: TagProps) => React.JSX.Element;
 export {};

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

@@ -12607,10 +12607,11 @@ const MultiSelect = ({
         size: "sm",
         status: "info",
         key: `chipt-option-${index}`,
+        canBeRemoved: true,
         iconRight: /*#__PURE__*/React__default.createElement(RemoveCircledIcon, {
           fill: colors.blue_700,
           style: {
-            cursor: 'pointer'
+            cursor: 'pointer !important'
           },
           onClick: () => deleteOption(option)
         })
@@ -12876,6 +12877,7 @@ const MultiSelectWithCategories = ({
         size: "sm",
         status: "info",
         key: `chipt-option-${index}`,
+        canBeRemoved: true,
         iconRight: /*#__PURE__*/React__default.createElement(RemoveCircledIcon, {
           fill: colors.blue_700,
           style: {
@@ -14858,8 +14860,8 @@ const TabsUnderline = ({
   })));
 };
 
-var css_248z$N = ".Tag-modules_tag__sYiD6{align-items:center;border-radius:.25rem;display:flex;gap:.25rem;padding:0 .375rem;width:-moz-fit-content;width:fit-content}.Tag-modules_tag__sYiD6 p{max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;width:100%}.Tag-modules_tag_idle__ym-G7{background:var(--color-neutral-dark-shades-600,#717376)}.Tag-modules_tag_idle__ym-G7 svg{stroke:#fff!important;fill:#fff!important}.Tag-modules_tag_info__Q6-WL{background:var(--color-primary-100,#e5f1ff)}.Tag-modules_tag_info__Q6-WL svg{stroke:#004799!important;fill:#004799!important}.Tag-modules_tag_violet__CgNel{background:var(--Color-Extended-Purple-100,#e9d3fd)}.Tag-modules_tag_violet__CgNel svg{stroke:#5c1994!important;fill:#5c1994!important}.Tag-modules_tag_light__RqIr6{background:var(--Color-Neutral-Clear-Shades-150,#eee)}.Tag-modules_tag_light__RqIr6 svg{stroke:#32353a!important;fill:#32353a!important}.Tag-modules_tag_success__yANfh{background:var(--color-extended-green-100,#e8f5ea)}.Tag-modules_tag_success__yANfh svg{stroke:#3c743d!important;fill:#3c743d!important}.Tag-modules_tag_warning__C-O5t{background:var(--color-extended-yellow-100,#fff3d6)}.Tag-modules_tag_warning__C-O5t svg{stroke:#6e4f00!important;fill:#6e4f00!important}.Tag-modules_tag_critical__v79so{background:var(--color-extended-red-100,#fddbdb)}.Tag-modules_tag_critical__v79so svg{stroke:#98312e!important;fill:#98312e!important}.Tag-modules_tag_sm__KQwsr{height:1.25rem}.Tag-modules_tag_sm__KQwsr svg{height:.75rem;width:.75rem}.Tag-modules_tag_base__omYEM{height:1.75rem}.Tag-modules_tag_base__omYEM svg{height:1rem;width:1rem}";
-var styles$N = {"tag":"Tag-modules_tag__sYiD6","tag_idle":"Tag-modules_tag_idle__ym-G7","tag_info":"Tag-modules_tag_info__Q6-WL","tag_violet":"Tag-modules_tag_violet__CgNel","tag_light":"Tag-modules_tag_light__RqIr6","tag_success":"Tag-modules_tag_success__yANfh","tag_warning":"Tag-modules_tag_warning__C-O5t","tag_critical":"Tag-modules_tag_critical__v79so","tag_sm":"Tag-modules_tag_sm__KQwsr","tag_base":"Tag-modules_tag_base__omYEM"};
+var css_248z$N = ".Tag-modules_tag__sYiD6{align-items:center;border-radius:.25rem;display:flex;gap:.25rem;padding:0 .375rem;width:-moz-fit-content;width:fit-content}.Tag-modules_tag__sYiD6 p{max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;width:100%}.Tag-modules_tag_idle__ym-G7{background:var(--color-neutral-dark-shades-600,#717376)}.Tag-modules_tag_idle__ym-G7 svg{stroke:#fff!important;fill:#fff!important}.Tag-modules_tag_info__Q6-WL{background:var(--color-primary-100,#e5f1ff)}.Tag-modules_tag_info__Q6-WL svg{stroke:#004799!important;fill:#004799!important}.Tag-modules_tag_violet__CgNel{background:var(--Color-Extended-Purple-100,#e9d3fd)}.Tag-modules_tag_violet__CgNel svg{stroke:#5c1994!important;fill:#5c1994!important}.Tag-modules_tag_light__RqIr6{background:var(--Color-Neutral-Clear-Shades-150,#eee)}.Tag-modules_tag_light__RqIr6 svg{stroke:#32353a!important;fill:#32353a!important}.Tag-modules_tag_success__yANfh{background:var(--color-extended-green-100,#e8f5ea)}.Tag-modules_tag_success__yANfh svg{stroke:#3c743d!important;fill:#3c743d!important}.Tag-modules_tag_warning__C-O5t{background:var(--color-extended-yellow-100,#fff3d6)}.Tag-modules_tag_warning__C-O5t svg{stroke:#6e4f00!important;fill:#6e4f00!important}.Tag-modules_tag_critical__v79so{background:var(--color-extended-red-100,#fddbdb)}.Tag-modules_tag_critical__v79so svg{stroke:#98312e!important;fill:#98312e!important}.Tag-modules_tag_sm__KQwsr{height:1.25rem}.Tag-modules_tag_sm__KQwsr svg{height:.75rem;width:.75rem}.Tag-modules_tag_base__omYEM{height:1.75rem}.Tag-modules_tag_base__omYEM svg{height:1rem;width:1rem}.Tag-modules_canBeRemoved__ei-3U svg{cursor:pointer}";
+var styles$N = {"tag":"Tag-modules_tag__sYiD6","tag_idle":"Tag-modules_tag_idle__ym-G7","tag_info":"Tag-modules_tag_info__Q6-WL","tag_violet":"Tag-modules_tag_violet__CgNel","tag_light":"Tag-modules_tag_light__RqIr6","tag_success":"Tag-modules_tag_success__yANfh","tag_warning":"Tag-modules_tag_warning__C-O5t","tag_critical":"Tag-modules_tag_critical__v79so","tag_sm":"Tag-modules_tag_sm__KQwsr","tag_base":"Tag-modules_tag_base__omYEM","canBeRemoved":"Tag-modules_canBeRemoved__ei-3U"};
 styleInject(css_248z$N);
 
 colord.extend([mixPlugin]); //Used for the .tints() method of colord
@@ -14873,6 +14875,7 @@ const Tag = ({
   amountNumber,
   customColor,
   className,
+  canBeRemoved = false,
   ...props
 }) => {
   const tagCustomColor = customColor ? colord.colord(customColor) : undefined;
@@ -14898,17 +14901,34 @@ 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
     },
-    className: `${styles$N.tag} ${getTagStatus()} ${getTagSize()} ${className ?? ''}`
+    className: `${styles$N.tag} ${getTagStatus()} ${getTagSize()} ${className ?? ''} ${canBeRemoved && styles$N.canBeRemoved}`
   }), iconLeft && /*#__PURE__*/React__default.cloneElement(iconLeft, {
     style: {
       fill: getTextColor(),
       stroke: getTextColor()
     }
   }), /*#__PURE__*/React__default.createElement(Text, {
+    id: "tag_text",
     size: getTextSize(),
     text: text,
     color: getTextColor()
@@ -14922,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}";
@@ -16097,6 +16117,7 @@ const Text = ({
   textDecoration,
   className,
   required,
+  id,
   ...props
 }) => {
   const getTextSize = () => {
@@ -16109,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
     },