Web: Deleted document preview.

packages/client/public/locales/en/CreateEditRoomDialog.json

@@ -1,4 +1,5 @@
 {
+  "Diagonal": "Diagonal",
   "ChooseRoomType": "Choose room type",
   "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
   "CollaborationRoomTitle": "Collaboration room",
@@ -6,24 +7,43 @@
   "CreateTagOption": "Create tag",
   "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose.",
   "CustomRoomTitle": "Custom room",
+  "Center": "Center",
   "FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
   "FillingFormsRoomTitle": "Filling forms room",
+  "Horizontal": "Horizontal",
   "Icon": "Icon",
   "MakeRoomPrivateDescription": "All files in this room will be encrypted.",
   "MakeRoomPrivateLimitationsWarningDescription": "With this feature, you can invite only existing DocSpace users. After creating a room, you will not be able to change the list of users.",
   "MakeRoomPrivateTitle": "Make the Room Private",
   "PublicRoomBarDescription": "This room is available to anyone with the link. External users will have View Only permission for all the files.",
   "PublicRoomDescription": "Invite users via external links to view documents without registration. You can also embed this room into any web interface.",
+  "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying.",
+  "ViewerInfo": "Viewer info",
+  "Position": "Position",
   "ReviewRoomDescription": "Request a review or comments on the documents",
   "ReviewRoomTitle": "Review room",
   "RoomEditing": "Room editing",
   "RootLabel": "Root",
+  "Semitransparent": "Semitransparent",
   "TagsPlaceholder": "Add a tag",
+  "Text": "Text",
   "ThirdPartyStorageComboBoxPlaceholder": "Select storage",
   "ThirdPartyStorageDescription": "Use third-party services as data storage for this room. A new folder for storing this room’s data will be created in the connected storage.",
   "ThirdPartyStorageNoStorageAlert": "Before, you need to connect the corresponding service in the “Integration” section. Otherwise, the connection will not be possible.",
   "ThirdPartyStoragePermanentSettingDescription": "Files are stored in a third-party {{thirdpartyTitle}} storage in the \"{{thirdpartyFolderName}}\" folder.\n<strong>{{thirdpartyPath}}</strong>",
   "ThirdPartyStorageRoomAdminNoStorageAlert": "To connect a third-party storage, you need to add the corresponding service in the Integration section of DocSpace settings. Contact DocSpace owner or administrator to enable the integration.",
+  "UserName": "User Name",
+  "UserEmail": "User Email",
+  "UserIPAddress": "User IP Address",
   "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.",
-  "ViewOnlyRoomTitle": "View-only room"
+  "ViewOnlyRoomTitle": "View-only room",
+  "WatermarkElements": "Watermark elements",
+  "AutomaticIndexing": "Automatic indexing",
+  "AutomaticIndexingDescription": "Enable automatic indexing to index files and folders by serial number. Sorting by number will be set as default for all users.",
+  "FileLifetime": "File lifetime",
+  "FileLifetimeDescription": "Set file lifetime to automatically delete the files in this room after a defined period. Lifetime begins on the date of upload/creation of the file.",
+  "RestrictCopyAndDownload": "Restrict copy and download",
+  "RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
+  "AddWatermarksToDocuments": "Add watermarks to documents",
+  "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced."
 }

packages/client/public/locales/en/Files.json

@@ -116,6 +116,7 @@
   "PrivateRoomHeader": "Welcome to ONLYOFFICE private room where every symbol you type is encrypted",
   "PrivateRoomSupport": "Work in Private Room is available via {{organizationName}} desktop app. <3>Instructions</3>",
   "PublicRoom": "Public room",
+  "VirtualDataRoom": "Virtual Data Room",
   "RecentEmptyContainerDescription": "Your last viewed or edited docs will be displayed in this section.",
   "RecycleBinAction": "Empty trash",
   "RemovedFromFavorites": "Removed from favorites",

packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js

