Merge pull request #1528 from zetkin/issue-1508/ellipsis-menu-position

issue-1508/ellipsis menu position
zetkin · Sep 15, 2023 · 2dba8f3 · 2dba8f3
2 parents b69cb2f + ea8d581
commit 2dba8f3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/features/events/components/SelectionBarEllipsis.tsx b/src/features/events/components/SelectionBarEllipsis.tsx
@@ -103,7 +103,16 @@ const SelectionBarEllipsis = () => {
     });
   }
 
-  return <ZUIEllipsisMenu items={ellipsisMenuItems} />;
+  return (
+    <ZUIEllipsisMenu
+      anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
+      items={ellipsisMenuItems}
+      transformOrigin={{
+        horizontal: 'right',
+        vertical: 'bottom',
+      }}
+    />
+  );
 };
 
 export default SelectionBarEllipsis;
diff --git a/src/zui/ZUIEllipsisMenu/index.tsx b/src/zui/ZUIEllipsisMenu/index.tsx
@@ -10,6 +10,9 @@ import {
 } from '@mui/material';
 import { FunctionComponent, ReactElement, useState } from 'react';
 
+type horizontalType = 'left' | 'center' | 'right';
+type verticalType = 'top' | 'center' | 'bottom';
+
 interface MenuItem {
   disabled?: boolean;
   divider?: boolean;
@@ -23,10 +26,14 @@ interface MenuItem {
 
 export interface ZUIEllipsisMenuProps {
   items: MenuItem[];
+  anchorOrigin?: { horizontal: horizontalType; vertical: verticalType };
+  transformOrigin?: { horizontal: horizontalType; vertical: verticalType };
 }
 
 const ZUIEllipsisMenu: FunctionComponent<ZUIEllipsisMenuProps> = ({
   items,
+  anchorOrigin,
+  transformOrigin,
 }) => {
   const [menuActivator, setMenuActivator] = useState<null | HTMLElement>(null);
   const [subMenuActivator, setSubMenuActivator] = useState<null | HTMLElement>(
@@ -49,6 +56,9 @@ const ZUIEllipsisMenu: FunctionComponent<ZUIEllipsisMenuProps> = ({
       </Button>
       <Menu
         anchorEl={menuActivator}
+        anchorOrigin={
+          anchorOrigin ?? { horizontal: 'left', vertical: 'bottom' }
+        }
         keepMounted
         onClose={() => setMenuActivator(null)}
         open={Boolean(menuActivator)}
@@ -62,6 +72,9 @@ const ZUIEllipsisMenu: FunctionComponent<ZUIEllipsisMenuProps> = ({
             marginTop: theme.spacing(1),
           },
         }}
+        transformOrigin={
+          transformOrigin ?? { horizontal: 'left', vertical: 'top' }
+        }
       >
         {items.map((item, idx) => (
           <MenuItem

diff --git a/src/zui/ZUIOrganizeSidebar/index.tsx b/src/zui/ZUIOrganizeSidebar/index.tsx
@@ -341,6 +341,7 @@ const ZUIOrganizeSidebar = (): JSX.Element => {
                     }}
                   >
                     <ZUIEllipsisMenu
+                      anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                       items={[
                         {
                           label: (
@@ -354,6 +355,10 @@ const ZUIOrganizeSidebar = (): JSX.Element => {
                           startIcon: <Logout />,
                         },
                       ]}
+                      transformOrigin={{
+                        horizontal: 'right',
+                        vertical: 'bottom',
+                      }}
                     />
                   </Box>
                 </>