[core] Adding popoverRef to PopoverNext (#8109)

Author: mm-wang

packages/core/src/components/popover-next/popoverNext.test.tsx

@@ -4,6 +4,7 @@
 
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { createRef } from "react";
 
 import { afterAll, beforeEach, describe, expect, it, vi } from "@blueprintjs/test-commons/vitest";
 
@@ -236,6 +237,32 @@ describe("<PopoverNext>", () => {
             expect(popoverElement).toHaveClass(Classes.DARK);
         });
 
+        it("attaches popoverRef to the popover element", async () => {
+            const popoverRef = createRef<HTMLDivElement>();
+            const { container } = render(
+                <PopoverNext content="content" isOpen={true} popoverRef={popoverRef} usePortal={false}>
+                    <Button text="target" />
+                </PopoverNext>,
+            );
+
+            await waitFor(() => expect(screen.getByText("content")).toBeInTheDocument());
+
+            const popoverElement = container.querySelector(`.${Classes.POPOVER}`);
+            expect(popoverElement).toBeInTheDocument();
+            expect(popoverRef.current).toBe(popoverElement);
+        });
+
+        it("popoverRef returns null when closed", () => {
+            const ref = createRef<HTMLDivElement>();
+            render(
+                <PopoverNext popoverRef={ref} content="content" isOpen={false}>
+                    <Button text="target" />
+                </PopoverNext>,
+            );
+
+            expect(ref.current).toBeNull();
+        });
+
         it("renders with aria-haspopup attr", () => {
             const { container } = render(
                 <PopoverNext content="content" isOpen={true}>

packages/core/src/components/popover-next/popoverNext.tsx

@@ -41,6 +41,7 @@ export const PopoverNext = forwardRef<PopoverNextRef, PopoverNextProps>((props,
         onClose,
         onInteraction,
         openOnTargetFocus = true,
+        popoverRef,
         placement,
         positioningStrategy = "absolute",
         renderTarget,
@@ -399,6 +400,7 @@ export const PopoverNext = forwardRef<PopoverNextRef, PopoverNextProps>((props,
                     hasDarkParent={hasDarkParent}
                     isClosingViaEscapeKeypress={isClosingViaEscapeKeypress}
                     isHoverInteractionKind={isHoverInteractionKind}
+                    popoverRef={popoverRef}
                     shouldReturnFocusOnClose={shouldReturnFocusOnClose}
                     {...props}
                 />

packages/core/src/components/popover-next/popoverNextProps.ts

@@ -283,6 +283,11 @@ export interface PopoverNextProps<T extends DefaultPopoverTargetHTMLProps = Defa
      */
     openOnTargetFocus?: boolean;
 
+    /**
+     * DOM ref attached to the `Classes.POPOVER` element.
+     */
+    popoverRef?: React.Ref<HTMLDivElement>;
+
     /**
      * The placement (relative to the target) at which the popover should appear.
      * Mutually exclusive with `position` prop. Prefer using this over `position`,
@@ -476,6 +481,7 @@ export interface PopoverPopupProps
         | "onOpened"
         | "onOpening"
         | "popoverClassName"
+        | "popoverRef"
         | "portalClassName"
         | "portalContainer"
         | "shouldReturnFocusOnClose"

packages/core/src/components/popover-next/popoverPopup.tsx

@@ -42,6 +42,7 @@ export function PopoverPopup(props: PopoverPopupProps) {
         onOpened,
         onOpening,
         popoverClassName,
+        popoverRef,
         portalClassName,
         portalContainer,
         transitionDuration = 300,
@@ -139,7 +140,7 @@ export function PopoverPopup(props: PopoverPopupProps) {
                 ref={mergeRefs(floatingData.refs.setFloating, transitionContainerElement)}
                 {...popoverHandlers}
             >
-                <div className={popoverClasses} style={{ transformOrigin }}>
+                <div className={popoverClasses} ref={popoverRef} style={{ transformOrigin }}>
                     {arrow && (
                         <PopoverArrow
                             arrowProps={{ ref: arrowRef, style: arrowStyle }}