@@ -14,6 +14,8 @@ export const getRoomTypeTitleTranslation = (roomType = 1, t) => {
       return t("CreateEditRoomDialog:CustomRoomTitle");
     case RoomsType.PublicRoom:
       return t("Files:PublicRoom");
+    case RoomsType.VirtualDataRoom:
+      return t("Files:VirtualDataRoom");
   }
 };
 
@@ -31,6 +33,8 @@ export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => {
       return t("CreateEditRoomDialog:CustomRoomDescription");
     case RoomsType.PublicRoom:
       return t("CreateEditRoomDialog:PublicRoomDescription");
+    case RoomsType.VirtualDataRoom:
+      return t("CreateEditRoomDialog:VirtualDataRoomDescription");
   }
 };
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js

@@ -53,7 +53,7 @@ const StyledRoomType = styled.div`
   }
 
   .choose_room-forward_btn {
-    ${props =>
+    ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             margin-right: auto;
@@ -70,53 +70,53 @@ const StyledRoomType = styled.div`
 `;
 
 const StyledListItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.listItem.background};
   border: 1px solid
-    ${props => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
+    ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
   border-radius: 6px;
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
   }
 `;
 
 const StyledDropdownButton = styled(StyledRoomType)`
   border-radius: 6px;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.dropdownButton.background};
   border: 1px solid
-    ${props =>
+    ${(props) =>
       props.isOpen
         ? props.theme.createEditRoomDialog.roomType.dropdownButton
             .isOpenBorderColor
         : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownButton.descriptionText};
   }
 
   .choose_room-forward_btn {
     &.dropdown-button {
-      transform: ${props =>
+      transform: ${(props) =>
         props.isOpen ? "rotate(-90deg)" : "rotate(90deg)"};
     }
   }
 `;
 
 const StyledDropdownItem = styled(StyledRoomType)`
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.dropdownItem.background};
 
   &:hover {
-    background-color: ${props =>
+    background-color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownItem.hoverBackground};
   }
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.dropdownItem.descriptionText};
   }
 
@@ -127,15 +127,15 @@ const StyledDropdownItem = styled(StyledRoomType)`
 
 const StyledDisplayItem = styled(StyledRoomType)`
   cursor: default;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.theme.createEditRoomDialog.roomType.displayItem.background};
   border: 1px solid
-    ${props =>
+    ${(props) =>
       props.theme.createEditRoomDialog.roomType.displayItem.borderColor};
   border-radius: 6px;
 
   .choose_room-description {
-    color: ${props =>
+    color: ${(props) =>
       props.theme.createEditRoomDialog.roomType.displayItem.descriptionText};
   }
 
@@ -202,7 +202,8 @@ const RoomType = ({
       title={t(room.title)}
       onClick={onClick}
       isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDropdownButton>
   ) : type === "dropdownItem" ? (
@@ -211,14 +212,16 @@ const RoomType = ({
       title={t(room.title)}
       onClick={onClick}
       isOpen={isOpen}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDropdownItem>
   ) : (
     <StyledDisplayItem
       id={id}
       title={t(room.title)}
-      data-selected-id={selectedId}>
+      data-selected-id={selectedId}
+    >
       {content}
     </StyledDisplayItem>
   );

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -17,6 +17,8 @@ import { getRoomTypeDefaultTagTranslation } from "../data";
 
 import ImageEditor from "@docspace/components/ImageEditor";
 import PreviewTile from "@docspace/components/ImageEditor/PreviewTile";
+import VirtualDataRoomBlock from "./VirtualDataRoomBlock";
+import { RoomsType } from "@docspace/common/constants";
 import Text from "@docspace/components/text";
 
 const StyledSetRoomParams = styled.div`
