Merge branch 'release/v2.5.0' of https://github.com/ONLYOFFICE/DocSpace-client into release/v2.5.0

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -40,8 +40,7 @@ import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
 import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
 import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg";
 import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg";
-import { isMobile, desktop } from "@docspace/shared/utils";
-
+import { isMobile, desktop, commonInputStyles } from "@docspace/shared/utils";
 import Base from "@docspace/shared/themes/base";
 
 const fillAvailableWidth = css`
@@ -235,6 +234,31 @@ const StyledInviteInput = styled.div`
       height: 30px;
     }
   }
+
+  display: flex;
+  border: 1px solid rgb(208, 213, 218);
+  border-radius: 3px;
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .append {
+    display: ${(props) => (props.isShowCross ? "flex" : "none")};
+    align-items: center;
+    padding-right: 8px;
+    cursor: default;
+  }
+
+  ${commonInputStyles}
+
+  :focus-within {
+    border-color: ${(props) => props.theme.inputBlock.borderColor};
+  }
 `;
 
 const StyledAccessSelector = styled.div`

packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js

@@ -63,6 +63,7 @@ import {
   StyledDescription,
   StyledInviteLanguage,
   ResetLink,
+  StyledCrossIcon,
 } from "../StyledInvitePanel";
 
 import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
@@ -185,6 +186,10 @@ const InviteInput = ({
 
   const onChange = (e) => {
     const value = e.target.value;
+    onChangeInput(value);
+  };
+
+  const onChangeInput = (value) => {
     const clearValue = value.trim();
 
     setInputValue(value);
@@ -494,7 +499,7 @@ const InviteInput = ({
       )}
 
       <StyledInviteInputContainer ref={inputsRef}>
-        <StyledInviteInput ref={searchRef}>
+        <StyledInviteInput ref={searchRef} isShowCross={!!inputValue}>
           <TextInput
             className="invite-input"
             scale
@@ -508,7 +513,12 @@ const InviteInput = ({
             isAutoFocussed={true}
             onKeyDown={onKeyDown}
             type="search"
+            withBorder={false}
           />
+
+          <div className="append" onClick={() => onChangeInput("")}>
+            <StyledCrossIcon />
+          </div>
         </StyledInviteInput>
         {isAddEmailPanelBlocked ? (
           <></>