diff --git a/src/features/events/components/SelectionBarEllipsis.tsx b/src/features/events/components/SelectionBarEllipsis.tsx index 2cd8b7e261..ed2f941889 100644 --- a/src/features/events/components/SelectionBarEllipsis.tsx +++ b/src/features/events/components/SelectionBarEllipsis.tsx @@ -103,7 +103,16 @@ const SelectionBarEllipsis = () => { }); } - return ; + return ( + + ); }; export default SelectionBarEllipsis; diff --git a/src/zui/ZUIEllipsisMenu/index.tsx b/src/zui/ZUIEllipsisMenu/index.tsx index 505c9e9abb..bf56a82db7 100644 --- 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 = ({ items, + anchorOrigin, + transformOrigin, }) => { const [menuActivator, setMenuActivator] = useState(null); const [subMenuActivator, setSubMenuActivator] = useState( @@ -49,6 +56,9 @@ const ZUIEllipsisMenu: FunctionComponent = ({ setMenuActivator(null)} open={Boolean(menuActivator)} @@ -62,6 +72,9 @@ const ZUIEllipsisMenu: FunctionComponent = ({ marginTop: theme.spacing(1), }, }} + transformOrigin={ + transformOrigin ?? { horizontal: 'left', vertical: 'top' } + } > {items.map((item, idx) => ( { }} > { startIcon: , }, ]} + transformOrigin={{ + horizontal: 'right', + vertical: 'bottom', + }} />