From 92c7cef0c63ec2f6ecfd19e50d3a6c1b726d4d26 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:02:43 +0100
Subject: [PATCH] CB-6039 prevent click through menu (#3134)

* CB-6039 prevent click through menu

* CB-6039
---
 webapp/packages/core-blocks/src/Menu/Menu.tsx |  6 +---
 .../core-blocks/src/Menu/MenuPanel.tsx        |  9 ++----
 .../core-ui/src/ContextMenu/ContextMenu.tsx   |  3 +-
 .../src/ContextMenu/IContextMenuProps.ts      |  3 +-
 .../Formatters/Menu/CellMenu.module.css       |  4 +++
 .../src/DataGrid/Formatters/Menu/CellMenu.tsx | 29 ++++++++++---------
 6 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Menu/Menu.tsx b/webapp/packages/core-blocks/src/Menu/Menu.tsx
index 68f3a0cdad..4bdc61dc9f 100644
--- a/webapp/packages/core-blocks/src/Menu/Menu.tsx
+++ b/webapp/packages/core-blocks/src/Menu/Menu.tsx
@@ -16,7 +16,7 @@ import { useCombinedRef } from '../useCombinedRef.js';
 import { useObjectRef } from '../useObjectRef.js';
 import { useS } from '../useS.js';
 import style from './Menu.module.css';
-import { type IMenuPanelProps, MenuPanel } from './MenuPanel.js';
+import { MenuPanel } from './MenuPanel.js';
 import { type IMenuState, MenuStateContext } from './MenuStateContext.js';
 import type { IMouseContextMenu } from './useMouseContextMenu.js';
 
@@ -33,7 +33,6 @@ interface IMenuProps extends React.ButtonHTMLAttributes<any> {
   rtl?: boolean;
   hasBindings?: boolean;
   panelAvailable?: boolean;
-  panelProps?: Partial<IMenuPanelProps>;
   getHasBindings?: () => boolean;
   onVisibleSwitch?: (visible: boolean) => void;
 }
@@ -56,7 +55,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
       modal,
       submenu,
       rtl,
-      panelProps,
       className,
       ...props
     },
@@ -155,7 +153,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
               panelAvailable={panelAvailable}
               hasBindings={hasBindings}
               getHasBindings={getHasBindings}
-              {...panelProps}
             >
               {items}
             </MenuPanel>
@@ -190,7 +187,6 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
             panelAvailable={panelAvailable}
             hasBindings={hasBindings}
             getHasBindings={getHasBindings}
-            {...panelProps}
           >
             {items}
           </MenuPanel>
diff --git a/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx b/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx
index 070bb5f67f..1b854f2fcb 100644
--- a/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx
+++ b/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx
@@ -17,7 +17,7 @@ import { useS } from '../useS.js';
 import { MenuEmptyItem } from './MenuEmptyItem.js';
 import style from './MenuPanel.module.css';
 
