From f405972c6b8e7c54e1cf7f5906986a69447aa0d1 Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Wed, 13 Nov 2024 18:13:58 +0200
Subject: [PATCH 01/11] feat: add tooltip title to elipsed text

---
 packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx | 3 ++-
 packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts      | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index a3834a2d..7b71a017 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -16,6 +16,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       customMaxHeight,
       noTooltip = false,
       tooltipProps,
+      tooltipTitle,
       textWrapperProps = {},
       ...rest
     }: EllipsedTextProps,
@@ -42,7 +43,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
 
     const renderTooltipTitle = () => (
       <div onClick={ignoreEvent} onDoubleClick={ignoreEvent}>
-        {children}
+        {tooltipTitle ? tooltipTitle : children}
       </div>
     );
 
diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
index c56cae24..9a368393 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
@@ -9,4 +9,5 @@ export interface EllipsedTextProps extends HTMLAttributes<HTMLDivElement> {
   noTooltip?: boolean;
   tooltipProps?: TooltipV2Props;
   textWrapperProps?: HTMLAttributes<HTMLDivElement>;
+  tooltipTitle?: string;
 }

From 816bf10953574165e2742424daf49643f4de033a Mon Sep 17 00:00:00 2001
From: mohamed <mohamed@scaleflex.com>
Date: Wed, 13 Nov 2024 20:01:03 +0200
Subject: [PATCH 02/11] fix(Input): blur onClick cross button [FRA-5665]

---
 .../ui/src/core/autocomplete/autocomplete.component.tsx  | 9 ++++++---
 packages/ui/src/core/input/input.component.tsx           | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/core/autocomplete/autocomplete.component.tsx b/packages/ui/src/core/autocomplete/autocomplete.component.tsx
index 5c3c5614..9a843575 100644
--- a/packages/ui/src/core/autocomplete/autocomplete.component.tsx
+++ b/packages/ui/src/core/autocomplete/autocomplete.component.tsx
@@ -247,9 +247,12 @@ const Autocomplete = intrinsicComponent<AutocompleteProps, HTMLDivElement>(
           <Button size="sm" color="link-basic-primary" onClick={handleSelectAll}>
             {selectAllButtonLabel}
           </Button>
-          <Button color="link-secondary" size="sm" onClick={handleClearAll}>
-            {clearAllButtonLabel}
-          </Button>
+
+          {!!rest?.value?.length && (
+            <Button color="link-secondary" size="sm" onClick={handleClearAll}>
+              {clearAllButtonLabel}
+            </Button>
+          )}
         </>
         {renderInputEndIcons()}
       </Styled.InputIconEndContainer>
diff --git a/packages/ui/src/core/input/input.component.tsx b/packages/ui/src/core/input/input.component.tsx
index c79dff86..d95e9ebd 100644
--- a/packages/ui/src/core/input/input.component.tsx
+++ b/packages/ui/src/core/input/input.component.tsx
@@ -119,6 +119,8 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
           iconClickEnd(event);
         }
       } else if (clearIconClick) {
+        event.stopPropagation();
+        inputRef.current?.blur();
         clearIconClick(event);
       }
     };

From 6fd801cad1b0e3cbd6a279fc1d6619066d81d51d Mon Sep 17 00:00:00 2001
From: mohamed <mohamed@scaleflex.com>
Date: Wed, 13 Nov 2024 21:07:50 +0200
Subject: [PATCH 03/11] code fix [FRA-5665]

---
 packages/ui/src/core/select-group/select-group.component.tsx | 2 ++
 packages/ui/src/core/select-group/select-group.props.ts      | 1 +
 packages/ui/src/core/select/select.component.tsx             | 5 +++++
 packages/ui/src/core/select/select.props.ts                  | 1 +
 4 files changed, 9 insertions(+)

