@pushwoosh/dumb-components 1.1.126 → 1.1.129

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -1,8 +1,8 @@
 import { autoPlacement, size, offset, useFloating } from '@floating-ui/react-dom';
 import React, { useState, useEffect } from 'react';
-import { flushSync } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import { Place } from './styles';
-import { DropdownContext } from '../../context';
+import { DropdownContext, DropdownZIndexContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const DropdownMenu = ({
@@ -23,6 +23,7 @@ export const DropdownMenu = ({
     refs,
     floatingStyles
   } = useFloating({
+    strategy: 'fixed',
     middleware: [size({
       apply({
         rects
@@ -74,7 +75,9 @@ export const DropdownMenu = ({
     },
     ref: refs.setReference,
     isOpen
-  }), isOpen && React.createElement(Place, {
+  }), isOpen && createPortal(React.createElement(DropdownZIndexContext.Provider, {
+    value: menuZIndex
+  }, React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
     "$color": color,
@@ -82,5 +85,5 @@ export const DropdownMenu = ({
     "$fitContent": windowWidth === null && !fullWidth,
     "$scrollable": isScrollable,
     "$zIndex": menuZIndex
-  }, renderChildren(children)));
+  }, renderChildren(children))), document.body));
 };

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -1,8 +1,9 @@
 import { flip, shift, useFloating } from '@floating-ui/react-dom';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { SubmenuTriggerInner } from './styles';
-import { DropdownContext } from '../../context';
+import { DropdownContext, DropdownZIndexContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
 import { DropdownMenuItemStyled, Place } from '../../shared/styles';
 const OPEN_DELAY = 100;
@@ -14,6 +15,8 @@ export const DropdownMenuSubmenu = ({
   children
 }) => {
   const parentClose = useContext(DropdownContext);
+  const parentZIndex = useContext(DropdownZIndexContext);
+  const submenuZIndex = (parentZIndex ?? 10001) + 1;
   const [isOpen, setIsOpen] = useState(false);
   const openedByClick = useRef(false);
   const {
@@ -57,6 +60,8 @@ export const DropdownMenuSubmenu = ({
   }, [parentClose]);
   return React.createElement(DropdownContext.Provider, {
     value: closeChain
+  }, React.createElement(DropdownZIndexContext.Provider, {
+    value: submenuZIndex
   }, React.createElement(DropdownMenuItemStyled, {
     ref: refs.setReference,
     type: "button",
@@ -74,12 +79,14 @@ export const DropdownMenuSubmenu = ({
   }, React.createElement(SubmenuTriggerInner, null, React.createElement("span", null, label), React.createElement(ChevronIcon, {
     direction: "right",
     size: "small"
-  }))), isOpen && React.createElement(Place, {
+  }))), isOpen && createPortal(React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
     "$width": null,
     "$fitContent": true,
+    "$zIndex": submenuZIndex,
     onMouseEnter: clearTimers,
-    onMouseLeave: scheduleClose
-  }, renderChildren(children)));
+    onMouseLeave: scheduleClose,
+    onClick: e => e.stopPropagation()
+  }, renderChildren(children)), document.body)));
 };

package/DropdownMenu/context.d.ts

@@ -1 +1,2 @@
 export declare const DropdownContext: import("react").Context<((isOpen: false) => void) | null>;
+export declare const DropdownZIndexContext: import("react").Context<number | undefined>;

package/DropdownMenu/context.js

@@ -1,2 +1,3 @@
 import { createContext } from 'react';
-export const DropdownContext = createContext(null);
+export const DropdownContext = createContext(null);
+export const DropdownZIndexContext = createContext(undefined);

package/DropdownMenu/shared/styles.js

@@ -19,7 +19,7 @@ export const Place = styled(Vertical).withConfig({
   $scrollable
 }) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
   $zIndex
-}) => $zIndex || 10);
+}) => $zIndex || 10001);
 export const DropdownMenuItemStyled = styled.button.withConfig({
   displayName: "DropdownMenuItemStyled",
   componentId: "sc-hlq2pz-1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.126",
+  "version": "1.1.129",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",