@pushwoosh/dumb-components 1.1.129 → 1.1.130

package/Drawer/components/Drawer/Drawer.js

@@ -2,13 +2,14 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { drawerSizes } from './maps';
 import { DrawerBoxTrans, DrawerBox, LockBody, DrawerInner, DrawerContainer } from './styles';
+import { useLayer } from '../../../hooks';
 function createDivElement() {
   return document.createElement('div');
 }
 export function Drawer({
   size,
   isOpen,
-  zIndex = 10000,
+  zIndex,
   onClose,
   children,
   padding,
@@ -17,25 +18,18 @@ export function Drawer({
 }) {
   const ref = useRef();
   const [element] = useState(createDivElement);
+  const {
+    zIndex: resolvedZIndex
+  } = useLayer({
+    isOpen,
+    onClose,
+    zIndex
+  });
   useEffect(() => {
     var _document$body$lastCh;
     (_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
     return () => element.remove();
   }, [element]);
-  useEffect(() => {
-    if (isOpen && onClose) {
-      const onCloseEventHandler = event => {
-        if (event.key === 'Escape') {
-          onClose();
-        }
-      };
-      window.addEventListener('keydown', onCloseEventHandler);
-      return () => {
-        window.removeEventListener('keydown', onCloseEventHandler);
-      };
-    }
-    return () => {};
-  }, [isOpen, onClose]);
   const handleClose = useCallback(event => {
     if (event.target === event.currentTarget) {
       onClose === null || onClose === void 0 || onClose();
@@ -52,7 +46,7 @@ export function Drawer({
     withoutLockScreen: withoutLockScreen
   }, React.createElement(DrawerBox, {
     ref: ref,
-    "$zIndex": zIndex
+    "$zIndex": resolvedZIndex
   }, React.createElement(LockBody, null), React.createElement(DrawerInner, {
     onMouseDown: handleClickOutside,
     "$padding": padding

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -1,7 +1,8 @@
 import { autoPlacement, size, offset, useFloating } from '@floating-ui/react-dom';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { Place } from './styles';
+import { useLayer } from '../../../hooks';
 import { DropdownContext, DropdownZIndexContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
@@ -19,6 +20,17 @@ export const DropdownMenu = ({
 }) => {
   const [isOpen, setIsOpen] = useState(openOnMount);
   const [width, setWidth] = useState(windowWidth);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  const {
+    zIndex: resolvedZIndex
+  } = useLayer({
+    isOpen,
+    onClose: handleClose,
+    zIndex: menuZIndex
+  });
   const {
     refs,
     floatingStyles
@@ -41,8 +53,7 @@ export const DropdownMenu = ({
       const handleClickListener = e => {
         var _refs$floating$curren, _refs$reference$curre;
         if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !((_refs$reference$curre = refs.reference.current) !== null && _refs$reference$curre !== void 0 && _refs$reference$curre.contains(e.target))) {
-          setIsOpen(false);
-          onClose === null || onClose === void 0 || onClose();
+          handleClose();
         }
       };
       const timer = setTimeout(() => {
@@ -53,7 +64,7 @@ export const DropdownMenu = ({
         document.removeEventListener('click', handleClickListener);
       };
     }
-  }, [isOpen, refs.floating, refs.reference, onClose]);
+  }, [isOpen, refs.floating, refs.reference, handleClose]);
   useEffect(() => {
     if (isOpen && isScrollable && refs.floating.current) {
       const activeElement = refs.floating.current.querySelector('[data-active="true"]');
@@ -68,15 +79,16 @@ export const DropdownMenu = ({
     value: setIsOpen
   }, renderHandler({
     onClick: () => {
-      setIsOpen(prev => !prev);
       if (isOpen) {
-        onClose === null || onClose === void 0 || onClose();
+        handleClose();
+      } else {
+        setIsOpen(true);
       }
     },
     ref: refs.setReference,
     isOpen
   }), isOpen && createPortal(React.createElement(DropdownZIndexContext.Provider, {
-    value: menuZIndex
+    value: resolvedZIndex
   }, React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
@@ -84,6 +96,6 @@ export const DropdownMenu = ({
     "$width": width,
     "$fitContent": windowWidth === null && !fullWidth,
     "$scrollable": isScrollable,
-    "$zIndex": menuZIndex
+    "$zIndex": resolvedZIndex
   }, renderChildren(children))), document.body));
 };

package/Modal/components/Modal/Modal.js

@@ -2,19 +2,27 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { modalSizes } from './maps';
 import { LockBody, ModalBox, ModalBoxTrans, ModalContainer, ModalInner } from './styles';
+import { useLayer } from '../../../hooks';
 function createDivElement() {
   return document.createElement('div');
 }
 export function Modal(props) {
   const {
     size,
-    zIndex = 10000,
+    zIndex,
     isOpen,
     onClose,
     children
   } = props;
   const ref = useRef();
   const [element] = useState(createDivElement);
+  const {
+    zIndex: resolvedZIndex
+  } = useLayer({
+    isOpen,
+    onClose,
+    zIndex
+  });
   const handleClose = useCallback(event => {
     if (event.target === event.currentTarget) {
       onClose === null || onClose === void 0 || onClose();
@@ -25,23 +33,12 @@ export function Modal(props) {
     (_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
     return () => element.remove();
   }, [element]);
-  useEffect(() => {
-    if (isOpen && onClose) {
-      const onCloseEventHandler = event => {
-        if (event.key === 'Escape') {
-          onClose();
-        }
-      };
-      window.addEventListener('keydown', onCloseEventHandler);
-      return () => window.removeEventListener('keydown', onCloseEventHandler);
-    }
-  }, [isOpen, onClose]);
   return createPortal(React.createElement(ModalBoxTrans, {
     nodeRef: ref,
     isOpen: isOpen
   }, React.createElement(ModalBox, {
     ref: ref,
-    "$zIndex": zIndex
+    "$zIndex": resolvedZIndex
   }, React.createElement(LockBody, null), React.createElement(ModalInner, {
     onMouseDown: handleClose
   }, React.createElement(ModalContainer, {

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useOnClickOutside';
 export * from './useElementWidth';
+export * from './useLayer';

package/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useOnClickOutside';
-export * from './useElementWidth';
+export * from './useElementWidth';
+export * from './useLayer';

package/hooks/useLayer.d.ts

@@ -0,0 +1,10 @@
+type UseLayerParams = {
+    isOpen: boolean;
+    onClose?: () => void;
+    zIndex?: number;
+};
+type UseLayerResult = {
+    zIndex: number;
+};
+export declare function useLayer({ isOpen, onClose, zIndex }: UseLayerParams): UseLayerResult;
+export {};

package/hooks/useLayer.js

@@ -0,0 +1,81 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+const BASE_Z_INDEX = 10000;
+const Z_INDEX_STEP = 100;
+const stack = [];
+const subscribers = new Set();
+let keydownAttached = false;
+function notify() {
+  subscribers.forEach(subscriber => subscriber());
+}
+function handleKeydown(event) {
+  var _top$close;
+  if (event.key !== 'Escape') {
+    return;
+  }
+  const top = stack[stack.length - 1];
+  top === null || top === void 0 || (_top$close = top.close) === null || _top$close === void 0 || _top$close.call(top);
+}
+function ensureKeydownListener() {
+  if (!keydownAttached && stack.length > 0) {
+    window.addEventListener('keydown', handleKeydown);
+    keydownAttached = true;
+  }
+}
+function teardownKeydownListener() {
+  if (keydownAttached && stack.length === 0) {
+    window.removeEventListener('keydown', handleKeydown);
+    keydownAttached = false;
+  }
+}
+function registerLayer(entry) {
+  stack.push(entry);
+  ensureKeydownListener();
+  notify();
+}
+function unregisterLayer(id) {
+  const index = stack.findIndex(entry => entry.id === id);
+  if (index !== -1) {
+    stack.splice(index, 1);
+  }
+  teardownKeydownListener();
+  notify();
+}
+function getDepth(id) {
+  return stack.findIndex(entry => entry.id === id);
+}
+export function useLayer({
+  isOpen,
+  onClose,
+  zIndex
+}) {
+  const id = useId();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const [, forceRender] = useState(0);
+  useEffect(() => {
+    const subscriber = () => forceRender(value => value + 1);
+    subscribers.add(subscriber);
+    return () => {
+      subscribers.delete(subscriber);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    registerLayer({
+      id,
+      close: () => {
+        var _onCloseRef$current;
+        return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+      }
+    });
+    forceRender(value => value + 1);
+    return () => unregisterLayer(id);
+  }, [isOpen, id]);
+  const depth = getDepth(id);
+  const resolvedZIndex = zIndex ?? BASE_Z_INDEX + Math.max(depth, 0) * Z_INDEX_STEP;
+  return {
+    zIndex: resolvedZIndex
+  };
+}

package/package.json

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