-export interface IMenuPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface IMenuPanelProps {
   label: string;
   menu: MenuStateReturn; // from reakit useMenuState
   panelAvailable?: boolean;
@@ -26,13 +26,11 @@ export interface IMenuPanelProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   children: React.ReactNode | (() => React.ReactNode);
   rtl?: boolean;
   submenu?: boolean;
+  className?: string;
 }
 
 export const MenuPanel = observer<IMenuPanelProps, HTMLDivElement>(
-  forwardRef(function MenuPanel(
-    { label, menu, submenu, panelAvailable = true, rtl, getHasBindings, hasBindings, children, className, ...rest },
-    ref,
-  ) {
+  forwardRef(function MenuPanel({ label, menu, submenu, panelAvailable = true, rtl, getHasBindings, hasBindings, children, className }, ref) {
     const translate = useTranslate();
     const styles = useS(style);
     const visible = menu.visible;
@@ -57,7 +55,6 @@ export const MenuPanel = observer<IMenuPanelProps, HTMLDivElement>(
           {...menu}
           aria-label={translate(label)}
           visible={panelAvailable}
-          {...rest}
         >
           <div dir={rtl ? 'rtl' : undefined} data-s-has-bindings={hasBindings} className={s(styles, { menuBox: true })}>
             {Children.count(renderedChildren) === 0 && <MenuEmptyItem />}
diff --git a/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx b/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx
index c83e7a41eb..be50f14c97 100644
--- a/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx
+++ b/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx
@@ -17,7 +17,7 @@ import { MenuItemRenderer } from './MenuItemRenderer.js';
 // TODO the click doesn't work for React components as children
 export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
   forwardRef(function ContextMenu(
-    { mouseContextMenu, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, panelProps, ...props },
+    { mouseContextMenu, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, ...props },
     ref,
   ) {
     const translate = useTranslate();
@@ -82,7 +82,6 @@ export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
         placement={placement}
         disabled={disabled}
         disclosure={disclosure}
-        panelProps={panelProps}
         getHasBindings={handlers.hasBindings}
         onVisibleSwitch={handlers.handleVisibleSwitch}
       >
diff --git a/webapp/packages/core-ui/src/ContextMenu/IContextMenuProps.ts b/webapp/packages/core-ui/src/ContextMenu/IContextMenuProps.ts
index 5252c8f587..a6bd3f940d 100644
--- a/webapp/packages/core-ui/src/ContextMenu/IContextMenuProps.ts
+++ b/webapp/packages/core-ui/src/ContextMenu/IContextMenuProps.ts
@@ -8,7 +8,7 @@
 import type { ButtonHTMLAttributes } from 'react';
 import type { MenuInitialState } from 'reakit';
 
-import type { IMenuPanelProps, IMouseContextMenu } from '@cloudbeaver/core-blocks';
+import type { IMouseContextMenu } from '@cloudbeaver/core-blocks';
 import type { IMenuData } from '@cloudbeaver/core-view';
 
 export interface IContextMenuBaseProps extends React.PropsWithChildren {
@@ -26,7 +26,6 @@ export interface IContextMenuProps extends Omit<ButtonHTMLAttributes<any>, 'chil
   modal?: boolean;
   visible?: boolean;
   rtl?: boolean;
-  panelProps?: Partial<IMenuPanelProps>;
   children?: React.ReactNode | ContextMenuRenderingChildren;
   onVisibleSwitch?: (visible: boolean) => void;
 }
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.module.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.module.css
index a64ea14844..dde6e70cd3 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.module.css
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.module.css
@@ -6,6 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 
+.container {
+  display: flex;
+}
+
 .contextMenu {
   padding: 0;
   height: 16px;
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx
index ccd37dce02..733ab9ce43 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx
@@ -71,20 +71,21 @@ export const CellMenu = observer<Props>(function CellMenu({ model, actions, spre
 
   return (
     <SContext registry={registry}>
-      <ContextMenu
-        className={s(style, { contextMenu: true })}
-        menu={menu}
-        placement="auto-end"
-        panelProps={{ onMouseUp: markStopPropagation, onDoubleClick: stopPropagation }}
-        tabIndex={-1}
-        modal
-        disclosure
-        onVisibleSwitch={onStateSwitch}
-      >
-        <div role="button" className={s(style, { trigger: true })} onMouseUp={markStopPropagation} onDoubleClick={stopPropagation}>
-          <Icon className={s(style, { icon: true })} name="snack" viewBox="0 0 16 10" />
-        </div>
-      </ContextMenu>
+      <div className={s(style, { container: true })} onMouseUp={markStopPropagation} onDoubleClick={stopPropagation}>
+        <ContextMenu
+          className={s(style, { contextMenu: true })}
+          menu={menu}
+          placement="auto-end"
+          tabIndex={-1}
+          modal
+          disclosure
+          onVisibleSwitch={onStateSwitch}
+        >
+          <div role="button" className={s(style, { trigger: true })}>
+            <Icon className={s(style, { icon: true })} name="snack" viewBox="0 0 16 10" />
+          </div>
+        </ContextMenu>
+      </div>
     </SContext>
   );
 });