revert using portal for render menu and add exenv package for checking prevent crashing when using dom node

Author: nhuttm

cypress/integration/context-menu.spec.ts

@@ -21,6 +21,18 @@ describe('Context menu', () => {
     cy.getByDataTest(DATA_TEST.CONTEXT_MENU).should('be.visible');
   });
 
+  it('Can mount on specified dom node', () => {
+    cy.getByDataTest(DATA_TEST.CONTEXT_MENU_TRIGGER).rightclick();
+    cy.getByDataTest(DATA_TEST.CONTEXT_MENU).should('be.visible');
+
+    cy.getByDataTest(DATA_TEST.MOUNT_NODE).then(el => {
+      expect(el.children().length).to.eq(0);
+    });
+
+    cy.getByDataTest(DATA_TEST.TOGGLE_MOUNT_NODE).check();
+    cy.getByDataTest(DATA_TEST.CONTEXT_MENU_TRIGGER).rightclick();
+  });
+
   it('Close on Escape', () => {
     cy.getByDataTest(DATA_TEST.CONTEXT_MENU_TRIGGER).rightclick();
     cy.getByDataTest(DATA_TEST.CONTEXT_MENU).should('be.visible');

example/components/App.tsx

@@ -35,6 +35,7 @@ interface SelectorState {
   animation: string | false;
   event: string;
   hideItems: boolean;
+  customMountNode: boolean;
   customPosition: boolean;
   disableEnterAnimation: boolean;
   disableExitAnimation: boolean;
@@ -68,6 +69,7 @@ export function App() {
     animation: false,
     event: selector.events[0],
     hideItems: false,
+    customMountNode: false,
     customPosition: false,
     disableEnterAnimation: false,
     disableExitAnimation: false,
@@ -81,6 +83,9 @@ export function App() {
   const { show } = useContextMenu({
     id: MENU_ID,
   });
+  const customMountNode = document.querySelector(
+    `[data-test="${DATA_TEST.MOUNT_NODE}"]`
+  );
 
   function handleSelector({
     target: { name, value },
@@ -153,6 +158,17 @@ export function App() {
               />
             </li>
           ))}
+          <li>
+            <label htmlFor="customMountNode">Use custom mount node</label>
+            <input
+              type="checkbox"
+              id="customMountNode"
+              name="customMountNode"
+              checked={state.customMountNode}
+              onChange={handleCheckboxes}
+              data-test={DATA_TEST.TOGGLE_MOUNT_NODE}
+            />
+          </li>
           <li>
             <label htmlFor="customPosition">Use custom position</label>
             <input
@@ -224,6 +240,7 @@ export function App() {
         theme={state.theme}
         animation={getAnimation()}
         data-test={DATA_TEST.CONTEXT_MENU}
+        mountNode={state.customMountNode ? customMountNode : null}
       >
         <Item
           onClick={handleItemClick}

example/constants.ts

@@ -2,6 +2,7 @@ export const MENU_ID = '🦄';
 
 export const enum DATA_TEST {
   MOUNT_NODE = 'mount-node',
+  TOGGLE_MOUNT_NODE = 'toggle-mount-node',
   TOGGLE_CUSTOM_POSITION = 'toggle-custom-position',
   CONTEXT_MENU_TRIGGER = 'trigger',
   CONTEXT_MENU = 'context-menu',

package.json

@@ -60,6 +60,7 @@
   ],
   "module": "dist/react-contexify.esm.js",
   "devDependencies": {
+    "@types/exenv": "^1.2.0",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "cssnano": "^4.1.10",
@@ -76,6 +77,7 @@
     "typescript": "^4.0.3"
   },
   "dependencies": {
-    "clsx": "^1.1.1"
+    "clsx": "^1.1.1",
+    "exenv": "^1.2.2"
   }
 }

src/components/Menu.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import cx from 'clsx';
 
+import { Portal, PortalProps } from './Portal';
 import { RefTrackerProvider } from './RefTrackerProvider';
 
 import { eventManager } from '../core/eventManager';
@@ -29,7 +30,8 @@ import {
 } from './utils';
 
 export interface MenuProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {
+  extends PortalProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'id'> {
   /**
    * Unique id to identify the menu. Use to Trigger the corresponding menu
    */
@@ -99,6 +101,7 @@ export const Menu: React.FC<MenuProps> = ({
   style,
   className,
   children,
+  mountNode,
   animation = 'scale',
   onHidden = NOOP,
   onShown = NOOP,
@@ -310,22 +313,24 @@ export const Menu: React.FC<MenuProps> = ({
   };
 
   return (
-    <RefTrackerProvider refTracker={refTracker}>
-      {visible && (
-        <div
-          {...rest}
-          className={cssClasses}
-          onAnimationEnd={handleAnimationEnd}
-          style={menuStyle}
-          ref={nodeRef}
-          role="menu"
-        >
-          {cloneItems(children, {
-            propsFromTrigger,
-            triggerEvent,
-          })}
-        </div>
-      )}
-    </RefTrackerProvider>
+    <Portal mountNode={mountNode}>
+      <RefTrackerProvider refTracker={refTracker}>
+        {visible && (
+          <div
+            {...rest}
+            className={cssClasses}
+            onAnimationEnd={handleAnimationEnd}
+            style={menuStyle}
+            ref={nodeRef}
+            role="menu"
+          >
+            {cloneItems(children, {
+              propsFromTrigger,
+              triggerEvent,
+            })}
+          </div>
+        )}
+      </RefTrackerProvider>
+    </Portal>
   );
 };

src/components/Portal.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { canUseDOM, isFn } from './utils';
+
+export interface PortalProps {
+  /**
+   * HTML node where to mount the context menu.
+   *
+   * In SSR mode, prefer the callback form to be sure that document is only
+   * accessed on the client. `e.g. () => document.querySelector('#element')`
+   *
+   * `default: document.body`
+   */
+  mountNode?: Element | (() => Element);
+}
+
+export const Portal: React.FC<PortalProps> = ({ children, mountNode }) => {
+  const [canRender, setCanRender] = useState(false);
+  const node = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    let parentNode: Element;
+    if (canUseDOM) {
+      parentNode = document.body;
+      node.current = document.createElement('div');
+
+      if (isFn(mountNode)) {
+        parentNode = mountNode();
+      } else if (mountNode instanceof Element) {
+        parentNode = mountNode;
+      }
+
+      parentNode.appendChild(node.current);
+
+      setCanRender(true);
+    }
+    return () => {
+      if (canUseDOM) {
+        parentNode.removeChild(node.current!);
+      }
+    };
+  }, [mountNode]);
+
+  if (!canUseDOM) {
+    return null;
+  }
+
+  return canRender ? createPortal(children, node.current!) : null;
+};

src/components/utils.ts

@@ -1,4 +1,5 @@
 import { Children, cloneElement, ReactNode, ReactElement } from 'react';
+import ExecutionEnvironment from 'exenv';
 
 import {
   BooleanPredicate,
@@ -64,3 +65,5 @@ export function hasExitAnimation(animation: MenuAnimation) {
     (isStr(animation) || ('exit' in animation && animation.exit))
   );
 }
+
+export const canUseDOM = ExecutionEnvironment.canUseDOM;

yarn.lock

@@ -1241,6 +1241,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/exenv@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/exenv/-/exenv-1.2.0.tgz#84ff936feeafc917c3c66f80b43e917f56eed00b"
+  integrity sha512-kSyh9q6bvrOGEnJ9X9Io5gjXaakcSRQTax/Nj2ZKJHuOZ7bH4uvUgLyXA9uV2QBCP7+T8KS0JHbPfP1/79ckKw==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.4.tgz#4ff9f641a7c6d1a3508ff88bc3141b152772e753"
@@ -3338,6 +3343,11 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
+exenv@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"