Merge branch 'devel' into CB-5440-merge-into-internal-db

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 { MenuPanel } from './MenuPanel.js';
+import { type IMenuPanelProps, MenuPanel } from './MenuPanel.js';
 import { type IMenuState, MenuStateContext } from './MenuStateContext.js';
 import type { IMouseContextMenu } from './useMouseContextMenu.js';
 
@@ -33,6 +33,7 @@ interface IMenuProps extends React.ButtonHTMLAttributes<any> {
   rtl?: boolean;
   hasBindings?: boolean;
   panelAvailable?: boolean;
+  panelProps?: Partial<IMenuPanelProps>;
   getHasBindings?: () => boolean;
   onVisibleSwitch?: (visible: boolean) => void;
 }
@@ -55,6 +56,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
       modal,
       submenu,
       rtl,
+      panelProps,
       className,
       ...props
     },
@@ -153,6 +155,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
               panelAvailable={panelAvailable}
               hasBindings={hasBindings}
               getHasBindings={getHasBindings}
+              {...panelProps}
             >
               {items}
             </MenuPanel>
@@ -187,6 +190,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
             panelAvailable={panelAvailable}
             hasBindings={hasBindings}
             getHasBindings={getHasBindings}
+            {...panelProps}
           >
             {items}
           </MenuPanel>

webapp/packages/core-blocks/src/Menu/MenuPanel.tsx

@@ -11,12 +11,13 @@ import { Menu, type MenuStateReturn } from 'reakit';
 
 import { ErrorBoundary } from '../ErrorBoundary.js';
 import { getComputed } from '../getComputed.js';
+import { useTranslate } from '../localization/useTranslate.js';
 import { s } from '../s.js';
 import { useS } from '../useS.js';
 import { MenuEmptyItem } from './MenuEmptyItem.js';
 import style from './MenuPanel.module.css';
 
-export interface IMenuPanelProps {
+export interface IMenuPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   label: string;
   menu: MenuStateReturn; // from reakit useMenuState
   panelAvailable?: boolean;
@@ -25,11 +26,14 @@ export interface IMenuPanelProps {
   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 }, ref) {
+  forwardRef(function MenuPanel(
+    { label, menu, submenu, panelAvailable = true, rtl, getHasBindings, hasBindings, children, className, ...rest },
+    ref,
+  ) {
+    const translate = useTranslate();
     const styles = useS(style);
     const visible = menu.visible;
 
@@ -51,8 +55,9 @@ export const MenuPanel = observer<IMenuPanelProps, HTMLDivElement>(
           ref={ref}
           className={s(styles, { menu: true, modal: menu.modal, submenu }, className)}
           {...menu}
-          aria-label={label}
+          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 />}