Merge branch 'develop' into refactoring/global-colors

packages/client/src/pages/Home/index.js

@@ -295,7 +295,7 @@ const PureHome = (props) => {
 
   const getContextModel = () => {
     if (isFrame) return null;
-    return getFolderModel(t);
+    return getFolderModel(t, true);
   };
 
   React.useEffect(() => {

packages/client/src/store/ContextOptionsStore.js

@@ -2127,7 +2127,7 @@ class ContextOptionsStore {
     ];
   };
 
-  getFolderModel = (t) => {
+  getFolderModel = (t, isSectionMenu) => {
     const { isLoading } = this.clientLoadingStore;
     const { security, roomType, parentRoomType, isFolder } =
       this.selectedFolderStore;
@@ -2158,7 +2158,8 @@ class ContextOptionsStore {
 
     const someDialogIsOpen = checkDialogsOpen();
 
-    if (!canCreate || isMobile || someDialogIsOpen) return null;
+    if (!canCreate || (isSectionMenu && (isMobile || someDialogIsOpen)))
+      return null;
 
     const isOwner = this.userStore.user?.isOwner;
     const isRoomAdmin = this.userStore.user?.isRoomAdmin;

packages/shared/components/context-menu/sub-components/SubMenu.tsx

@@ -34,13 +34,7 @@ import ArrowIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
 import OutsdideIcon from "PUBLIC_DIR/images/arrow.outside.react.svg";
 import { isMobile as isMobileDevice } from "react-device-detect";
 
-import {
+import { classNames, ObjectUtils, DomHelpers } from "../../../utils";
-  classNames,
-  ObjectUtils,
-  DomHelpers,
-  isMobile,
-  isTablet,
-} from "../../../utils";
 import { ContextMenuSkeleton } from "../../../skeletons/context-menu";
 
 import { Scrollbar } from "../../scrollbar";
@@ -86,7 +80,7 @@ const SubMenu = (props: {
   const theme = useTheme();
 
   const onItemMouseEnter = (e: React.MouseEvent, item: ContextMenuType) => {
-    if (item.disabled || isMobileDevice) {
+    if (isMobileDevice) {
       e.preventDefault();
       return;
     }
@@ -98,18 +92,15 @@ const SubMenu = (props: {
     e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>,
     item: ContextMenuType,
   ) => {
+    const { url, onClick, items, action } = item;
+
     if (item.onLoad) {
       e.preventDefault();
-      if (!isMobile() && !isTablet()) return;
 
-      if (isMobile() || isTablet()) onMobileItemClick?.(e, item.onLoad);
+      if (!isMobileDevice) return;
-      else onLeafClick?.(e);
+
-      return;
+      onMobileItemClick?.(e, item.onLoad);
-    }
 
-    const { disabled, url, onClick, items, action } = item;
-    if (disabled) {
-      e.preventDefault();
       return;
     }
 
@@ -117,15 +108,14 @@ const SubMenu = (props: {
       e.preventDefault();
     }
 
-    if (onClick) {
+    onClick?.({ originalEvent: e, action, item });
-      onClick({ originalEvent: e, action, item });
+
+    if (items && isMobileDevice) {
+      setActiveItem(item);
+      return;
     }
 
-    if (!items) {
+    onLeafClick?.(e);
-      onLeafClick?.(e);
-    } else {
-      e.stopPropagation();
-    }
   };
 
   const position = () => {
@@ -313,18 +303,19 @@ const SubMenu = (props: {
     const dataKeys = Object.fromEntries(
       Object.entries(item).filter((el) => el[0].indexOf("data-") === 0),
     );
+
     const onClick = (
       e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>,
     ) => {
       onItemClick(e, item);
     };
+
     let content = (
       <a
         href={item.url || "#"}
         className={linkClassName || ""}
         target={item.target}
         {...dataKeys}
-        onClick={onClick}
         role="menuitem"
       >
         {icon}
@@ -363,6 +354,7 @@ const SubMenu = (props: {
           role="none"
           className={className || ""}
           style={{ ...item.style, ...style }}
+          onClick={onClick}
           onMouseEnter={(e) => onItemMouseEnter(e, item)}
         >
           {content}
@@ -383,6 +375,7 @@ const SubMenu = (props: {
         role="none"
         className={className || ""}
         style={{ ...item.style, ...style }}
+        onClick={onClick}
         onMouseEnter={(e) => onItemMouseEnter(e, item)}
       >
         {content}