diff --git a/packages/ui/src/core/select-group/select-group.component.tsx b/packages/ui/src/core/select-group/select-group.component.tsx
index 1dd1143a..0b32777f 100644
--- a/packages/ui/src/core/select-group/select-group.component.tsx
+++ b/packages/ui/src/core/select-group/select-group.component.tsx
@@ -25,6 +25,7 @@ const SelectGroup = intrinsicComponent<SelectGroupProps, HTMLDivElement>(
       multiple,
       hideMenuItemsActions = false,
       onChange,
+      onClickClearIcon,
       readOnly = false,
       disabled = false,
       showClearIcon,
@@ -83,6 +84,7 @@ const SelectGroup = intrinsicComponent<SelectGroupProps, HTMLDivElement>(
           showSelectionKey={showSelectionKey}
           hideMenuItemsActions={hideMenuItemsActions}
           showClearIcon={showClearIcon}
+          onClickClearIcon={onClickClearIcon}
         >
           {children}
         </Select>
diff --git a/packages/ui/src/core/select-group/select-group.props.ts b/packages/ui/src/core/select-group/select-group.props.ts
index a031693c..e8202187 100644
--- a/packages/ui/src/core/select-group/select-group.props.ts
+++ b/packages/ui/src/core/select-group/select-group.props.ts
@@ -11,6 +11,7 @@ export interface SelectGroupProps extends SelectProps, Omit<React.HTMLAttributes
   size?: SelectSizeType;
   hint?: React.ReactNode | ((props: LabelAndHintType) => React.ReactNode);
   LabelProps?: LabelProps;
+  onClickClearIcon?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   SelectProps?: SelectProps;
   selectProps?: React.InputHTMLAttributes<HTMLInputElement>;
   fullWidth?: boolean;
diff --git a/packages/ui/src/core/select/select.component.tsx b/packages/ui/src/core/select/select.component.tsx
index dffe6aa1..18ecc70f 100644
--- a/packages/ui/src/core/select/select.component.tsx
+++ b/packages/ui/src/core/select/select.component.tsx
@@ -19,6 +19,7 @@ const Select = intrinsicComponent<SelectProps, HTMLDivElement>(
       error = false,
       multiple = false,
       onChange,
+      onClickClearIcon,
       value,
       fullWidth = false,
       selectProps,
@@ -55,6 +56,10 @@ const Select = intrinsicComponent<SelectProps, HTMLDivElement>(
       if (typeof onChange === 'function') {
         onChange('');
       }
+
+      if (typeof onClickClearIcon === 'function') {
+        onClickClearIcon(event);
+      }
     };
 
     return (
diff --git a/packages/ui/src/core/select/select.props.ts b/packages/ui/src/core/select/select.props.ts
index 00eb88de..4485d9b7 100644
--- a/packages/ui/src/core/select/select.props.ts
+++ b/packages/ui/src/core/select/select.props.ts
@@ -15,6 +15,7 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   multiple?: boolean;
   value?: SelectSimpleValueType | SelectSimpleValueType[];
   onChange?: (value: SelectSimpleValueType | SelectSimpleValueType[]) => void;
+  onClickClearIcon?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   selectProps?: React.InputHTMLAttributes<HTMLInputElement>;
   MenuProps?: Omit<MenuProps, 'open'>;
   readOnly?: boolean;

From 43bcd6c9dcbcc4d1035851e96213498cd62be5f8 Mon Sep 17 00:00:00 2001
From: mohamed <mohamed@scaleflex.com>
Date: Mon, 18 Nov 2024 22:11:10 +0200
Subject: [PATCH 04/11] code fix [FRA-5665]

---
 packages/ui/src/core/autocomplete/autocomplete.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/core/autocomplete/autocomplete.component.tsx b/packages/ui/src/core/autocomplete/autocomplete.component.tsx
index 9a843575..df11e762 100644
--- a/packages/ui/src/core/autocomplete/autocomplete.component.tsx
+++ b/packages/ui/src/core/autocomplete/autocomplete.component.tsx
@@ -248,7 +248,7 @@ const Autocomplete = intrinsicComponent<AutocompleteProps, HTMLDivElement>(
             {selectAllButtonLabel}
           </Button>
 
-          {!!rest?.value?.length && (
+          {!!formattedValue?.length && (
             <Button color="link-secondary" size="sm" onClick={handleClearAll}>
               {clearAllButtonLabel}
             </Button>

From 002e75ad8f7dafcbfd831859ea9a58f613bb5f1c Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Tue, 19 Nov 2024 10:42:01 +0200
Subject: [PATCH 05/11] use tooltipTitle or existing text in elipsed text

---
 packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index 7b71a017..a66aaeff 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -43,7 +43,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
 
     const renderTooltipTitle = () => (
       <div onClick={ignoreEvent} onDoubleClick={ignoreEvent}>
-        {tooltipTitle ? tooltipTitle : children}
+        {tooltipTitle || children}
       </div>
     );
 

From da540fea2de4e655c2de2321ae200ce22f71b931 Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Wed, 20 Nov 2024 12:39:18 +0200
Subject: [PATCH 06/11] add text suffix to ellipsed text component

---
 .../ellipsed-text/ellipsed-text.component.tsx | 28 ++++++++++++-------
 .../core/ellipsed-text/ellipsed-text.props.ts |  1 +
 .../ellipsed-text/ellipsed-text.styles.ts     | 20 +++++++++++++
 .../ui/stories/core/ellipsed-text.stories.tsx |  6 ++++
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index a66aaeff..0ad1e380 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -17,6 +17,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       noTooltip = false,
       tooltipProps,
       tooltipTitle,
+      textSuffix = '',
       textWrapperProps = {},
       ...rest
     }: EllipsedTextProps,
@@ -25,6 +26,10 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
     const textContentRef = useRef<HTMLDivElement>(null);
     const [shouldEllipse, setShouldEllipse] = useState(false);
 
+    const getTextSuffix = (textSuffix: string): string => {
+      return textSuffix.slice(0, 3); // Take the first 3 characters
+    };
+
     const applyEllipsisIfNeeded = useCallback(
       (elem: Element) => {
         if (!elem || !maxLinesCount) {
@@ -72,16 +77,19 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
     }, []);
 
     return (
-      <Styled.EllipsedTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
-        {shouldEllipse && !noTooltip ? (
-          <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
-            <Styled.TooltipContent as={element} $customMaxHeight={customMaxHeight}>
-              {children}
-            </Styled.TooltipContent>
-          </TooltipV2>
-        ) : (
-          children
-        )}
+      <Styled.EllipsedTextWrapper>
+        <Styled.PrefixTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
+          {shouldEllipse && !noTooltip ? (
+            <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
+              <Styled.TooltipContent as={element} $customMaxHeight={customMaxHeight}>
+                {children}
+              </Styled.TooltipContent>
+            </TooltipV2>
+          ) : (
+            children
+          )}
+        </Styled.PrefixTextWrapper>
+        <Styled.textSuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.textSuffixTextWrapper>
       </Styled.EllipsedTextWrapper>
     );
   }
diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
index 9a368393..d31b2be1 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts
@@ -10,4 +10,5 @@ export interface EllipsedTextProps extends HTMLAttributes<HTMLDivElement> {
   tooltipProps?: TooltipV2Props;
   textWrapperProps?: HTMLAttributes<HTMLDivElement>;
   tooltipTitle?: string;
+  textSuffix?: string;
 }
diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
index bae8bd38..f6189428 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
@@ -7,6 +7,14 @@ const baseClassName = 'Ellipsed';
 
 const EllipsedTextWrapper = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
+})(
+  () => css`
+    display: flex;
+  `
+);
+
+const PrefixTextWrapper = styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Prefix-content'),
 })<With<WithTheme, { $maxLinesCount?: number }>>(
   ({ $maxLinesCount }) => css`
     display: -webkit-box;
@@ -30,9 +38,21 @@ const TooltipContent = styled.div.attrs({
   `
 );
 
+const textSuffixTextWrapper = styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Text-suffix-content'),
+})(
+  () => css`
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+  `
+);
+
 const Styled = applyDisplayNames({
   EllipsedTextWrapper,
+  PrefixTextWrapper,
   TooltipContent,
+  textSuffixTextWrapper,
 });
 
 export default Styled;
diff --git a/packages/ui/stories/core/ellipsed-text.stories.tsx b/packages/ui/stories/core/ellipsed-text.stories.tsx
index 146966aa..4ff3ae90 100644
--- a/packages/ui/stories/core/ellipsed-text.stories.tsx
+++ b/packages/ui/stories/core/ellipsed-text.stories.tsx
@@ -7,6 +7,12 @@ const meta: Meta<typeof EllipsedText> = {
   title: 'DataDisplay/EllipsedText',
   component: EllipsedText,
   excludeStories: ['EllipsedText'],
+  argTypes: {
+    textSuffix: {
+      description:
+        'The text suffix is displayed after the ellipsis only when the text is truncated, and it is limited to a maximum of 3 characters.',
+    },
+  },
 };
 
 export default meta;

From ebcbb5c9db2a5c1657b0457a7fe830fb8e3ba26b Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Wed, 20 Nov 2024 17:51:25 +0200
Subject: [PATCH 07/11] text suffix to ellipsed text component fix

---
 .../ellipsed-text/ellipsed-text.component.tsx | 12 ++++----
 .../ellipsed-text/ellipsed-text.styles.ts     | 30 ++++++++-----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index 0ad1e380..835f02c9 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -17,7 +17,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       noTooltip = false,
       tooltipProps,
       tooltipTitle,
-      textSuffix = '',
+      textSuffix = undefined,
       textWrapperProps = {},
       ...rest
     }: EllipsedTextProps,
@@ -77,8 +77,8 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
     }, []);
 
     return (
-      <Styled.EllipsedTextWrapper>
-        <Styled.PrefixTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
+      <Styled.EllipsedTextContainer>
+        <Styled.EllipsedTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
           {shouldEllipse && !noTooltip ? (
             <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
               <Styled.TooltipContent as={element} $customMaxHeight={customMaxHeight}>
@@ -88,9 +88,9 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
           ) : (
             children
           )}
-        </Styled.PrefixTextWrapper>
-        <Styled.textSuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.textSuffixTextWrapper>
-      </Styled.EllipsedTextWrapper>
+        </Styled.EllipsedTextWrapper>
+        {textSuffix && <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>}
+      </Styled.EllipsedTextContainer>
     );
   }
 );
diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
index f6189428..8dc5861a 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
@@ -5,15 +5,13 @@ import { generateClassNames, applyDisplayNames } from '../../utils/functions';
 
 const baseClassName = 'Ellipsed';
 
-const EllipsedTextWrapper = styled.div.attrs({
+const EllipsedTextContainer = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
-})(
-  () => css`
-    display: flex;
-  `
-);
+})`
+  display: flex;
+`;
 
-const PrefixTextWrapper = styled.div.attrs({
+const EllipsedTextWrapper = styled.div.attrs({
   className: generateClassNames(baseClassName, 'Prefix-content'),
 })<With<WithTheme, { $maxLinesCount?: number }>>(
   ({ $maxLinesCount }) => css`
@@ -38,21 +36,19 @@ const TooltipContent = styled.div.attrs({
   `
 );
 
-const textSuffixTextWrapper = styled.div.attrs({
+const SuffixTextWrapper = styled.div.attrs({
   className: generateClassNames(baseClassName, 'Text-suffix-content'),
-})(
-  () => css`
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: column;
-  `
-);
+})`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+`;
 
 const Styled = applyDisplayNames({
+  EllipsedTextContainer,
   EllipsedTextWrapper,
-  PrefixTextWrapper,
   TooltipContent,
-  textSuffixTextWrapper,
+  SuffixTextWrapper,
 });
 
 export default Styled;

From 604932be960800976a97f9060b9bfdca84ba875a Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Wed, 20 Nov 2024 17:56:43 +0200
Subject: [PATCH 08/11] move get text suffix into utils file

---
 .../ui/src/core/ellipsed-text/ellipsed-text.component.tsx  | 7 ++-----
 packages/ui/src/core/ellipsed-text/ellipsed-text.utils.ts  | 3 +++
 2 files changed, 5 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/src/core/ellipsed-text/ellipsed-text.utils.ts

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index 835f02c9..0ff942a3 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -4,6 +4,7 @@ import { EllipsedTextProps } from './ellipsed-text.props';
 import TooltipV2 from '../tooltip-v2';
 import { ignoreEvent, intrinsicComponent } from '../../utils/functions';
 import Styled from './ellipsed-text.styles';
+import { getTextSuffix } from './ellipsed-text.utils';
 
 const POSSIBLE_FONT_GAP = 1; // there is a possibility that the font might render around ~1px in height/width for some chars so we are considering that 1px in-case.
 
@@ -17,7 +18,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       noTooltip = false,
       tooltipProps,
       tooltipTitle,
-      textSuffix = undefined,
+      textSuffix,
       textWrapperProps = {},
       ...rest
     }: EllipsedTextProps,
@@ -26,10 +27,6 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
     const textContentRef = useRef<HTMLDivElement>(null);
     const [shouldEllipse, setShouldEllipse] = useState(false);
 
-    const getTextSuffix = (textSuffix: string): string => {
-      return textSuffix.slice(0, 3); // Take the first 3 characters
-    };
-
     const applyEllipsisIfNeeded = useCallback(
       (elem: Element) => {
         if (!elem || !maxLinesCount) {
diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.utils.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.utils.ts
new file mode 100644
index 00000000..c929fddd
--- /dev/null
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.utils.ts
@@ -0,0 +1,3 @@
+export const getTextSuffix = (textSuffix: string): string => {
+  return textSuffix.slice(0, 3); // Take the first 3 characters
+};

From 981271f0363aa04e3617d3b4947149e1e69f9818 Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Tue, 26 Nov 2024 11:52:56 +0200
Subject: [PATCH 09/11] feat: add suffix text to the ellipsed text component

---
 packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
index 8dc5861a..3d68c7ac 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts
@@ -12,7 +12,7 @@ const EllipsedTextContainer = styled.div.attrs({
 `;
 
 const EllipsedTextWrapper = styled.div.attrs({
-  className: generateClassNames(baseClassName, 'Prefix-content'),
+  className: generateClassNames(baseClassName, 'ellipsed-text-wrapper'),
 })<With<WithTheme, { $maxLinesCount?: number }>>(
   ({ $maxLinesCount }) => css`
     display: -webkit-box;
@@ -37,7 +37,7 @@ const TooltipContent = styled.div.attrs({
 );
 
 const SuffixTextWrapper = styled.div.attrs({
-  className: generateClassNames(baseClassName, 'Text-suffix-content'),
+  className: generateClassNames(baseClassName, 'suffix-text-wrapper'),
 })`
   display: flex;
   justify-content: flex-end;

From b671dbf23316e6707c06c23b2268b95672779871 Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Tue, 26 Nov 2024 12:24:56 +0200
Subject: [PATCH 10/11] add suffix text to the ellipsed text component

---
 .../ellipsed-text/ellipsed-text.component.tsx | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index 0ff942a3..332e37ef 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -73,21 +73,31 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       };
     }, []);
 
+    const renderEllipsedText = () => (
+      <Styled.EllipsedTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
+        {shouldEllipse && !noTooltip ? (
+          <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
+            <Styled.TooltipContent as={element} $customMaxHeight={customMaxHeight}>
+              {children}
+            </Styled.TooltipContent>
+          </TooltipV2>
+        ) : (
+          children
+        )}
+      </Styled.EllipsedTextWrapper>
+    );
+
     return (
-      <Styled.EllipsedTextContainer>
-        <Styled.EllipsedTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
-          {shouldEllipse && !noTooltip ? (
-            <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
-              <Styled.TooltipContent as={element} $customMaxHeight={customMaxHeight}>
-                {children}
-              </Styled.TooltipContent>
-            </TooltipV2>
-          ) : (
-            children
-          )}
-        </Styled.EllipsedTextWrapper>
-        {textSuffix && <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>}
-      </Styled.EllipsedTextContainer>
+      <>
+        {textSuffix ? (
+          <Styled.EllipsedTextContainer>
+            {renderEllipsedText()}
+            <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>
+          </Styled.EllipsedTextContainer>
+        ) : (
+          renderEllipsedText()
+        )}
+      </>
     );
   }
 );

From fe8a1855f90925b4679a668bd454848066a88aa9 Mon Sep 17 00:00:00 2001
From: Ahmed Hussien <ahmed.hussien@scaleflex.com>
Date: Tue, 26 Nov 2024 12:32:45 +0200
Subject: [PATCH 11/11] add suffix text to the ellipsed text component

---
 .../ellipsed-text/ellipsed-text.component.tsx  | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
index 332e37ef..251e5937 100644
--- a/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
+++ b/packages/ui/src/core/ellipsed-text/ellipsed-text.component.tsx
@@ -87,17 +87,13 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       </Styled.EllipsedTextWrapper>
     );
 
-    return (
-      <>
-        {textSuffix ? (
-          <Styled.EllipsedTextContainer>
-            {renderEllipsedText()}
-            <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>
-          </Styled.EllipsedTextContainer>
-        ) : (
-          renderEllipsedText()
-        )}
-      </>
+    return textSuffix ? (
+      <Styled.EllipsedTextContainer>
+        {renderEllipsedText()}
+        <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>
+      </Styled.EllipsedTextContainer>
+    ) : (
+      renderEllipsedText()
     );
   }
 );