From a53987c15b54737b63fa3e21d18d7c3c363bc702 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 10:27:54 +0200
Subject: [PATCH 01/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20merge=20the=20outlin?=
 =?UTF-8?q?e=20element=20and=20the=20list=20element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  | 38 +++++------------------------------
 src/components/menu/theme.css |  7 +++++--
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 748feb72e..522308ad2 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,4 +1,3 @@
-import uiUtilities from '@teamleader/ui-utilities';
 import cx from 'classnames';
 import React, {
   ReactElement,
@@ -81,8 +80,10 @@ const Menu = <S,>({
     },
     className,
   );
-  const outlineClassNames = cx(theme['outline'], {
-    [uiUtilities['box-shadow-200']]: position !== POSITION.STATIC,
+
+  const innerClassNames = cx(theme['menu-inner'], {
+    [theme['outline']]: outline,
+    [theme['shadow']]: position !== POSITION.STATIC,
   });
 
   const handleDocumentClick = (event: Event) => {
@@ -148,29 +149,6 @@ const Menu = <S,>({
     }
   };
 
-  const getActiveMenuStyle = () => {
-    return { clip: `rect(0 ${stateWidth}px ${stateHeight}px 0)` };
-  };
-
-  const getMenuStyleByPosition = () => {
-    switch (statePosition) {
-      case POSITION.TOP_RIGHT:
-        return { clip: `rect(0 ${stateWidth}px 0 ${stateWidth}px)` };
-      case POSITION.BOTTOM_RIGHT:
-        return { clip: `rect(${stateHeight}px ${stateWidth}px ${stateHeight}px ${stateWidth}px)` };
-      case POSITION.BOTTOM_LEFT:
-        return { clip: `rect(${stateHeight}px 0 ${stateHeight}px 0)` };
-      case POSITION.TOP_LEFT:
-        return { clip: 'rect(0 0 0 0)' };
-      default:
-        return {};
-    }
-  };
-
-  const getMenuStyle = () => {
-    return active ? getActiveMenuStyle() : getMenuStyleByPosition();
-  };
-
   const getItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
       if (!item) {
@@ -223,13 +201,7 @@ const Menu = <S,>({
 
   return (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapper} style={getRootStyle()} {...boxProps}>
-      {outline && (
-        <div
-          className={outlineClassNames}
-          style={{ ...(stateWidth && { width: Math.ceil(stateWidth) }), height: stateHeight }}
-        />
-      )}
-      <ul ref={menuNode} className={theme['menu-inner']} style={getMenuStyle()}>
+      <ul ref={menuNode} className={innerClassNames}>
         {/* An invisible element so the first element doesn't look like its selected or focused */}
         <Box className={theme['invisible-menu-item']} data-teamleader-ui="menu-item" element="li">
           <Box element="button" />
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 11c57cb03..c65f90329 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -8,7 +8,6 @@
   --menu-background-color: var(--color-white);
   --menu-padding: calc(0.6 * var(--unit)) 0;
   --menu-outline-border-radius: var(--border-radius-medium);
-  --menu-outline-box-shadow: 0 0 0 1px hsl(var(--color-teal-darkest-hsl), 24%);
   --menu-position-spacing: 4px; /* Spacing of 3px + 1px outline border */
   --menu-icon-button-height: 30px;
   --menu-item-background: var(--color-neutral-lightest);
@@ -118,13 +117,17 @@
 .outline {
   background-color: var(--menu-background-color);
   border-radius: var(--menu-outline-border-radius);
-  box-shadow: var(--menu-outline-box-shadow);
+  border: 1px solid var(--color-neutral-dark);
   display: block;
   left: 0;
   position: absolute;
   top: 0;
 }
 
+.shadow {
+  box-shadow: var(--box-shadow-200);
+}
+
 .menu-inner {
   border-radius: var(--menu-outline-border-radius);
   display: block;

From f6cb63c4288191bb4da595c373bfee3f3ff72139 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 10:52:06 +0200
Subject: [PATCH 02/33] =?UTF-8?q?=F0=9F=94=A5=20remove=20redundant=20posit?=
 =?UTF-8?q?ion=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  | 8 +-------
 src/components/menu/theme.css | 2 --
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 522308ad2..217accb4b 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -143,12 +143,6 @@ const Menu = <S,>({
     return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
   };
 
-  const getRootStyle = () => {
-    if (statePosition !== POSITION.STATIC) {
-      return { width: stateWidth, height: stateHeight };
-    }
-  };
-
   const getItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
       if (!item) {
@@ -200,7 +194,7 @@ const Menu = <S,>({
   }, [position]);
 
   return (
-    <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapper} style={getRootStyle()} {...boxProps}>
+    <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapper} {...boxProps}>
       <ul ref={menuNode} className={innerClassNames}>
         {/* An invisible element so the first element doesn't look like its selected or focused */}
         <Box className={theme['invisible-menu-item']} data-teamleader-ui="menu-item" element="li">
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index c65f90329..0040826ef 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -24,7 +24,6 @@
 }
 
 .menu {
-  width: 100%;
   display: inline-block;
   position: relative;
 
@@ -87,7 +86,6 @@
       margin: 0;
       opacity: 0;
       overflow: hidden;
-      position: absolute;
       top: 0;
       transition: opacity var(--menu-fade-duration) var(--animation-curve-default),
         clip var(--menu-expand-duration) var(--animation-curve-default);

From 0a43d622ebcde2955dfcba8515c62490b700cd73 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 11:48:03 +0200
Subject: [PATCH 03/33] =?UTF-8?q?=F0=9F=90=9B=20fix=20broken=20position=20?=
 =?UTF-8?q?state=20for=20auto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 36 ++++++++++--------------------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 217accb4b..bd9e5449f 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,14 +1,5 @@
 import cx from 'classnames';
-import React, {
-  ReactElement,
-  ReactNode,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { ReactElement, ReactNode, SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import Box, { pickBoxProps } from '../box';
 import { BoxProps } from '../box/Box';
@@ -51,6 +42,8 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
   selected?: S;
 }
 
+type Position = Exclude<MenuProps['position'], undefined>;
+
 const Menu = <S,>({
   active = false,
   children,
@@ -64,9 +57,7 @@ const Menu = <S,>({
   selected,
   ...others
 }: MenuProps<S>): ReactElement<any, any> | null => {
-  const [stateWidth, setStateWidth] = useState<number | undefined>(0);
-  const [stateHeight, setStateHeight] = useState<number | undefined>(0);
-  const [statePosition, setPosition] = useState<string | undefined>(position);
+  const [positionState, setPositionState] = useState<Position>(position);
 
   const menuNode = useRef<HTMLUListElement>(null);
   const menuWrapper = useRef<HTMLElement>(null);
@@ -74,7 +65,7 @@ const Menu = <S,>({
   const boxProps = pickBoxProps(others);
   const classNames = cx(
     theme['menu'],
-    theme[position],
+    theme[positionState],
     {
       [theme['active']]: active,
     },
@@ -83,7 +74,7 @@ const Menu = <S,>({
 
   const innerClassNames = cx(theme['menu-inner'], {
     [theme['outline']]: outline,
-    [theme['shadow']]: position !== POSITION.STATIC,
+    [theme['shadow']]: positionState !== POSITION.STATIC,
   });
 
   const handleDocumentClick = (event: Event) => {
@@ -131,7 +122,7 @@ const Menu = <S,>({
     const parentNode = menuWrapper?.current?.parentNode as HTMLElement;
 
     if (!parentNode) {
-      return;
+      return 'static';
     }
 
     const { top, left, height, width } = parentNode.getBoundingClientRect();
@@ -140,7 +131,7 @@ const Menu = <S,>({
     const toTop = top < vh / 2 - height / 2;
     const toLeft = left < vw / 2 - width / 2;
 
-    return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
+    return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}` as Position;
   };
 
   const getItems = useCallback(() => {
@@ -172,13 +163,6 @@ const Menu = <S,>({
     removeEvents();
   };
 
-  useLayoutEffect(() => {
-    const { width, height } = menuNode.current?.getBoundingClientRect() || {};
-
-    setStateWidth(width);
-    setStateHeight(height);
-  }, [menuNode.current?.getBoundingClientRect()]);
-
   useEffect(() => {
     active ? show() : hide();
 
@@ -189,9 +173,9 @@ const Menu = <S,>({
 
   useEffect(() => {
     if (position === POSITION.AUTO) {
-      setPosition(calculatePosition());
+      setPositionState(calculatePosition());
     }
-  }, [position]);
+  }, []);
 
   return (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapper} {...boxProps}>

From 02cab0b1d6195af02169149b623dfd9d175dda45 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 15:49:33 +0200
Subject: [PATCH 04/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20move=20menu=20state?=
 =?UTF-8?q?=20management=20outside=20to=20parent=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 95 +++++++++++++++---------------------
 1 file changed, 40 insertions(+), 55 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index bd9e5449f..6f1628bf2 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,10 +1,19 @@
 import cx from 'classnames';
-import React, { ReactElement, ReactNode, SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  Dispatch,
+  ReactElement,
+  ReactNode,
+  SetStateAction,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import Box, { pickBoxProps } from '../box';
 import { BoxProps } from '../box/Box';
 import MarketingMenuItem from '../marketingMenuItem';
-import { events } from '../utils';
 import isComponentOfType from '../utils/is-component-of-type';
 import { getViewport } from '../utils/utils';
 import MenuItem from './MenuItem';
@@ -22,16 +31,13 @@ const POSITION: Record<string, 'auto' | 'static' | 'top-left' | 'top-right' | 'b
 export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'className'> {
   /** If true, the menu will be active. */
   active?: boolean;
+  setActive?: Dispatch<SetStateAction<boolean>>;
   /** The content to display inside the menu. */
   children?: ReactNode;
   /** A class name for the wrapper to give custom styles. */
   className?: string;
-  /** Callback function that is fired when the menu hides. */
-  onHide?: () => void;
   /** Callback function that is fired when a menu item is clicked. */
   onSelect?: (selected: S) => void;
-  /** Callback function that is fired when the menu shows. */
-  onShow?: () => void;
   /** If true, a border is rendered around the menu. */
   outline?: boolean;
   /** The position in which the menu is rendered. */
@@ -46,11 +52,10 @@ type Position = Exclude<MenuProps['position'], undefined>;
 
 const Menu = <S,>({
   active = false,
+  setActive,
   children,
   className,
-  onHide,
   onSelect,
-  onShow,
   outline = true,
   position = 'static',
   selectable = true,
@@ -59,8 +64,8 @@ const Menu = <S,>({
 }: MenuProps<S>): ReactElement<any, any> | null => {
   const [positionState, setPositionState] = useState<Position>(position);
 
-  const menuNode = useRef<HTMLUListElement>(null);
-  const menuWrapper = useRef<HTMLElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+  const menuWrapperRef = useRef<HTMLElement>(null);
 
   const boxProps = pickBoxProps(others);
   const classNames = cx(
@@ -78,9 +83,10 @@ const Menu = <S,>({
   });
 
   const handleDocumentClick = (event: Event) => {
-    if (active && !events.targetIsDescendant(event, menuWrapper.current)) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      hide();
+    const clickedNode = event.target as HTMLElement;
+    const menuNode = menuRef.current;
+    if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
+      setActive && setActive(false);
     }
   };
 
@@ -96,30 +102,13 @@ const Menu = <S,>({
       onClick(event);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    hide();
-  };
-
-  const addEvents = () => {
-    window.setTimeout(
-      () =>
-        events.addEventsToDocument({
-          click: handleDocumentClick,
-          touchstart: handleDocumentClick,
-        }),
-      0,
-    );
-  };
-
-  const removeEvents = () => {
-    events.removeEventsFromDocument({
-      click: handleDocumentClick,
-      touchstart: handleDocumentClick,
-    });
+    if (position !== POSITION.STATIC) {
+      setActive && setActive(false);
+    }
   };
 
   const calculatePosition = () => {
-    const parentNode = menuWrapper?.current?.parentNode as HTMLElement;
+    const parentNode = menuWrapperRef?.current?.parentNode as HTMLElement;
 
     if (!parentNode) {
       return 'static';
@@ -153,33 +142,29 @@ const Menu = <S,>({
     });
   }, [children]);
 
-  const show = () => {
-    onShow && onShow();
-    addEvents();
-  };
-
-  const hide = () => {
-    onHide && onHide();
-    removeEvents();
-  };
-
   useEffect(() => {
-    active ? show() : hide();
-
-    return () => {
-      active && removeEvents();
-    };
-  }, [active]);
+    if (position === POSITION.STATIC) {
+      setActive && setActive(true);
+    }
+  }, []);
 
   useEffect(() => {
     if (position === POSITION.AUTO) {
       setPositionState(calculatePosition());
     }
-  }, []);
 
-  return (
-    <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapper} {...boxProps}>
-      <ul ref={menuNode} className={innerClassNames}>
+    if (position !== POSITION.STATIC && active) {
+      document.documentElement.addEventListener('click', handleDocumentClick);
+
+      return () => {
+        active && document.documentElement.removeEventListener('click', handleDocumentClick);
+      };
+    }
+  }, [active]);
+
+  return active ? (
+    <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapperRef} {...boxProps}>
+      <ul ref={menuRef} className={innerClassNames}>
         {/* An invisible element so the first element doesn't look like its selected or focused */}
         <Box className={theme['invisible-menu-item']} data-teamleader-ui="menu-item" element="li">
           <Box element="button" />
@@ -187,7 +172,7 @@ const Menu = <S,>({
         {getItems()}
       </ul>
     </Box>
-  );
+  ) : null;
 };
 
 export default Menu;

From 37a9c01ab1b367d6ef5672bfebd80300561e5b05 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 15:50:12 +0200
Subject: [PATCH 05/33] =?UTF-8?q?=F0=9F=92=84=20make=20border=20one=20shad?=
 =?UTF-8?q?e=20lighter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 0040826ef..5aee52caf 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -115,7 +115,7 @@
 .outline {
   background-color: var(--menu-background-color);
   border-radius: var(--menu-outline-border-radius);
-  border: 1px solid var(--color-neutral-dark);
+  border: 1px solid var(--color-neutral);
   display: block;
   left: 0;
   position: absolute;

From fde76dfec7887cf146abeb0a830928fe2cc27156 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 16:12:41 +0200
Subject: [PATCH 06/33] =?UTF-8?q?=F0=9F=94=A5=20remove=20focus=20trap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 6f1628bf2..a592529a1 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -165,10 +165,6 @@ const Menu = <S,>({
   return active ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapperRef} {...boxProps}>
       <ul ref={menuRef} className={innerClassNames}>
-        {/* An invisible element so the first element doesn't look like its selected or focused */}
-        <Box className={theme['invisible-menu-item']} data-teamleader-ui="menu-item" element="li">
-          <Box element="button" />
-        </Box>
         {getItems()}
       </ul>
     </Box>

From b3e37d38e037a5b9bc49e33d3893107c781f52ea Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 16:20:17 +0200
Subject: [PATCH 07/33] =?UTF-8?q?=F0=9F=94=A5=20remove=20redundant=20ref?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index a592529a1..da3cfbb14 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -65,7 +65,6 @@ const Menu = <S,>({
   const [positionState, setPositionState] = useState<Position>(position);
 
   const menuRef = useRef<HTMLUListElement>(null);
-  const menuWrapperRef = useRef<HTMLElement>(null);
 
   const boxProps = pickBoxProps(others);
   const classNames = cx(
@@ -108,7 +107,7 @@ const Menu = <S,>({
   };
 
   const calculatePosition = () => {
-    const parentNode = menuWrapperRef?.current?.parentNode as HTMLElement;
+    const parentNode = menuRef?.current?.parentNode as HTMLElement;
 
     if (!parentNode) {
       return 'static';
@@ -163,10 +162,8 @@ const Menu = <S,>({
   }, [active]);
 
   return active ? (
-    <Box data-teamleader-ui="menu" className={classNames} ref={menuWrapperRef} {...boxProps}>
-      <ul ref={menuRef} className={innerClassNames}>
-        {getItems()}
-      </ul>
+    <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...boxProps}>
+      <ul className={innerClassNames}>{getItems()}</ul>
     </Box>
   ) : null;
 };

From 4ec577818764d26f5a5151a99293e14ace74ae51 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 17:06:14 +0200
Subject: [PATCH 08/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20pass=20other=20props?=
 =?UTF-8?q?=20directly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index da3cfbb14..2514707ea 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -11,7 +11,7 @@ import React, {
   useState,
 } from 'react';
 
-import Box, { pickBoxProps } from '../box';
+import Box from '../box';
 import { BoxProps } from '../box/Box';
 import MarketingMenuItem from '../marketingMenuItem';
 import isComponentOfType from '../utils/is-component-of-type';
@@ -31,6 +31,7 @@ const POSITION: Record<string, 'auto' | 'static' | 'top-left' | 'top-right' | 'b
 export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'className'> {
   /** If true, the menu will be active. */
   active?: boolean;
+  /** Function to set active state. */
   setActive?: Dispatch<SetStateAction<boolean>>;
   /** The content to display inside the menu. */
   children?: ReactNode;
@@ -66,7 +67,6 @@ const Menu = <S,>({
 
   const menuRef = useRef<HTMLUListElement>(null);
 
-  const boxProps = pickBoxProps(others);
   const classNames = cx(
     theme['menu'],
     theme[positionState],
@@ -162,7 +162,7 @@ const Menu = <S,>({
   }, [active]);
 
   return active ? (
-    <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...boxProps}>
+    <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...others}>
       <ul className={innerClassNames}>{getItems()}</ul>
     </Box>
   ) : null;

From 1e517e0ae7e7618b913218886149ce5e9e9c9a71 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 17:13:17 +0200
Subject: [PATCH 09/33] =?UTF-8?q?=F0=9F=92=84=20move=20border=20and=20shad?=
 =?UTF-8?q?ow=20to=20the=20menu=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  | 9 +++------
 src/components/menu/theme.css | 4 ----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 2514707ea..481f0a2fa 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -72,15 +72,12 @@ const Menu = <S,>({
     theme[positionState],
     {
       [theme['active']]: active,
+      [theme['outline']]: outline,
+      [theme['shadow']]: positionState !== POSITION.STATIC,
     },
     className,
   );
 
-  const innerClassNames = cx(theme['menu-inner'], {
-    [theme['outline']]: outline,
-    [theme['shadow']]: positionState !== POSITION.STATIC,
-  });
-
   const handleDocumentClick = (event: Event) => {
     const clickedNode = event.target as HTMLElement;
     const menuNode = menuRef.current;
@@ -163,7 +160,7 @@ const Menu = <S,>({
 
   return active ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...others}>
-      <ul className={innerClassNames}>{getItems()}</ul>
+      <ul className={theme['menu-inner']}>{getItems()}</ul>
     </Box>
   ) : null;
 };
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 5aee52caf..86cc722f4 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -116,10 +116,6 @@
   background-color: var(--menu-background-color);
   border-radius: var(--menu-outline-border-radius);
   border: 1px solid var(--color-neutral);
-  display: block;
-  left: 0;
-  position: absolute;
-  top: 0;
 }
 
 .shadow {

From ba86dfa9496ea821b60a5df2140dfbbb3fc8cd63 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 17:23:44 +0200
Subject: [PATCH 10/33] =?UTF-8?q?=F0=9F=92=84=20remove=20active=20class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  |  1 -
 src/components/menu/theme.css | 17 ++++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 481f0a2fa..8b2f48223 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -71,7 +71,6 @@ const Menu = <S,>({
     theme['menu'],
     theme[positionState],
     {
-      [theme['active']]: active,
       [theme['outline']]: outline,
       [theme['shadow']]: positionState !== POSITION.STATIC,
     },
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 86cc722f4..d9b93da4a 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -68,7 +68,6 @@
   }
 
   &:not(.static) {
-    pointer-events: none;
     z-index: 500;
 
     & > .outline {
@@ -92,17 +91,13 @@
       white-space: nowrap;
     }
 
-    &.active {
-      pointer-events: all;
-
-      & > .outline {
-        opacity: 1;
-        transform: scale(1);
-      }
+    & > .outline {
+      opacity: 1;
+      transform: scale(1);
+    }
 
-      & > .menu-inner {
-        opacity: 1;
-      }
+    & > .menu-inner {
+      opacity: 1;
     }
   }
 }

From a67cfe1578c1412ca3d1e9b09f3db6ac7372c7fb Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 17:36:05 +0200
Subject: [PATCH 11/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20move=20border,=20bac?=
 =?UTF-8?q?kground=20and=20padding=20to=20menu=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/theme.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index d9b93da4a..0b54ca694 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -5,7 +5,6 @@
 :root {
   --menu-expand-duration: 0.3s;
   --menu-fade-duration: 0.2s;
-  --menu-background-color: var(--color-white);
   --menu-padding: calc(0.6 * var(--unit)) 0;
   --menu-outline-border-radius: var(--border-radius-medium);
   --menu-position-spacing: 4px; /* Spacing of 3px + 1px outline border */
@@ -26,6 +25,9 @@
 .menu {
   display: inline-block;
   position: relative;
+  background-color: var(--color-white);
+  border-radius: var(--menu-outline-border-radius);
+  padding: var(--menu-padding);
 
   &.top-left {
     left: 1px;
@@ -108,8 +110,6 @@
 }
 
 .outline {
-  background-color: var(--menu-background-color);
-  border-radius: var(--menu-outline-border-radius);
   border: 1px solid var(--color-neutral);
 }
 
@@ -118,13 +118,11 @@
 }
 
 .menu-inner {
-  border-radius: var(--menu-outline-border-radius);
-  display: block;
   list-style: none;
-  margin: 0;
-  padding: var(--menu-padding);
   position: relative;
   text-align: left;
+  margin: 0;
+  padding: 0;
 }
 
 .menu-item {

From 3340042e1cc89f15fdd91c07a92a46eaf58534af Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Wed, 5 Apr 2023 17:40:49 +0200
Subject: [PATCH 12/33] =?UTF-8?q?=F0=9F=94=A5=20remove=20redundant=20check?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 8b2f48223..1c97f7e94 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -152,7 +152,7 @@ const Menu = <S,>({
       document.documentElement.addEventListener('click', handleDocumentClick);
 
       return () => {
-        active && document.documentElement.removeEventListener('click', handleDocumentClick);
+        document.documentElement.removeEventListener('click', handleDocumentClick);
       };
     }
   }, [active]);

From b0e47aceee2f89bd8a6163f53a0a6e586973c0e4 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 13:27:22 +0200
Subject: [PATCH 13/33] =?UTF-8?q?=F0=9F=92=AB=20add=20fade=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/theme.css | 57 +++++++----------------------------
 1 file changed, 11 insertions(+), 46 deletions(-)

diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 0b54ca694..c0e318b60 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -4,7 +4,7 @@
 
 :root {
   --menu-expand-duration: 0.3s;
-  --menu-fade-duration: 0.2s;
+  --menu-fade-duration: 0.1s;
   --menu-padding: calc(0.6 * var(--unit)) 0;
   --menu-outline-border-radius: var(--border-radius-medium);
   --menu-position-spacing: 4px; /* Spacing of 3px + 1px outline border */
@@ -33,74 +33,39 @@
     left: 1px;
     position: absolute;
     top: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-
-    & > .outline {
-      transform-origin: 0 0;
-    }
   }
 
   &.top-right {
     position: absolute;
     right: 1px;
     top: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-
-    & > .outline {
-      transform-origin: 100% 0;
-    }
   }
 
   &.bottom-left {
     bottom: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
     left: 1px;
     position: absolute;
-
-    & > .outline {
-      transform-origin: 0 100%;
-    }
   }
 
   &.bottom-right {
     bottom: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
     position: absolute;
     right: 1px;
-
-    & > .outline {
-      transform-origin: 100% 100%;
-    }
   }
 
   &:not(.static) {
     z-index: 500;
+    white-space: nowrap;
+    animation: fadein var(--menu-fade-duration) linear;
+  }
+}
 
-    & > .outline {
-      opacity: 0;
-      transform: scale(0);
-      transition: transform var(--menu-expand-duration) var(--animation-curve-default),
-        opacity var(--menu-fade-duration) var(--animation-curve-default);
-      will-change: transform;
-    }
-
-    & > .menu-inner {
-      background: var(--color-white);
-      border-radius: var(--menu-outline-border-radius);
-      left: 0;
-      margin: 0;
-      opacity: 0;
-      overflow: hidden;
-      top: 0;
-      transition: opacity var(--menu-fade-duration) var(--animation-curve-default),
-        clip var(--menu-expand-duration) var(--animation-curve-default);
-      white-space: nowrap;
-    }
-
-    & > .outline {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    & > .menu-inner {
-      opacity: 1;
-    }
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
   }
 }
 

From 3760fcf49e68225357f4d95fa96cdc07ab376ad8 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 13:34:48 +0200
Subject: [PATCH 14/33] =?UTF-8?q?=F0=9F=90=9B=20use=20useLayoutEffect=20to?=
 =?UTF-8?q?=20prevent=20render=20before=20position=20calculation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 1c97f7e94..e03a52e4b 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -7,6 +7,7 @@ import React, {
   SyntheticEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -144,10 +145,6 @@ const Menu = <S,>({
   }, []);
 
   useEffect(() => {
-    if (position === POSITION.AUTO) {
-      setPositionState(calculatePosition());
-    }
-
     if (position !== POSITION.STATIC && active) {
       document.documentElement.addEventListener('click', handleDocumentClick);
 
@@ -157,6 +154,12 @@ const Menu = <S,>({
     }
   }, [active]);
 
+  useLayoutEffect(() => {
+    if (position === POSITION.AUTO) {
+      setPositionState(calculatePosition());
+    }
+  }, [active]);
+
   return active ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...others}>
       <ul className={theme['menu-inner']}>{getItems()}</ul>

From c2bcc2ed8e65fd26838b9c1fe80ec3e955528ea6 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 14:30:28 +0200
Subject: [PATCH 15/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20move=20state=20setti?=
 =?UTF-8?q?ng=20to=20parent=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 36 +++++++++++++-----------------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index e03a52e4b..e909ba905 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,9 +1,7 @@
 import cx from 'classnames';
 import React, {
-  Dispatch,
   ReactElement,
   ReactNode,
-  SetStateAction,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -32,8 +30,8 @@ const POSITION: Record<string, 'auto' | 'static' | 'top-left' | 'top-right' | 'b
 export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'className'> {
   /** If true, the menu will be active. */
   active?: boolean;
-  /** Function to set active state. */
-  setActive?: Dispatch<SetStateAction<boolean>>;
+  /** Callback to hide the menu. */
+  onInactive?: () => void;
   /** The content to display inside the menu. */
   children?: ReactNode;
   /** A class name for the wrapper to give custom styles. */
@@ -54,7 +52,7 @@ type Position = Exclude<MenuProps['position'], undefined>;
 
 const Menu = <S,>({
   active = false,
-  setActive,
+  onInactive,
   children,
   className,
   onSelect,
@@ -68,6 +66,8 @@ const Menu = <S,>({
 
   const menuRef = useRef<HTMLUListElement>(null);
 
+  const localActive = active || positionState === POSITION.STATIC;
+
   const classNames = cx(
     theme['menu'],
     theme[positionState],
@@ -82,7 +82,7 @@ const Menu = <S,>({
     const clickedNode = event.target as HTMLElement;
     const menuNode = menuRef.current;
     if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
-      setActive && setActive(false);
+      onInactive && onInactive();
     }
   };
 
@@ -99,17 +99,11 @@ const Menu = <S,>({
     }
 
     if (position !== POSITION.STATIC) {
-      setActive && setActive(false);
+      onInactive && onInactive();
     }
   };
 
-  const calculatePosition = () => {
-    const parentNode = menuRef?.current?.parentNode as HTMLElement;
-
-    if (!parentNode) {
-      return 'static';
-    }
-
+  const calculatePosition = (parentNode: HTMLElement) => {
     const { top, left, height, width } = parentNode.getBoundingClientRect();
     const { height: vh, width: vw } = getViewport();
 
@@ -138,12 +132,6 @@ const Menu = <S,>({
     });
   }, [children]);
 
-  useEffect(() => {
-    if (position === POSITION.STATIC) {
-      setActive && setActive(true);
-    }
-  }, []);
-
   useEffect(() => {
     if (position !== POSITION.STATIC && active) {
       document.documentElement.addEventListener('click', handleDocumentClick);
@@ -155,12 +143,14 @@ const Menu = <S,>({
   }, [active]);
 
   useLayoutEffect(() => {
-    if (position === POSITION.AUTO) {
-      setPositionState(calculatePosition());
+    const parentNode = menuRef?.current?.parentNode as HTMLElement;
+
+    if (position === POSITION.AUTO && parentNode) {
+      setPositionState(calculatePosition(parentNode));
     }
   }, [active]);
 
-  return active ? (
+  return localActive ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...others}>
       <ul className={theme['menu-inner']}>{getItems()}</ul>
     </Box>

From 1e8ce3431ff650989b0f68dd1c44393e8ce46e79 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 15:37:00 +0200
Subject: [PATCH 16/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20set=20position=20bas?=
 =?UTF-8?q?ed=20on=20the=20anchor=20element=20instead=20of=20the=20parent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  | 59 ++++++++++++++++++++++++++++++-----
 src/components/menu/theme.css | 25 +--------------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index e909ba905..c2b199b58 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -46,6 +46,8 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
   selectable?: boolean;
   /** The value of the menu item that will be highlighted. */
   selected?: S;
+  /** The anchor element */
+  anchorElement?: HTMLElement | null;
 }
 
 type Position = Exclude<MenuProps['position'], undefined>;
@@ -60,9 +62,11 @@ const Menu = <S,>({
   position = 'static',
   selectable = true,
   selected,
+  anchorElement,
   ...others
 }: MenuProps<S>): ReactElement<any, any> | null => {
   const [positionState, setPositionState] = useState<Position>(position);
+  const [calculatedPosition, setCalculatedPosition] = useState({});
 
   const menuRef = useRef<HTMLUListElement>(null);
 
@@ -70,8 +74,8 @@ const Menu = <S,>({
 
   const classNames = cx(
     theme['menu'],
-    theme[positionState],
     {
+      [theme['static']]: positionState === POSITION.STATIC,
       [theme['outline']]: outline,
       [theme['shadow']]: positionState !== POSITION.STATIC,
     },
@@ -103,8 +107,8 @@ const Menu = <S,>({
     }
   };
 
-  const calculatePosition = (parentNode: HTMLElement) => {
-    const { top, left, height, width } = parentNode.getBoundingClientRect();
+  const calculateAutoPosition = (anchorElement: HTMLElement) => {
+    const { top, left, height, width } = anchorElement.getBoundingClientRect();
     const { height: vh, width: vw } = getViewport();
 
     const toTop = top < vh / 2 - height / 2;
@@ -113,6 +117,43 @@ const Menu = <S,>({
     return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}` as Position;
   };
 
+  const calculatePosition = useCallback(() => {
+    if (anchorElement && menuRef.current) {
+      const { height } = anchorElement.getBoundingClientRect();
+      const { height: menuHeight } = menuRef.current.getBoundingClientRect();
+      console.log(menuHeight);
+
+      if (positionState === POSITION.TOP_LEFT) {
+        return {
+          top: height + 3,
+          left: 0,
+        };
+      }
+
+      if (positionState === POSITION.TOP_RIGHT) {
+        return {
+          top: height + 3,
+          right: 0,
+        };
+      }
+
+      if (positionState === POSITION.BOTTOM_LEFT) {
+        return {
+          top: -1 * (menuHeight + 3),
+          left: 0,
+        };
+      }
+
+      if (positionState === POSITION.BOTTOM_RIGHT) {
+        return {
+          top: -1 * (menuHeight + 3),
+          right: 0,
+        };
+      }
+    }
+    return {};
+  }, [anchorElement, positionState]);
+
   const getItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
       if (!item) {
@@ -143,15 +184,17 @@ const Menu = <S,>({
   }, [active]);
 
   useLayoutEffect(() => {
-    const parentNode = menuRef?.current?.parentNode as HTMLElement;
+    if (position === POSITION.AUTO && anchorElement && active) {
+      setPositionState(calculateAutoPosition(anchorElement));
+    }
 
-    if (position === POSITION.AUTO && parentNode) {
-      setPositionState(calculatePosition(parentNode));
+    if (position !== POSITION.STATIC) {
+      setCalculatedPosition(calculatePosition());
     }
-  }, [active]);
+  }, [active, anchorElement, calculatePosition, position]);
 
   return localActive ? (
-    <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} {...others}>
+    <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} style={calculatedPosition} {...others}>
       <ul className={theme['menu-inner']}>{getItems()}</ul>
     </Box>
   ) : null;
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index c0e318b60..a81a62ed0 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -29,31 +29,8 @@
   border-radius: var(--menu-outline-border-radius);
   padding: var(--menu-padding);
 
-  &.top-left {
-    left: 1px;
-    position: absolute;
-    top: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-  }
-
-  &.top-right {
-    position: absolute;
-    right: 1px;
-    top: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-  }
-
-  &.bottom-left {
-    bottom: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-    left: 1px;
-    position: absolute;
-  }
-
-  &.bottom-right {
-    bottom: calc(var(--menu-icon-button-height) + var(--menu-position-spacing));
-    position: absolute;
-    right: 1px;
-  }
-
   &:not(.static) {
+    position: absolute;
     z-index: 500;
     white-space: nowrap;
     animation: fadein var(--menu-fade-duration) linear;

From 07a1223759de89a22bb3c30458bce3f0cca90357 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 15:37:48 +0200
Subject: [PATCH 17/33] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20add=20missing=20hook?=
 =?UTF-8?q?=20dependencies?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 51 ++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index c2b199b58..43544d5d8 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -82,30 +82,37 @@ const Menu = <S,>({
     className,
   );
 
-  const handleDocumentClick = (event: Event) => {
-    const clickedNode = event.target as HTMLElement;
-    const menuNode = menuRef.current;
-    if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
-      onInactive && onInactive();
-    }
-  };
+  const handleDocumentClick = useCallback(
+    (event: Event) => {
+      const clickedNode = event.target as HTMLElement;
+      const menuNode = menuRef.current;
 
-  const handleSelect = (item: ReactElement, event: SyntheticEvent) => {
-    const { value, onClick } = item.props;
+      if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
+        onInactive && onInactive();
+      }
+    },
+    [onInactive],
+  );
 
-    if (onSelect) {
-      onSelect(value);
-    }
+  const handleSelect = useCallback(
+    (item: ReactElement, event: SyntheticEvent) => {
+      const { value, onClick } = item.props;
 
-    if (onClick) {
-      event.persist();
-      onClick(event);
-    }
+      if (onSelect) {
+        onSelect(value);
+      }
 
-    if (position !== POSITION.STATIC) {
-      onInactive && onInactive();
-    }
-  };
+      if (onClick) {
+        event.persist();
+        onClick(event);
+      }
+
+      if (position !== POSITION.STATIC) {
+        onInactive && onInactive();
+      }
+    },
+    [onInactive, onSelect, position],
+  );
 
   const calculateAutoPosition = (anchorElement: HTMLElement) => {
     const { top, left, height, width } = anchorElement.getBoundingClientRect();
@@ -171,7 +178,7 @@ const Menu = <S,>({
         return React.cloneElement(item);
       }
     });
-  }, [children]);
+  }, [children, handleSelect, selectable, selected]);
 
   useEffect(() => {
     if (position !== POSITION.STATIC && active) {
@@ -181,7 +188,7 @@ const Menu = <S,>({
         document.documentElement.removeEventListener('click', handleDocumentClick);
       };
     }
-  }, [active]);
+  }, [active, handleDocumentClick, position]);
 
   useLayoutEffect(() => {
     if (position === POSITION.AUTO && anchorElement && active) {

From b211cd3887150d526dcaa1c163df39df8775e82f Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 15:43:49 +0200
Subject: [PATCH 18/33] =?UTF-8?q?=F0=9F=92=84=20clean=20up=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/theme.css | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index a81a62ed0..95ac89166 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -3,13 +3,6 @@
 @import '@teamleader/ui-utilities';
 
 :root {
-  --menu-expand-duration: 0.3s;
-  --menu-fade-duration: 0.1s;
-  --menu-padding: calc(0.6 * var(--unit)) 0;
-  --menu-outline-border-radius: var(--border-radius-medium);
-  --menu-position-spacing: 4px; /* Spacing of 3px + 1px outline border */
-  --menu-icon-button-height: 30px;
-  --menu-item-background: var(--color-neutral-lightest);
   --menu-item-hover-background: var(--color-neutral-light);
   --menu-item-selected-background: var(--color-aqua-lightest);
   --menu-item-height: calc(3.6 * var(--unit));
@@ -26,14 +19,14 @@
   display: inline-block;
   position: relative;
   background-color: var(--color-white);
-  border-radius: var(--menu-outline-border-radius);
-  padding: var(--menu-padding);
+  border-radius: var(--border-radius-medium);
+  padding: calc(0.6 * var(--unit)) 0;
 
   &:not(.static) {
     position: absolute;
     z-index: 500;
     white-space: nowrap;
-    animation: fadein var(--menu-fade-duration) linear;
+    animation: fadein 0.1s linear;
   }
 }
 
@@ -46,11 +39,6 @@
   }
 }
 
-.invisible-menu-item {
-  opacity: 0;
-  height: 0;
-}
-
 .outline {
   border: 1px solid var(--color-neutral);
 }

From 56ab988078484c8a37fd8abfb751dc390bf9e6cc Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 15:54:27 +0200
Subject: [PATCH 19/33] =?UTF-8?q?=F0=9F=8E=A8=20rename=20item=20render=20f?=
 =?UTF-8?q?unction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 43544d5d8..4bfb5e6a4 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -161,7 +161,7 @@ const Menu = <S,>({
     return {};
   }, [anchorElement, positionState]);
 
-  const getItems = useCallback(() => {
+  const renderItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
       if (!item) {
         return item;
@@ -202,7 +202,7 @@ const Menu = <S,>({
 
   return localActive ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} style={calculatedPosition} {...others}>
-      <ul className={theme['menu-inner']}>{getItems()}</ul>
+      <ul className={theme['menu-inner']}>{renderItems()}</ul>
     </Box>
   ) : null;
 };

From 333f6e87f55fd01391beb9e9f8ce0ca5d3339cfd Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 17:29:36 +0200
Subject: [PATCH 20/33] =?UTF-8?q?=E2=9C=A8=20make=20menu=20scrollable=20wh?=
 =?UTF-8?q?en=20available=20space=20is=20smaller=20than=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx  | 25 +++++++++++++++++++++----
 src/components/menu/theme.css |  1 +
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 4bfb5e6a4..24716ea42 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -67,7 +67,7 @@ const Menu = <S,>({
 }: MenuProps<S>): ReactElement<any, any> | null => {
   const [positionState, setPositionState] = useState<Position>(position);
   const [calculatedPosition, setCalculatedPosition] = useState({});
-
+  const [maxHeight, setMaxHeight] = useState<number>();
   const menuRef = useRef<HTMLUListElement>(null);
 
   const localActive = active || positionState === POSITION.STATIC;
@@ -128,7 +128,6 @@ const Menu = <S,>({
     if (anchorElement && menuRef.current) {
       const { height } = anchorElement.getBoundingClientRect();
       const { height: menuHeight } = menuRef.current.getBoundingClientRect();
-      console.log(menuHeight);
 
       if (positionState === POSITION.TOP_LEFT) {
         return {
@@ -161,6 +160,21 @@ const Menu = <S,>({
     return {};
   }, [anchorElement, positionState]);
 
+  const calculateMaxHeight = useCallback(() => {
+    if (menuRef.current) {
+      const { top, height } = menuRef.current.getBoundingClientRect();
+      const { height: viewportHeight } = getViewport();
+
+      if (positionState === POSITION.TOP_LEFT || positionState === POSITION.TOP_RIGHT) {
+        return viewportHeight - top;
+      }
+
+      if (positionState === POSITION.BOTTOM_LEFT || positionState === POSITION.BOTTOM_RIGHT) {
+        return top + height;
+      }
+    }
+  }, [positionState]);
+
   const renderItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
       if (!item) {
@@ -197,12 +211,15 @@ const Menu = <S,>({
 
     if (position !== POSITION.STATIC) {
       setCalculatedPosition(calculatePosition());
+      setMaxHeight(calculateMaxHeight());
     }
-  }, [active, anchorElement, calculatePosition, position]);
+  }, [active, anchorElement, calculateMaxHeight, calculatePosition, maxHeight, position]);
 
   return localActive ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} style={calculatedPosition} {...others}>
-      <ul className={theme['menu-inner']}>{renderItems()}</ul>
+      <ul className={theme['menu-inner']} style={{ maxHeight }}>
+        {renderItems()}
+      </ul>
     </Box>
   ) : null;
 };
diff --git a/src/components/menu/theme.css b/src/components/menu/theme.css
index 95ac89166..9a4129fe0 100644
--- a/src/components/menu/theme.css
+++ b/src/components/menu/theme.css
@@ -53,6 +53,7 @@
   text-align: left;
   margin: 0;
   padding: 0;
+  overflow-y: auto;
 }
 
 .menu-item {

From 34c67fc4130a70d743c2a002e353e1bfccda08ff Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 17:38:16 +0200
Subject: [PATCH 21/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20manage=20Menu=20stat?=
 =?UTF-8?q?e=20in=20IconMenu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/IconMenu.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/IconMenu.tsx b/src/components/menu/IconMenu.tsx
index ca31505e5..b65e9cb74 100644
--- a/src/components/menu/IconMenu.tsx
+++ b/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}
+        onInactive={handleMenuHide}
         onSelect={onSelect}
-        onShow={onShow}
         position={position}
         selectable={selectable}
         selected={selected}
+        anchorElement={buttonRef.current}
       >
         {children}
       </Menu>

From 165c8368ce5f158d3c3c6357aa012847368a2144 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 17:38:39 +0200
Subject: [PATCH 22/33] =?UTF-8?q?=F0=9F=93=9D=20set=20Menu=20state=20as=20?=
 =?UTF-8?q?active=20in=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/menu.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
index 10e4753ab..0b122ac8a 100644
--- a/src/components/menu/menu.stories.tsx
+++ b/src/components/menu/menu.stories.tsx
@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof Menu>;
 
 export const DefaultStory = (args: ComponentStory<typeof Menu>) => (
-  <Menu {...args}>
+  <Menu active {...args}>
     <MenuItem value="foo" label="Foo label" caption="This is foo's caption" />
     <MenuItem value="bar" label="Bar label" caption="Caption of bar" />
     <MenuItem value="withChildren" caption="Caption of with children prop">

From 916b3ea34c6203e84c30fdb3b5189f051bff8f41 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 17:45:12 +0200
Subject: [PATCH 23/33] =?UTF-8?q?=F0=9F=93=B8=20update=20snapshots?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/IconMenu.spec.tsx.snap      | 64 -------------------
 .../__snapshots__/Menu.spec.tsx.snap          | 14 +---
 2 files changed, 1 insertion(+), 77 deletions(-)

diff --git a/src/components/menu/__tests__/__snapshots__/IconMenu.spec.tsx.snap b/src/components/menu/__tests__/__snapshots__/IconMenu.spec.tsx.snap
index 9d72219ed..8028dab48 100644
--- a/src/components/menu/__tests__/__snapshots__/IconMenu.spec.tsx.snap
+++ b/src/components/menu/__tests__/__snapshots__/IconMenu.spec.tsx.snap
@@ -32,70 +32,6 @@ exports[`Component - IconMenu renders 1`] = `
         </svg>
       </span>
     </button>
-    <div
-      class="box menu auto"
-      data-teamleader-ui="menu"
-      style="width: 0px; height: 0px;"
-    >
-      <div
-        class="outline undefined"
-        style="height: 0px;"
-      />
-      <ul
-        class="menu-inner"
-      >
-        <li
-          class="box invisible-menu-item"
-          data-teamleader-ui="menu-item"
-        >
-          <button
-            class="box"
-          />
-        </li>
-        <li
-          class="box display-flex"
-          data-teamleader-ui="menu-item"
-        >
-          <button
-            class="box align-items-center display-flex padding-bottom-2 padding-left-3 padding-right-3 padding-top-2 text-align-left menu-item"
-            style="flex: 1 1 auto;"
-          >
-            <div
-              class="box"
-              style="flex: 1 1 auto;"
-            >
-              <p
-                class="box text text-body darkest teal"
-                data-teamleader-ui="text"
-              >
-                Michael Scofield
-              </p>
-            </div>
-          </button>
-        </li>
-        <li
-          class="box display-flex"
-          data-teamleader-ui="menu-item"
-        >
-          <button
-            class="box align-items-center display-flex padding-bottom-2 padding-left-3 padding-right-3 padding-top-2 text-align-left menu-item"
-            style="flex: 1 1 auto;"
-          >
-            <div
-              class="box"
-              style="flex: 1 1 auto;"
-            >
-              <p
-                class="box text text-body darkest teal"
-                data-teamleader-ui="text"
-              >
-                Jim Halpert
-              </p>
-            </div>
-          </button>
-        </li>
-      </ul>
-    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/src/components/menu/__tests__/__snapshots__/Menu.spec.tsx.snap b/src/components/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
index fcd4e3f5d..f0b6656ba 100644
--- a/src/components/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
+++ b/src/components/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
@@ -3,24 +3,12 @@
 exports[`Component - Menu renders 1`] = `
 <DocumentFragment>
   <div
-    class="box menu static active"
+    class="box menu static outline"
     data-teamleader-ui="menu"
   >
-    <div
-      class="outline"
-      style="height: 0px;"
-    />
     <ul
       class="menu-inner"
     >
-      <li
-        class="box invisible-menu-item"
-        data-teamleader-ui="menu-item"
-      >
-        <button
-          class="box"
-        />
-      </li>
       <li
         class="box display-flex"
         data-teamleader-ui="menu-item"

From 1a36b4bbf8bf4799f02d27fb051ed89e50cc2ecd Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Thu, 6 Apr 2023 17:58:03 +0200
Subject: [PATCH 24/33] =?UTF-8?q?=F0=9F=93=9D=20update=20change=20log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1f45bbd2..3840b0d51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,16 +2,25 @@
 
 ### 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)).
+- [BREAKING] `Menu`: The `onHide` prop is now called `onInactive` ([@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

From 506b083e379871a1798d39cce6dc42f763860c38 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 10:30:45 +0200
Subject: [PATCH 25/33] =?UTF-8?q?=F0=9F=A9=B9=20add=20a=20container=20to?=
 =?UTF-8?q?=20story=20to=20better=20showcase=20the=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/iconMenu.stories.tsx | 15 +++++++++------
 src/components/menu/storyTheme.css       |  6 ++++++
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 src/components/menu/storyTheme.css

diff --git a/src/components/menu/iconMenu.stories.tsx b/src/components/menu/iconMenu.stories.tsx
index 882455bfc..f06dc04cd 100644
--- a/src/components/menu/iconMenu.stories.tsx
+++ b/src/components/menu/iconMenu.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import { IconMenu, MenuItem, MenuDivider } from '../../index';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import theme from './storyTheme.css';
 
 export default {
   component: IconMenu,
@@ -9,10 +10,12 @@ export default {
 } as ComponentMeta<typeof IconMenu>;
 
 export const DefaultStory = (args: ComponentStory<typeof IconMenu>) => (
-  <IconMenu {...args} active>
-    <MenuItem label="Menu item 1" />
-    <MenuItem label="Menu item 2" />
-    <MenuDivider />
-    <MenuItem label="Disabled menu item..." disabled />
-  </IconMenu>
+  <div className={theme['story-container']}>
+    <IconMenu {...args} active>
+      <MenuItem label="Menu item 1" />
+      <MenuItem label="Menu item 2" />
+      <MenuDivider />
+      <MenuItem label="Disabled menu item..." disabled />
+    </IconMenu>
+  </div>
 );
diff --git a/src/components/menu/storyTheme.css b/src/components/menu/storyTheme.css
new file mode 100644
index 000000000..d3be8409a
--- /dev/null
+++ b/src/components/menu/storyTheme.css
@@ -0,0 +1,6 @@
+.story-container {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

From 56d90edff5905771708fadb712843c22e675efc8 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 10:37:38 +0200
Subject: [PATCH 26/33] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20extract=20type=20?=
 =?UTF-8?q?Position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 24716ea42..60b23941c 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -27,6 +27,8 @@ const POSITION: Record<string, 'auto' | 'static' | 'top-left' | 'top-right' | 'b
   BOTTOM_RIGHT: 'bottom-right',
 };
 
+type Position = 'auto' | 'static' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
 export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'className'> {
   /** If true, the menu will be active. */
   active?: boolean;
@@ -41,7 +43,7 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
   /** If true, a border is rendered around the menu. */
   outline?: boolean;
   /** The position in which the menu is rendered. */
-  position?: 'auto' | 'static' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  position?: Position;
   /** If true, the menu will highlight the selected value. */
   selectable?: boolean;
   /** The value of the menu item that will be highlighted. */
@@ -50,8 +52,6 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
   anchorElement?: HTMLElement | null;
 }
 
-type Position = Exclude<MenuProps['position'], undefined>;
-
 const Menu = <S,>({
   active = false,
   onInactive,

From 718f0e0c378dd0f3d23576fcca8fd3c8623732ef Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 10:51:22 +0200
Subject: [PATCH 27/33] =?UTF-8?q?=E2=9C=A8=20allow=20position=20state=20ma?=
 =?UTF-8?q?nagement=20from=20the=20parent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 60b23941c..afcd6c5c5 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -207,6 +207,8 @@ const Menu = <S,>({
   useLayoutEffect(() => {
     if (position === POSITION.AUTO && anchorElement && active) {
       setPositionState(calculateAutoPosition(anchorElement));
+    } else {
+      setPositionState(position);
     }
 
     if (position !== POSITION.STATIC) {

From a20f95e9f44988803557434824f40acf2667653a Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 10:56:25 +0200
Subject: [PATCH 28/33] =?UTF-8?q?=F0=9F=A9=B9=20add=20story=20container=20?=
 =?UTF-8?q?to=20the=20Menu=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/menu.stories.tsx | 34 ++++++++++++++++------------
 src/components/menu/storyTheme.css   |  2 +-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
index 0b122ac8a..e61fb1aa3 100644
--- a/src/components/menu/menu.stories.tsx
+++ b/src/components/menu/menu.stories.tsx
@@ -5,6 +5,8 @@ import { Avatar, Menu, MenuItem, MenuDivider, MenuTitle, TextBody } from '../../
 import avatars from '../../static/data/avatar';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
+import theme from './storyTheme.css';
+
 const avatar = <Avatar imageUrl={avatars[0].image} size="tiny" shape="circle" />;
 
 export default {
@@ -13,21 +15,23 @@ export default {
 } as ComponentMeta<typeof Menu>;
 
 export const DefaultStory = (args: ComponentStory<typeof Menu>) => (
-  <Menu active {...args}>
-    <MenuItem value="foo" label="Foo label" caption="This is foo's caption" />
-    <MenuItem value="bar" label="Bar label" caption="Caption of bar" />
-    <MenuItem value="withChildren" caption="Caption of with children prop">
-      <TextBody color="teal">With children prop</TextBody>
-    </MenuItem>
-    <MenuItem label="Disabled ..." disabled />
-    <MenuDivider />
-    <MenuItem label="Label & avatar" icon={avatar} />
-    <MenuDivider />
-    <MenuTitle>Group title</MenuTitle>
-    <MenuItem label="Label & icon" icon={<IconClockSmallOutline />} onClick={() => console.log('You clicked me!')} />
-    <MenuItem label="Destructive" icon={<IconTrashSmallOutline />} destructive />
-    <MenuItem label="Destructive & disabled" icon={<IconTrashSmallOutline />} destructive disabled />
-  </Menu>
+  <div className={theme['story-container']}>
+    <Menu active {...args}>
+      <MenuItem value="foo" label="Foo label" caption="This is foo's caption" />
+      <MenuItem value="bar" label="Bar label" caption="Caption of bar" />
+      <MenuItem value="withChildren" caption="Caption of with children prop">
+        <TextBody color="teal">With children prop</TextBody>
+      </MenuItem>
+      <MenuItem label="Disabled ..." disabled />
+      <MenuDivider />
+      <MenuItem label="Label & avatar" icon={avatar} />
+      <MenuDivider />
+      <MenuTitle>Group title</MenuTitle>
+      <MenuItem label="Label & icon" icon={<IconClockSmallOutline />} onClick={() => console.log('You clicked me!')} />
+      <MenuItem label="Destructive" icon={<IconTrashSmallOutline />} destructive />
+      <MenuItem label="Destructive & disabled" icon={<IconTrashSmallOutline />} destructive disabled />
+    </Menu>
+  </div>
 );
 
 DefaultStory.args = {
diff --git a/src/components/menu/storyTheme.css b/src/components/menu/storyTheme.css
index d3be8409a..a19379635 100644
--- a/src/components/menu/storyTheme.css
+++ b/src/components/menu/storyTheme.css
@@ -1,5 +1,5 @@
 .story-container {
-  min-height: 300px;
+  min-height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;

From f01a365d32c7ddd49b573f04bc529a8e15c4d09a Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 15:58:31 +0200
Subject: [PATCH 29/33] =?UTF-8?q?=F0=9F=90=9B=20use=20anchor=20element=20t?=
 =?UTF-8?q?o=20calculate=20max=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index afcd6c5c5..8dcc9b611 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -161,19 +161,19 @@ const Menu = <S,>({
   }, [anchorElement, positionState]);
 
   const calculateMaxHeight = useCallback(() => {
-    if (menuRef.current) {
-      const { top, height } = menuRef.current.getBoundingClientRect();
+    if (anchorElement) {
+      const { top, height } = anchorElement.getBoundingClientRect();
       const { height: viewportHeight } = getViewport();
 
       if (positionState === POSITION.TOP_LEFT || positionState === POSITION.TOP_RIGHT) {
-        return viewportHeight - top;
+        return viewportHeight - top - height - 24;
       }
 
       if (positionState === POSITION.BOTTOM_LEFT || positionState === POSITION.BOTTOM_RIGHT) {
-        return top + height;
+        return top - 24;
       }
     }
-  }, [positionState]);
+  }, [anchorElement, positionState]);
 
   const renderItems = useCallback(() => {
     return React.Children.map(children, (item: ReactNode) => {
@@ -210,12 +210,19 @@ const Menu = <S,>({
     } else {
       setPositionState(position);
     }
+  }, [active, anchorElement, position]);
 
-    if (position !== POSITION.STATIC) {
-      setCalculatedPosition(calculatePosition());
+  useLayoutEffect(() => {
+    if (positionState !== POSITION.STATIC && positionState !== POSITION.AUTO) {
       setMaxHeight(calculateMaxHeight());
     }
-  }, [active, anchorElement, calculateMaxHeight, calculatePosition, maxHeight, position]);
+  }, [calculateMaxHeight, positionState]);
+
+  useLayoutEffect(() => {
+    if (positionState !== POSITION.STATIC) {
+      setCalculatedPosition(calculatePosition());
+    }
+  }, [calculatePosition, positionState, maxHeight]);
 
   return localActive ? (
     <Box data-teamleader-ui="menu" className={classNames} ref={menuRef} style={calculatedPosition} {...others}>

From 6dfc80f69ccf648e342d044eba274aaa5289b1a3 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 16:02:20 +0200
Subject: [PATCH 30/33] =?UTF-8?q?=F0=9F=8E=A8=20revert=20onHide=20rename?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                 |  1 -
 src/components/menu/Menu.tsx | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3840b0d51..84510003d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,6 @@
 - `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)).
-- [BREAKING] `Menu`: The `onHide` prop is now called `onInactive` ([@farazatarodi](https://https://github.com/farazatarodi) in [#2618](https://github.com/teamleadercrm/ui/pull/2618)).
 
 ### Deprecated
 
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 8dcc9b611..ab911f449 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -33,7 +33,7 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
   /** If true, the menu will be active. */
   active?: boolean;
   /** Callback to hide the menu. */
-  onInactive?: () => void;
+  onHide?: () => void;
   /** The content to display inside the menu. */
   children?: ReactNode;
   /** A class name for the wrapper to give custom styles. */
@@ -54,7 +54,7 @@ export interface MenuProps<S = any> extends Omit<BoxProps, 'children' | 'classNa
 
 const Menu = <S,>({
   active = false,
-  onInactive,
+  onHide,
   children,
   className,
   onSelect,
@@ -88,10 +88,10 @@ const Menu = <S,>({
       const menuNode = menuRef.current;
 
       if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
-        onInactive && onInactive();
+        onHide && onHide();
       }
     },
-    [onInactive],
+    [onHide],
   );
 
   const handleSelect = useCallback(
@@ -108,10 +108,10 @@ const Menu = <S,>({
       }
 
       if (position !== POSITION.STATIC) {
-        onInactive && onInactive();
+        onHide && onHide();
       }
     },
-    [onInactive, onSelect, position],
+    [onHide, onSelect, position],
   );
 
   const calculateAutoPosition = (anchorElement: HTMLElement) => {

From 2e564d59c796f04dce9e45888c3caf1d5d9b47d0 Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 16:03:11 +0200
Subject: [PATCH 31/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20adapt=20IconMenu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/IconMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/IconMenu.tsx b/src/components/menu/IconMenu.tsx
index b65e9cb74..475f52589 100644
--- a/src/components/menu/IconMenu.tsx
+++ b/src/components/menu/IconMenu.tsx
@@ -64,7 +64,7 @@ const IconMenu: GenericComponent<IconMenuProps> = ({
       <IconButton className={theme['icon']} icon={buttonIcon} onClick={handleButtonClick} ref={buttonRef} />
       <Menu
         active={active}
-        onInactive={handleMenuHide}
+        onHide={handleMenuHide}
         onSelect={onSelect}
         position={position}
         selectable={selectable}

From a7535116e4a15f9ccb4e14b10ed6d4bd84fd564d Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Fri, 7 Apr 2023 16:26:03 +0200
Subject: [PATCH 32/33] =?UTF-8?q?=F0=9F=90=9B=20use=20focusout=20event=20o?=
 =?UTF-8?q?n=20the=20menu=20element=20to=20hide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index ab911f449..43e33b290 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -87,11 +87,11 @@ const Menu = <S,>({
       const clickedNode = event.target as HTMLElement;
       const menuNode = menuRef.current;
 
-      if (clickedNode !== menuNode && clickedNode.contains(menuNode)) {
+      if (menuNode && menuNode !== clickedNode && anchorElement !== clickedNode && !menuNode.contains(clickedNode)) {
         onHide && onHide();
       }
     },
-    [onHide],
+    [anchorElement, onHide],
   );
 
   const handleSelect = useCallback(
@@ -204,6 +204,19 @@ const Menu = <S,>({
     }
   }, [active, handleDocumentClick, position]);
 
+  useEffect(() => {
+    const menuNode = menuRef.current;
+    if (!menuNode) {
+      return;
+    }
+
+    menuNode.addEventListener('focusout', handleDocumentClick);
+
+    return () => {
+      menuNode && menuNode.removeEventListener('focusout', handleDocumentClick);
+    };
+  }, [handleDocumentClick, menuRef]);
+
   useLayoutEffect(() => {
     if (position === POSITION.AUTO && anchorElement && active) {
       setPositionState(calculateAutoPosition(anchorElement));

From 013da64b24a58c5d7309b2177937c5c58da8843f Mon Sep 17 00:00:00 2001
From: farazatarodi <farazatarodi@gmail.com>
Date: Tue, 11 Apr 2023 09:54:10 +0200
Subject: [PATCH 33/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20remove=20focusout=20?=
 =?UTF-8?q?event=20listener=20on=20the=20menu=20as=20the=20click=20handler?=
 =?UTF-8?q?=20on=20the=20document=20does=20the=20job?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 43e33b290..e9ae2e719 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -204,19 +204,6 @@ const Menu = <S,>({
     }
   }, [active, handleDocumentClick, position]);
 
-  useEffect(() => {
-    const menuNode = menuRef.current;
-    if (!menuNode) {
-      return;
-    }
-
-    menuNode.addEventListener('focusout', handleDocumentClick);
-
-    return () => {
-      menuNode && menuNode.removeEventListener('focusout', handleDocumentClick);
-    };
-  }, [handleDocumentClick, menuRef]);
-
   useLayoutEffect(() => {
     if (position === POSITION.AUTO && anchorElement && active) {
       setPositionState(calculateAutoPosition(anchorElement));