@@ -54,6 +56,8 @@ const SetRoomParams = ({
 }) => {
   const [previewIcon, setPreviewIcon] = React.useState(null);
 
+  const isVDRRoom = roomParams.type === RoomsType.VirtualDataRoom;
+
   const onChangeName = (e) => {
     setIsValidTitle(true);
     setRoomParams({ ...roomParams, title: e.target.value });
@@ -117,6 +121,8 @@ const SetRoomParams = ({
         />
       )} */}
 
+      {isVDRRoom && <VirtualDataRoomBlock t={t} />}
+
       {!isEdit && enableThirdParty && (
         <ThirdPartyStorage
           t={t}

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { Trans } from "react-i18next";
+import styled from "styled-components";
+import Text from "@docspace/components/text";
+import ToggleButton from "@docspace/components/toggle-button";
+import Watermarks from "../sub-components/Watermarks";
+
+const StyledVirtualDataRoomBlock = styled.div`
+  .virtual-data-room-block {
+    margin-bottom: 18px;
+    :last-child {
+      margin-bottom: -26px;
+    }
+
+    .virtual-data-room-block_header {
+      display: flex;
+
+      .virtual-data-room-block_toggle {
+        margin-left: auto;
+        margin-right: 28px;
+      }
+    }
+    .virtual-data-room-block_description {
+      color: ${({ theme }) => theme.editLink.text.color};
+    }
+    .virtual-data-room-block_content {
+      margin-top: 16px;
+    }
+  }
+`;
+
+const Block = ({
+  headerText,
+  bodyText,
+  onChange,
+  isDisabled,
+  isChecked,
+  children,
+}) => {
+  return (
+    <div className="virtual-data-room-block">
+      <div className="virtual-data-room-block_header">
+        <Text fontWeight={600} fontSize="13px">
+          {headerText}
+        </Text>
+        <ToggleButton
+          isDisabled={isDisabled}
+          isChecked={isChecked}
+          onChange={onChange}
+          className="virtual-data-room-block_toggle"
+        />
+      </div>
+      <Text
+        fontWeight={400}
+        fontSize="12px"
+        className="virtual-data-room-block_description"
+      >
+        {bodyText}
+      </Text>
+      {isChecked && (
+        <div className="virtual-data-room-block_content">{children}</div>
+      )}
+    </div>
+  );
+};
+
+const VirtualDataRoomBlock = ({ t }) => {
+  const role = t("Translations:RoleViewer");
+
+  const [automaticIndexingChecked, setAutomaticIndexingChecked] =
+    useState(false);
+  const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false);
+  const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false);
+  const [watermarksChecked, setWatermarksChecked] = useState(false);
+
+  const onChangeAutomaticIndexing = () => {
+    setAutomaticIndexingChecked(!automaticIndexingChecked);
+  };
+
+  const onChangeFileLifetime = () => {
+    setFileLifetimeChecked(!fileLifetimeChecked);
+  };
+
+  const onChangeRestrictCopyAndDownload = () => {
+    setCopyAndDownloadChecked(!copyAndDownloadChecked);
+  };
+
+  const onChangeAddWatermarksToDocuments = () => {
+    setWatermarksChecked(!watermarksChecked);
+  };
+
+  return (
+    <StyledVirtualDataRoomBlock>
+      <Block
+        headerText={t("AutomaticIndexing")}
+        bodyText={t("AutomaticIndexingDescription")}
+        onChange={onChangeAutomaticIndexing}
+        isDisabled={false}
+        isChecked={automaticIndexingChecked}
+      />
+      <Block
+        headerText={t("FileLifetime")}
+        bodyText={t("FileLifetimeDescription")}
+        onChange={onChangeFileLifetime}
+        isDisabled={false}
+        isChecked={fileLifetimeChecked}
+      />
+      <Block
+        headerText={t("RestrictCopyAndDownload")}
+        bodyText={
+          <Trans t={t} i18nKey="RestrictCopyAndDownloadDescription">
+            Enable this setting to disable downloads and content copying for
+            users with the {{ role }} role.
+          </Trans>
+        }
+        onChange={onChangeRestrictCopyAndDownload}
+        isDisabled={false}
+        isChecked={copyAndDownloadChecked}
+      />
+
+      <Block
+        headerText={t("AddWatermarksToDocuments")}
+        bodyText={t("AddWatermarksToDocumentsDescription")}
+        onChange={onChangeAddWatermarksToDocuments}
+        isDisabled={false}
+        isChecked={watermarksChecked}
+      >
+        <Watermarks />
+      </Block>
+    </StyledVirtualDataRoomBlock>
+  );
+};
+
+export default VirtualDataRoomBlock;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const StyledWatermark = styled.div`
+  margin-top: 16px;
+  // display: grid;
+  // grid-gap: 24px;
+  //grid-template-columns: minmax(214px, 324px) 1fr;
+
+  .watermark-title {
+    margin: 16px 0 4px 0;
+  }
+  .watermark-checkbox {
+    margin: 18px 0 0 0;
+  }
+`;
+const StyledBody = styled.div`
+  .types-content {
+  }
+`;
+
+export { StyledWatermark, StyledBody };

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/Text.js

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import TextInput from "@docspace/components/text-input";
+import ComboBox from "@docspace/components/combobox";
+import Text from "@docspace/components/text";
+import Checkbox from "@docspace/components/checkbox";
+import { StyledWatermark } from "./StyledComponent";
+
+const options = (t) => [
+  { key: "diagonal", label: t("Diagonal") },
+  { key: "horizontal", label: t("Horizontal") },
+];
+const TextWatermark = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+
+  const typesOptions = options(t);
+
+  const [value, setValue] = useState("");
+  const [isChecked, setIsChecked] = useState(true);
+  const [selectedOption, setSelectedOption] = useState(typesOptions[0]);
+
+  const onChange = (e) => {
+    const { value } = e.target;
+    setValue(value);
+  };
+
+  const onTypeChange = (item) => {
+    setSelectedOption(item);
+  };
+  const onCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <StyledWatermark>
+      <div>
+        <TextInput
+          scale
+          value={value}
+          tabIndex={1}
+          isAutoFocussed
+          onChange={onChange}
+        />
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("Position")}
+        </Text>
+        <ComboBox
+          selectedOption={selectedOption}
+          options={typesOptions}
+          onSelect={onTypeChange}
+          scaled
+        />
+        <Checkbox
+          className="watermark-checkbox"
+          label={t("Semitransparent")}
+          onChange={onCheckboxChange}
+          isChecked={isChecked}
+        />
+      </div>
+    </StyledWatermark>
+  );
+};
+export default TextWatermark;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import TabContainer from "@docspace/components/tabs-container";
+import TextInput from "@docspace/components/text-input";
+import Text from "@docspace/components/text";
+import Checkbox from "@docspace/components/checkbox";
+
+import { StyledWatermark } from "./StyledComponent";
+
+const options = (t) => [
+  {
+    key: "userName",
+    title: t("UserName"),
+  },
+  {
+    key: "userEmail",
+    title: t("UserEmail"),
+  },
+  {
+    key: "userIPAddress",
+    title: t("UserIPAddress"),
+  },
+  {
+    key: "currentDate",
+    title: t("Common:CurrentDate"),
+  },
+  {
+    key: "RoomName",
+    title: t("Common:RoomName"),
+  },
+];
+const ViewerInfoWatermark = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+
+  const [isChecked, setIsChecked] = useState(true);
+  const [elements, setElements] = useState({
+    userName: false,
+    userEmail: false,
+    userIP: false,
+    currentDate: false,
+    roomName: false,
+  });
+
+  const dataTabs = options(t);
+
+  const onSelect = (item) => {
+    const updatedElem = elements[item.key];
+    const key = item.key;
+    setElements({ ...elements, [key]: !updatedElem });
+  };
+  const onCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <StyledWatermark>
+      <div>
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("WatermarkElements")}
+        </Text>
+        <TabContainer
+          elements={dataTabs}
+          onSelect={onSelect}
+          withBodyScroll={false}
+          multiple
+          withBorder
+        />
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("Position")}
+        </Text>
+        <TextInput scale value={t("Center")} isReadOnly />
+        <Checkbox
+          className="watermark-checkbox"
+          label={t("Semitransparent")}
+          onChange={onCheckboxChange}
+          isChecked={isChecked}
+        />
+      </div>
+    </StyledWatermark>
+  );
+};
+export default ViewerInfoWatermark;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import RadioButtonGroup from "@docspace/components/radio-button-group";
+
+import TextWatermark from "./Text";
+import ViewerInfoWatermark from "./ViewerInfo";
+import { StyledBody } from "./StyledComponent";
+
+const textWatermark = "text",
+  imageWatermark = "image",
+  viewerInfoWatermark = "viewerInfo";
+
+const options = (t) => [
+  {
+    label: t("ViewerInfo"),
+    value: viewerInfoWatermark,
+  },
+  {
+    label: t("Text"),
+    value: textWatermark,
+  },
+  {
+    label: t("Common:Image"),
+    value: imageWatermark,
+  },
+];
+const Watermarks = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+  const [type, setType] = useState(textWatermark);
+
+  const onSelectType = (e) => {
+    const { value } = e.target;
+
+    setType(value);
+  };
+
+  const typeOptions = options(t);
+
+  return (
+    <StyledBody>
+      <RadioButtonGroup
+        name="watermarks-radiobutton"
+        fontSize="13px"
+        fontWeight="400"
+        spacing="8px"
+        options={typeOptions}
+        selected={type}
+        onClick={onSelectType}
+      />
+
+      {type === textWatermark && <TextWatermark />}
+      {type === viewerInfoWatermark && <ViewerInfoWatermark />}
+    </StyledBody>
+  );
+};
+
+export default Watermarks;

