import React , { useEffect , useMemo } from 'react' ; import { createPortalNode , InPortal , OutPortal } from 'react-reverse-portal' ; import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public' ; import { HeaderMenuPortalProps } from './types' ; export default function HeaderMenuPortal ( { children , setHeaderActionMenu , theme$ , } ) { const portalNode = useMemo ( ( ) => createPortalNode ( ) , [ ] ) ; useEffect ( ( ) => { setHeaderActionMenu ( ( element ) => { const mount = toMountPoint ( < OutPortal node = { portalNode } / > , { theme$ } ) ; return mount ( element ) ; } ) ; return ( ) => { portalNode . unmount ( ) ; setHeaderActionMenu ( undefined ) ; } ; } , [ portalNode , setHeaderActionMenu , theme$ ] ) ; return < InPortal node = { portalNode } > { children } < /InPortal>; }