From dd4e3e02550748cccfb4f2fae70f4570c809a599 Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Fri, 7 Jun 2024 13:23:20 +0300
Subject: [PATCH] Shared:ContextMenu:Refactoring.

---
 packages/shared/components/context-menu/ContextMenu.tsx     | 6 +++---
 .../components/context-menu/sub-components/SubMenu.tsx      | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx
index 160a9d4183..bc6eb24015 100644
--- a/packages/shared/components/context-menu/ContextMenu.tsx
+++ b/packages/shared/components/context-menu/ContextMenu.tsx
@@ -53,6 +53,8 @@ import { MobileSubMenu } from "./sub-components/MobileSubMenu";
 
 import { ContextMenuModel, ContextMenuProps } from "./ContextMenu.types";
 
+const marginTop = 16; // Indentation from the top border of the screen
+
 const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => {
   const [visible, setVisible] = React.useState(false);
   const [reshow, setReshow] = React.useState(false);
@@ -62,7 +64,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => {
   const [showMobileMenu, setShowMobileMenu] = React.useState(false);
   const [mobileSubMenuItems, setMobileSubMenuItems] = React.useState<
     ContextMenuModel[] | undefined
-  >(undefined);
+  >([]);
   const [mobileHeader, setMobileHeader] = React.useState<string>("");
 
   const [articleWidth, setArticleWidth] = React.useState(0);
@@ -279,8 +281,6 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => {
 
       // fit
       if (top < document.body.scrollTop) {
-        const marginTop = 16;
-
         if (document.body.scrollTop === 0) top = marginTop;
         else top = document.body.scrollTop;
       }
diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx
index 18e9ee4dbf..dd40d90448 100644
--- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx
+++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx
@@ -46,6 +46,9 @@ import {
   SeparatorType,
 } from "../ContextMenu.types";
 
+const submenuListMargin = 4; // Indentation of the second level menu from the first level
+const sectionPadding = 16; // Screen margin
+
 const SubMenu = (props: {
   model: ContextMenuModel[];
   root?: boolean;
@@ -185,8 +188,6 @@ const SubMenu = (props: {
       const freeSpaceRight =
         viewport.width - containerOffsetLeft - itemOuterWidth;
       const freeSpaceLeft = containerOffsetLeft;
-      const submenuListMargin = 4;
-      const sectionPadding = 16;
 
       if (isRtl) {
         if (