[popover2] feat(ContextMenu2): allow specifying custom wrapper tag (#…

…4709)
palantir · May 10, 2021 · 06b2ece · 06b2ece · blueprint-bot · May 10, 2021
1 parent f5aa611
commit 06b2ece
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/packages/popover2/src/contextMenu2.tsx b/packages/popover2/src/contextMenu2.tsx
@@ -101,6 +101,15 @@ export interface ContextMenu2Props
      * React state (which is an error to do in the render code path of this component).
      */
     onContextMenu?: React.MouseEventHandler<HTMLElement>;
+
+    /**
+     * HTML tag to use for container element. Only used if this component's children are specified as
+     * React node(s), not when it is a render function (in that case, you get to render whatever tag
+     * you wish).
+     *
+     * @default "div"
+     */
+    tagName?: keyof JSX.IntrinsicElements;
 }
 
 export const ContextMenu2: React.FC<ContextMenu2Props> = ({
@@ -111,6 +120,7 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = ({
     transitionDuration = 100,
     onContextMenu,
     popoverClassName,
+    tagName = "div",
     ...restProps
 }) => {
     const [targetOffset, setTargetOffset] = React.useState<Offset>({ left: 0, top: 0 });
@@ -210,11 +220,15 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = ({
             ref: containerRef,
         });
     } else {
-        return (
-            <div className={containerClassName} ref={containerRef} onContextMenu={handleContextMenu}>
-                {maybePopover}
-                {children}
-            </div>
+        return React.createElement(
+            tagName,
+            {
+                className: containerClassName,
+                onContextMenu: handleContextMenu,
+                ref: containerRef,
+            },
+            maybePopover,
+            children,
         );
     }
 };

diff --git a/packages/popover2/test/contextMenu2Tests.tsx b/packages/popover2/test/contextMenu2Tests.tsx
@@ -21,7 +21,7 @@ import * as React from "react";
 
 import { Menu, MenuItem } from "@blueprintjs/core";
 
-import { ContextMenu2, ContextMenu2Props, Popover2 } from "../src";
+import { Classes, ContextMenu2, ContextMenu2Props, Popover2 } from "../src";
 
 const MENU_ITEMS = [
     <MenuItem key="left" icon="align-left" text="Align Left" />,
@@ -45,6 +45,11 @@ describe("ContextMenu2", () => {
             assert.isTrue(ctxMenu.find(Popover2).prop("isOpen"));
         });
 
+        it("renders custom HTML tag if specified", () => {
+            const ctxMenu = mountTestMenu({ tagName: "span" });
+            assert.isTrue(ctxMenu.find(`span.${Classes.CONTEXT_MENU2}`).exists());
+        });
+
         function mountTestMenu(props: Partial<ContextMenu2Props> = {}) {
             return mount(
                 <ContextMenu2 content={MENU} transitionDuration={0} {...props}>