[fix] Legend is rendered outside of widget (#2417)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Ilya Boyandin <ilya@boyandin.me>

src/components/src/map/map-legend-panel.tsx

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {ComponentType, useCallback, useState} from 'react';
+import React, {ComponentType, useCallback, useContext, useState} from 'react';
 import styled from 'styled-components';
 
 import {Legend} from '../common/icons';
@@ -34,6 +34,8 @@ import {Layer} from '@kepler.gl/layers';
 import {media} from '@kepler.gl/styles';
 import {ActionHandler, toggleSplitMapViewport} from '@kepler.gl/actions';
 
+import {RootContext} from '../context';
+
 MapLegendPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory];
 
 export type MapLegendPanelFactoryDeps = [
@@ -158,13 +160,14 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
       </MapControlPanel>
     );
 
+    const rootContext = useContext(RootContext);
     if (isPinned) {
       // Pinned panel is not supported in export mode
       if (isExport) {
         return mapControlPanel;
       }
       const pinnedPanel = <PinToBottom offsetRight={offsetRight}>{mapControlPanel}</PinToBottom>;
-      return createPortal(pinnedPanel, document.body);
+      return createPortal(pinnedPanel, rootContext?.current || document.body);
     }
 
     return (