Merge branch 'dev'

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>
+
+          {!!formattedValue?.length && (
+            <Button color="link-secondary" size="sm" onClick={handleClearAll}>
+              {clearAllButtonLabel}
+            </Button>
+          )}
         </>
         {renderInputEndIcons()}
       </Styled.InputIconEndContainer>

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.
 
@@ -16,6 +17,8 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       customMaxHeight,
       noTooltip = false,
       tooltipProps,
+      tooltipTitle,
+      textSuffix,
       textWrapperProps = {},
       ...rest
     }: EllipsedTextProps,
@@ -42,7 +45,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
 
     const renderTooltipTitle = () => (
       <div onClick={ignoreEvent} onDoubleClick={ignoreEvent}>
-        {children}
+        {tooltipTitle || children}
       </div>
     );
 
@@ -70,7 +73,7 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
       };
     }, []);
 
-    return (
+    const renderEllipsedText = () => (
       <Styled.EllipsedTextWrapper $maxLinesCount={maxLinesCount} ref={textContentRef} {...textWrapperProps} {...rest}>
         {shouldEllipse && !noTooltip ? (
           <TooltipV2 position="top" size="md" ref={ref} arrow {...tooltipProps} title={renderTooltipTitle()}>
@@ -83,6 +86,15 @@ const EllipsedText = intrinsicComponent<EllipsedTextProps, HTMLDivElement>(
         )}
       </Styled.EllipsedTextWrapper>
     );
+
+    return textSuffix ? (
+      <Styled.EllipsedTextContainer>
+        {renderEllipsedText()}
+        <Styled.SuffixTextWrapper>{getTextSuffix(textSuffix)}</Styled.SuffixTextWrapper>
+      </Styled.EllipsedTextContainer>
+    ) : (
+      renderEllipsedText()
+    );
   }
 );
 

packages/ui/src/core/ellipsed-text/ellipsed-text.props.ts

@@ -9,4 +9,6 @@ export interface EllipsedTextProps extends HTMLAttributes<HTMLDivElement> {
   noTooltip?: boolean;
   tooltipProps?: TooltipV2Props;
   textWrapperProps?: HTMLAttributes<HTMLDivElement>;
+  tooltipTitle?: string;
+  textSuffix?: string;
 }

packages/ui/src/core/ellipsed-text/ellipsed-text.styles.ts

@@ -5,8 +5,14 @@ import { generateClassNames, applyDisplayNames } from '../../utils/functions';
 
 const baseClassName = 'Ellipsed';
 
-const EllipsedTextWrapper = styled.div.attrs({
+const EllipsedTextContainer = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
+})`
+  display: flex;
+`;
+
+const EllipsedTextWrapper = styled.div.attrs({
+  className: generateClassNames(baseClassName, 'ellipsed-text-wrapper'),
 })<With<WithTheme, { $maxLinesCount?: number }>>(
   ({ $maxLinesCount }) => css`
     display: -webkit-box;
@@ -30,9 +36,19 @@ const TooltipContent = styled.div.attrs({
   `
 );
 
+const SuffixTextWrapper = styled.div.attrs({
+  className: generateClassNames(baseClassName, 'suffix-text-wrapper'),
+})`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+`;
+
 const Styled = applyDisplayNames({
+  EllipsedTextContainer,
   EllipsedTextWrapper,
   TooltipContent,
+  SuffixTextWrapper,
 });
 
 export default Styled;

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
+};

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);
       }
     };

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>

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;

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 (

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;

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;