From ba12b8ebceada651ae33d9b616fe50ebdb662d3a Mon Sep 17 00:00:00 2001
From: Vitaly Shaposhnik <vitaly.shaposhnik@gmail.com>
Date: Wed, 13 Jan 2021 09:44:03 +0200
Subject: [PATCH] feat(menu): use portal

---
 packages/core/src/menu/menu.component.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/menu/menu.component.tsx b/packages/core/src/menu/menu.component.tsx
index 0027950d..3af717da 100644
--- a/packages/core/src/menu/menu.component.tsx
+++ b/packages/core/src/menu/menu.component.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import PT, { Validator } from 'prop-types';
-import { intrinsicComponent } from '@sfx-ui/utils/functions';
+import usePortal from '@sfx-ui/hooks/use-portal';
+import { intrinsicComponent, generateClassNames } from '@sfx-ui/utils/functions';
 import type { MenuProps } from './menu.props';
 import Styled from './menu.styles';
 
@@ -12,6 +14,7 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>((
 ): JSX.Element => {
   const [timeout, setTimeoutState] = useState<ReturnType<typeof setTimeout> | null>(null);
   const [rect, setRect] = useState(new DOMRect());
+  const target = usePortal(generateClassNames('Menu'));
 
   const updateRect = useCallback(() => {
     const defaultPosition = {
@@ -75,7 +78,7 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>((
     }
   };
 
-  return (
+  const render = (): JSX.Element => (
     <Styled.Wrapper open={Boolean(open)} id={id} ref={ref}>
       <Styled.Overlay onClick={handleClose} />
 
@@ -90,6 +93,11 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>((
       </Styled.Container>
     </Styled.Wrapper>
   );
+
+  return createPortal(
+    render(),
+    target,
+  );
 });
 
 export const defaultProps = {