Merge pull request #2618 from teamleadercrm/FRONT-476-make-menu-scrol…

…lable

[FRONT-476] make Menu scrollable

CHANGELOG.md

@@ -2,16 +2,24 @@
 
 ### Added
 
+- `Menu`: It is now scrollable when the available space is less than the height ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618))
+
 ### Changed
 
-- `Container`: remove 72px on xl viewport ([@farazatarodi](https://https://github.com/farazatarodi) in [#2615](https://github.com/teamleadercrm/ui/pull/2615))
+- `Container`: Removed 72px padding on xl viewport ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618))
+- [BREAKING] `Menu`: State management now should happen in the parent component ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618)).
+- `Menu`: Shadow and border now use the values from the design system ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618)).
 
 ### Deprecated
 
 ### Removed
 
+- [BREAKING] `Menu`: The `onShow` property is removed as the state management is now moved to the parent component ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618)).
+
 ### Fixed
 
+- [BREAKING] `Menu`: It now requires an anchor element for positioning when it is not static. Previously it was based on the parent element, which caused layout bugs in `flex` elements ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618)).
+
 ### Dependency updates
 
 ## [20.1.0] - 2023-03-17

src/components/menu/IconMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, SyntheticEvent, MouseEvent, useState } from 'react';
+import React, { ReactElement, ReactNode, SyntheticEvent, MouseEvent, useState, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { IconMoreMediumOutline } from '@teamleader/ui-icons';
 import IconButton from '../iconButton';
@@ -35,6 +35,9 @@ const IconMenu: GenericComponent<IconMenuProps> = ({
   ...others
 }) => {
   const [active, setActive] = useState(false);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
   const buttonIcon = icon || <IconMoreMediumOutline />;
   const boxProps = pickBoxProps(others);
 
@@ -48,17 +51,25 @@ const IconMenu: GenericComponent<IconMenuProps> = ({
     onHide && onHide();
   };
 
+  useEffect(() => {
+    if (active) {
+      onShow && onShow();
+    } else {
+      onHide && onHide();
+    }
+  }, [active, onHide, onShow]);
+
   return (
     <Box data-teamleader-ui="icon-menu" {...boxProps} className={cx(theme['icon-menu'], className)}>
-      <IconButton className={theme['icon']} icon={buttonIcon} onClick={handleButtonClick} />
+      <IconButton className={theme['icon']} icon={buttonIcon} onClick={handleButtonClick} ref={buttonRef} />
       <Menu
         active={active}
         onHide={handleMenuHide}
         onSelect={onSelect}
-        onShow={onShow}
         position={position}
         selectable={selectable}
         selected={selected}
+        anchorElement={buttonRef.current}
       >
         {children}
       </Menu>