packages/common/constants/index.js

@@ -134,6 +134,7 @@ export const RoomsType = Object.freeze({
   // ReviewRoom: 3, //TODO: Restore when certs will be done
   // ReadOnlyRoom: 4, //TODO: Restore when certs will be done
   PublicRoom: 6,
+  VirtualDataRoom: 7,
   CustomRoom: 5,
 });
 

packages/components/room-logo/index.js

@@ -10,6 +10,7 @@ import FillingFormSvg32Url from "PUBLIC_DIR/images/icons/32/room/filling.form.sv
 import ReviewSvg32Url from "PUBLIC_DIR/images/icons/32/room/review.svg?url";
 import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url";
 import PublicRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url";
+import VirtualDataRoomRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/virtual-data.svg?url";
 
 import { RoomsType } from "@docspace/common/constants";
 
@@ -47,6 +48,8 @@ const RoomLogo = ({
         return CustomSvg32Url;
       case RoomsType.PublicRoom:
         return PublicRoomSvg32Url;
+      case RoomsType.VirtualDataRoom:
+        return VirtualDataRoomRoomSvg32Url;
       default:
         return "";
     }

packages/components/tabs-container/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import Text from "../text";
-import { NavItem, Label, StyledScrollbar } from "./styled-tabs-container";
+import { NavItem, StyledScrollbar } from "./styled-tabs-container";
 
 import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
 
@@ -19,8 +19,11 @@ class TabContainer extends Component {
       item--;
     }
 
+    const { multiple, selectedItem } = this.props;
+    const selectedIem = multiple ? [selectedItem] : selectedItem;
+
     this.state = {
-      activeTab: this.props.selectedItem,
+      activeTab: selectedIem,
       onScrollHide: true,
     };
 
@@ -28,11 +31,37 @@ class TabContainer extends Component {
   }
 
   titleClick = (index, item, ref) => {
-    if (this.state.activeTab !== index) {
-      this.setState({ activeTab: index });
+    const { multiple, onSelect } = this.props;
+    const { activeTab } = this.state;
+
+    const setSelection = () => {
       let newItem = Object.assign({}, item);
       delete newItem.content;
-      this.props.onSelect && this.props.onSelect(newItem);
+      onSelect && onSelect(newItem);
+    };
+
+    if (multiple) {
+      const indexOperation = () => {
+        let tempArray = [...activeTab];
+
+        if (activeTab.indexOf(index) !== -1) {
+          return activeTab.filter((item) => item !== index);
+        }
+
+        tempArray.push(index);
+        return tempArray;
+      };
+
+      const updatedActiveTab = indexOperation();
+
+      this.setState({ activeTab: updatedActiveTab });
+      setSelection();
+      return;
+    }
+
+    if (activeTab !== index) {
+      this.setState({ activeTab: index });
+      setSelection();
 
       this.setTabPosition(index, ref);
     }
@@ -152,39 +181,56 @@ class TabContainer extends Component {
   render() {
     //console.log("Tabs container render");
 
-    const { isDisabled, elements } = this.props;
+    const { isDisabled, elements, withBodyScroll, multiple, withBorder } =
+      this.props;
     const { activeTab, onScrollHide } = this.state;
 
+    const content = (
+      <NavItem className="className_items" withBodyScroll={withBodyScroll}>
+        {elements.map((item, index) => {
+          const isSelected = multiple
+            ? activeTab.indexOf(index) !== -1
+            : activeTab === index;
+
+          return (
+            <ColorTheme
+              {...this.props}
+              id={item.id}
+              themeId={ThemeType.TabsContainer}
+              onMouseMove={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
+              ref={this.arrayRefs[index]}
+              onClick={() => this.onClick(index, item)}
+              key={item.key}
+              selected={isSelected}
+              isDisabled={isDisabled}
+              multiple={multiple}
+              withBorder={withBorder}
+            >
+              <Text fontWeight={600} className="title_style" fontSize="13px">
+                {item.title}
+              </Text>
+            </ColorTheme>
+          );
+        })}
+      </NavItem>
+    );
+
     return (
       <>
-        <StyledScrollbar
-          autoHide={onScrollHide}
-          stype="preMediumBlack"
-          className="scrollbar"
-          ref={this.scrollRef}
-        >
-          <NavItem className="className_items">
-            {elements.map((item, index) => (
-              <ColorTheme
-                {...this.props}
-                id={item.id}
-                themeId={ThemeType.TabsContainer}
-                onMouseMove={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-                ref={this.arrayRefs[index]}
-                onClick={() => this.onClick(index, item)}
-                key={item.key}
-                selected={activeTab === index}
-                isDisabled={isDisabled}
-              >
-                <Text fontWeight={600} className="title_style" fontSize="13px">
-                  {item.title}
-                </Text>
-              </ColorTheme>
-            ))}
-          </NavItem>
-        </StyledScrollbar>
-        <div>{elements[activeTab].content}</div>
+        {withBodyScroll ? (
+          <StyledScrollbar
+            autoHide={onScrollHide}
+            stype="preMediumBlack"
+            className="scrollbar"
+            ref={this.scrollRef}
+          >
+            {content}
+          </StyledScrollbar>
+        ) : (
+          content
+        )}
+        <div>{elements[activeTab]?.content}</div>
       </>
     );
   }
@@ -199,10 +245,19 @@ TabContainer.propTypes = {
   onSelect: PropTypes.func,
   /** Selected title of tabs container */
   selectedItem: PropTypes.number,
+  /** Enables Body scroll */
+  withBodyScroll: PropTypes.bool,
+  /** Enables multiple select  */
+  multiple: PropTypes.bool,
+  /** Indicates that component contain border */
+  withBorder: PropTypes.bool,
 };
 
 TabContainer.defaultProps = {
   selectedItem: 0,
+  withBodyScroll: true,
+  multiple: false,
+  withBorder: false,
 };
 
 export default TabContainer;

packages/components/tabs-container/styled-tabs-container.js

@@ -14,12 +14,24 @@ const NavItem = styled.div`
   position: relative;
   white-space: nowrap;
   display: flex;
+
+  ${(props) =>
+    !props.withBodyScroll &&
+    css`
+      gap: 8px;
+      flex-wrap: wrap;
+    `};
 `;
 NavItem.defaultProps = { theme: Base };
 
 const Label = styled.div`
   height: ${(props) => props.theme.tabsContainer.label.height};
   border-radius: ${(props) => props.theme.tabsContainer.label.borderRadius};
+  ${(props) =>
+    props.withBorder &&
+    css`
+      border: ${props.theme.tabsContainer.label.border};
+    `}
   min-width: ${(props) => props.theme.tabsContainer.label.minWidth};
   width: ${(props) => props.theme.tabsContainer.label.width};
 
@@ -40,7 +52,7 @@ const Label = styled.div`
   ${(props) =>
     props.selected
       ? css`
-          cursor: default;
+          cursor: ${!props.multiple ? "default" : "pointer"};
           background-color: ${(props) =>
             props.theme.tabsContainer.label.backgroundColor};
           .title_style {

packages/components/themes/base.js

@@ -971,6 +971,7 @@ const Base = {
       backgroundColor: blueLightMid,
       hoverBackgroundColor: grayLight,
       disableBackgroundColor: grayLightMid,
+      border: `1px solid ${grayLightMid}`,
 
       title: {
         margin: "7px 15px 7px 15px",

packages/components/themes/dark.js

@@ -47,7 +47,7 @@ const {
   strongBlue,
   lightGrayishStrongBlue,
   darkRed,
-
+  darkDividersColor,
   darkErrorStatus,
 } = globalColors;
 
@@ -962,7 +962,7 @@ const Dark = {
       backgroundColor: "#d6d6d6",
       hoverBackgroundColor: "#3D3D3D",
       disableBackgroundColor: "#292929",
-
+      border: `1px solid ${darkDividersColor}`,
       title: {
         margin: "7px 15px 7px 15px",
         overflow: "hidden",

packages/components/utils/globalColors.js

@@ -6,6 +6,7 @@ const globalColors = {
   grayLight: "#F8F9F9",
   grayMaxLight: "#eeeeee",
   grayLightMid: "#ECEEF1",
+  darkDividersColor: "#242424",
   graySilver: "#D8D8D8",
   grayMid: "#D0D5DA",
   gray: "#A3A9AE",

public/images/WM.react.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="140" viewBox="0 0 100 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87 13.5H99.5V139.5H0.5V0.5H86.5V13V13.5H87Z" fill="white" stroke="#D0D5DA"/>
+<path d="M87 0L100 13H87V0Z" fill="#F3F4F4"/>
+</svg>

public/images/icons/32/room/virtual-data.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 9.5C13 8.67157 13.6716 8 14.5 8H17.5C18.3284 8 19 8.67157 19 9.5V10H22C23.1046 10 24 10.8954 24 12V15V16H23H18V14H22V12H19H17H15H13H10V14H14V16H9H8V15V12C8 10.8954 8.89543 10 10 10H13V9.5ZM11 20V17H9V20C9 21.1046 9.89543 22 11 22H21C22.1046 22 23 21.1046 23 20V17H21V20H11ZM17 14H15V17C15 17.5523 15.4477 18 16 18C16.5523 18 17 17.5523 17 17V14Z" fill="#509ADE"/>
+<rect x="1" y="1" width="30" height="30" rx="5" stroke="#509ADE" stroke-width="2"/>
+</svg>

public/locales/en/Common.json

@@ -81,6 +81,7 @@
   "Culture_uk-UA": "Українська (Україна)",
   "Culture_vi": "Tiếng Việt (Việt Nam)",
   "Culture_zh-CN": "中文（简体，中国）",
+  "CurrentDate": "Current Date",
   "Date": "Date",
   "Delete": "Delete",
   "DescriptionOfTheEveryoneRole": "The form is available for filling out by all participants of this room.",
@@ -222,6 +223,7 @@
   "Review": "Review",
   "Role": "Role",
   "Room": "Room",
+  "RoomName": "Room Name",
   "RoomAdmin": "Room admin",
   "Rooms": "Rooms",
   "SameEmail": "You can't use the same email address",