text component was substituted with StyledLabel

packages/components/selected-item/index.js

@@ -1,9 +1,7 @@
 import React from "react";
 import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
-import { StyledSelectedItem } from "./styled-selected-item";
+import { StyledSelectedItem, StyledLabel } from "./styled-selected-item";
 import PropTypes from "prop-types";
-
-import Text from "@docspace/components/text";
 import IconButton from "@docspace/components/icon-button";
 
 const SelectedItem = (props) => {
@@ -39,15 +37,14 @@ const SelectedItem = (props) => {
       isDisabled={isDisabled}
       id={id}
     >
-      <Text
+      <StyledLabel
         className={"selected-item_label"}
-        title={label}
         truncate={true}
         noSelect
         isDisabled={isDisabled}
       >
         {label}
-      </Text>
+      </StyledLabel>
       <IconButton
         className="selected-tag-removed"
         iconName={CrossReactSvgUrl}

packages/components/selected-item/styled-selected-item.js

@@ -2,6 +2,8 @@ import React from "react";
 import { Base } from "@docspace/components/themes";
 import styled, { css } from "styled-components";
 
+import NoUserSelect from "@docspace/components/utils/commonStyles";
+
 const StyledSelectedItem = styled.div`
   width: ${(props) => (props.isInline ? "fit-content" : "100%")};
   height: 32px;
@@ -29,15 +31,25 @@ const StyledSelectedItem = styled.div`
           props.theme.filterInput.selectedItems.hoverBackground};
       }
     `}
+`;
 
-  .selected-item_label {
-    line-height: 20px;
-    margin-right: 10px;
-    max-width: 23ch;
-    color: ${(props) => props.isDisabled && props.theme.text.disableColor};
-  }
+const StyledLabel = styled.div`
+  line-height: 20px;
+  margin-right: 10px;
+  max-width: 23ch;
+  color: ${(props) => props.isDisabled && props.theme.text.disableColor};
+
+  ${() => NoUserSelect}
+
+  ${(props) =>
+    props.truncate &&
+    css`
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
 `;
 
 StyledSelectedItem.defaultProps = { theme: Base };
 
-export { StyledSelectedItem };
+export { StyledSelectedItem, StyledLabel };