Merge branch 'develop' into feature/templates

packages/client/src/components/Article/MainButton/index.js

@@ -920,7 +920,6 @@ export default inject(
     const isFolder = selectedFolderStore.isFolder;
 
     const { isAdmin, isOwner, isRoomAdmin } = userStore.user;
-    console.log(userStore.user);
     const { isGracePeriod } = currentTariffStatusStore;
 
     const { setOformFromFolderId, oformsFilter } = oformsStore;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js

@@ -134,11 +134,6 @@ const TagDropdown = ({
   const dropdownItems = calcualateDisplayedDropdownItems();
 
   return (
-    <StyledDropDownWrapper
-      ref={dropdownRef}
-      className="dropdown-content-wrapper"
-      onMouseDown={preventDefault}
-    >
     <StyledDropDown
       className="dropdown-content"
       open={open}
@@ -148,10 +143,11 @@ const TagDropdown = ({
       hasItems={!!dropdownItems.length}
       clickOutsideAction={onClickOutside}
       withBackdrop={false}
+      isDefaultMode={false}
+      manualY="54px"
     >
       {dropdownItems}
     </StyledDropDown>
-    </StyledDropDownWrapper>
   );
 };
 

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

@@ -33,6 +33,8 @@ import InputParam from "../Params/InputParam";
 import TagDropdown from "./TagDropdown";
 
 const StyledTagInput = styled.div`
+  position: relative;
+
   .set_room_params-tag_input {
     &-label_wrapper {
       &-label {

packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js

@@ -44,13 +44,14 @@ const RoomCell = ({ sideColor, item }) => {
     setIsTooltipLoading(true);
     try {
       const folderPath = await getFolderPath(originId);
-      if (folderPath[0].id === CategoryType.Shared) folderPath.shift();
+      if (folderPath[0].id === CategoryType.SharedRoom) folderPath.shift();
       setPath(folderPath);
     } catch (e) {
       console.error(e);
       setPath([{ id: 0, title: originRoomTitle || originTitle }]);
-    }
+    } finally {
       setIsTooltipLoading(false);
+    }
   };
 
   const canVisibleTitle = originRoomTitle || originTitle;

packages/client/src/store/FilesStore.js

@@ -3997,12 +3997,12 @@ class FilesStore {
     });
   };
 
-  //Duplicate of countTilesInRow, used to update the number of tiles in a row after the window is resized.
+  //Used to update the number of tiles in a row after the window is resized.
   getCountTilesInRow = () => {
     const isDesktopView = isDesktop();
+    const isMobileView = isMobile();
     const tileGap = isDesktopView ? 16 : 14;
     const minTileWidth = 216 + tileGap;
-    const body = document.getElementById("section");
 
     const elem = document.getElementsByClassName("section-wrapper-content")[0];
     let containerWidth = 0;
@@ -4017,10 +4017,11 @@ class FilesStore {
         elemPadding.split("px")[3];
     }
 
-    const sectionPadding = body?.offsetWidth - containerWidth - tileGap + 1;
+    containerWidth += tileGap;
-    const sectionWidth = body ? body.offsetWidth - sectionPadding : 0;
+    if (!isMobileView) containerWidth -= 1;
+    if (!isDesktopView) containerWidth += 3; //tablet tile margin -3px (TileContainer.js)
 
-    return Math.floor(sectionWidth / minTileWidth);
+    return Math.floor(containerWidth / minTileWidth);
   };
 
   setInvitationLinks = async (roomId, title, access, linkId) => {

packages/client/src/store/HotkeyStore.js

@@ -694,15 +694,7 @@ class HotkeyStore {
   };
 
   get countTilesInRow() {
-    const isDesktopView = isDesktop();
+    return this.filesStore.getCountTilesInRow();
-    const tileGap = isDesktopView ? 16 : 14;
-    const minTileWidth = 216 + tileGap;
-    const sectionPadding = isDesktopView ? 24 : 16;
-
-    const body = document.getElementById("section");
-    const sectionWidth = body ? body.offsetWidth - sectionPadding : 0;
-
-    return Math.floor(sectionWidth / minTileWidth);
   }
 
   get division() {

packages/shared/api/files/index.ts

@@ -137,7 +137,6 @@ export async function getFolderPath(folderId: number) {
   };
 
   const res = (await request(options)) as TGetFolderPath;
-
   return res;
 }
 

packages/shared/components/room-icon/index.tsx

@@ -79,7 +79,8 @@ const StyledIcon = styled.div<{
 
   .room-icon_badge {
     position: absolute;
-    margin: 24px 0 0 24px;
+    margin-block: 24px 0;
+    margin-inline: 24px 0;
 
     .room-icon-button {
       width: 12px;

packages/shared/components/selector/Selector.tsx

@@ -28,6 +28,8 @@
 
 import React from "react";
 
+import { ButtonKeys } from "../../enums";
+
 import { Header } from "./sub-components/Header";
 import { Body } from "./sub-components/Body";
 import { Footer } from "./sub-components/Footer";
@@ -383,6 +385,19 @@ const Selector = ({
     setFooterVisible(isEqual);
   }, [selectedItems, newSelectedItems]);
 
+  React.useEffect(() => {
+    const onKeyboardAction = (e: KeyboardEvent) => {
+      if (e.key === ButtonKeys.esc) {
+        onCancel?.();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyboardAction);
+    return () => {
+      window.removeEventListener("keydown", onKeyboardAction);
+    };
+  }, [onCancel]);
+
   React.useLayoutEffect(() => {
     if (items) {
       if (

packages/shared/components/tooltip/Tooltip.tsx

@@ -116,6 +116,20 @@ const Tooltip = React.forwardRef<TooltipRefProps, TooltipProps>(
             flip({
               crossAxis: false,
               fallbackAxisSideDirection,
+              fallbackPlacements: [
+                "right",
+                "bottom",
+                "left",
+                "top",
+                "top-start",
+                "top-end",
+                "right-start",
+                "right-end",
+                "bottom-start",
+                "bottom-end",
+                "left-start",
+                "left-end",
+              ],
             }),
             shift(),
           ]}

packages/shared/enums/index.ts

@@ -455,7 +455,7 @@ export const enum ParseErrorTypes {
 
 export const enum ButtonKeys {
   enter = "enter",
-  esc = "esc",
+  esc = "Escape",
   tab = "Tab",
 }