feat: implement usePortal and useSSR hooks from upstream library (#1178)

Signed-off-by: Mason Hu <mason.hu@canonical.com>

Author: mas-who

.storybook/main.js

@@ -16,6 +16,10 @@ const config = {
       use: ["style-loader", "css-loader", "sass-loader"],
       include: path.resolve(__dirname, "../"),
     });
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      external: path.resolve(__dirname, "../src/external"),
+    };
     return config;
   },
   docs: {

package.json

@@ -108,8 +108,7 @@
     "jest-environment-jsdom": "29.7.0",
     "lodash.isequal": "4.5.0",
     "prop-types": "15.8.1",
-    "react-table": "7.8.0",
-    "react-useportal": "1.0.19"
+    "react-table": "7.8.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",

src/components/ConfirmationButton/ConfirmationButton.tsx

@@ -4,7 +4,7 @@ import ActionButton, { ActionButtonProps } from "../ActionButton";
 import ConfirmationModal, {
   ConfirmationModalProps,
 } from "../ConfirmationModal";
-import usePortal from "react-useportal";
+import { usePortal } from "external";
 
 const generateTitle = (title: ReactNode) => {
   if (typeof title === "string") {

src/components/ContextualMenu/ContextualMenu.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { HTMLProps, ReactNode } from "react";
-import usePortal from "react-useportal";
 import { useListener, usePrevious } from "hooks";
 import Button from "../Button";
 import type { ButtonProps } from "../Button";
@@ -14,6 +13,7 @@ import {
   PropsWithSpread,
   SubComponentProps,
 } from "types";
+import { usePortal } from "external";
 
 export enum Label {
   Toggle = "Toggle menu",
@@ -300,7 +300,7 @@ const ContextualMenu = <L,>({
         className={classNames("p-contextual-menu__toggle", toggleClassName)}
         disabled={toggleDisabled}
         hasIcon={hasToggleIcon}
-        onClick={(evt: React.MouseEvent) => {
+        onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
           if (!isOpen) {
             openPortal(evt);
           } else {

src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx

@@ -27,7 +27,7 @@ type VerticalPosition = "top" | "bottom";
 export type Props<L = null> = {
   adjustedPosition?: Position;
   autoAdjust?: boolean;
-  handleClose?: (evt?: MouseEvent) => void;
+  handleClose?: (evt?: React.MouseEvent<HTMLButtonElement>) => void;
   constrainPanelWidth?: boolean;
   dropdownClassName?: string;
   dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);
@@ -148,7 +148,9 @@ const generateLink = <L,>(
       onClick={
         onClick
           ? (evt) => {
-              handleClose(evt.nativeEvent);
+              handleClose(
+                evt.nativeEvent as unknown as React.MouseEvent<HTMLButtonElement>,
+              );
               onClick(evt);
             }
           : null

src/components/Tooltip/Tooltip.tsx

@@ -1,13 +1,14 @@
 import classNames from "classnames";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { MouseEventHandler, ReactNode } from "react";
-import usePortal from "react-useportal";
 
 import { useWindowFitment, useListener } from "hooks";
 import type { WindowFitment } from "hooks";
 
 import type { ClassName, ValueOf } from "types";
 
+import { usePortal } from "external";
+
 export type CSSPosition =
   | "static"
   | "absolute"

src/external/index.ts

@@ -0,0 +1,2 @@
+export { usePortal } from "./usePortal";
+export type { UsePortalOptions } from "./usePortal";

src/external/usePortal.test.ts

@@ -0,0 +1,118 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.test.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+
+import { renderHook, act } from "@testing-library/react";
+import { usePortal, errorMessage1 } from "./usePortal";
+
+jest.mock("./useSSR", () => ({
+  useSSR: jest.fn(() => ({ isServer: false, isBrowser: true })),
+}));
+
+describe("usePortal", () => {
+  it("should not be open", () => {
+    const { result } = renderHook(() => usePortal());
+    const { isOpen } = result.current;
+    expect(isOpen).toBe(false);
+  });
+
+  it("should error if no event is passed and no ref is set", () => {
+    const { result } = renderHook(() => usePortal());
+    try {
+      result.current.openPortal();
+    } catch (err) {
+      expect(err.message).toBe(errorMessage1);
+    }
+  });
+
+  it("does not error if programmatically opening the portal", () => {
+    const { result } = renderHook(() =>
+      usePortal({ programmaticallyOpen: true }),
+    );
+    act(() => {
+      expect(result.current.openPortal).not.toThrow();
+    });
+  });
+
+  it("should open portal when openPortal is called", () => {
+    const { result } = renderHook(() =>
+      usePortal({ programmaticallyOpen: true }),
+    );
+    act(() => {
+      result.current.openPortal();
+    });
+    expect(result.current.isOpen).toBe(true);
+  });
+
+  it("should close portal when closePortal is called", () => {
+    const { result } = renderHook(() => usePortal({ isOpen: true }));
+    act(() => {
+      result.current.closePortal();
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it("should toggle portal state when togglePortal is called", () => {
+    const { result } = renderHook(() =>
+      usePortal({ programmaticallyOpen: true }),
+    );
+    act(() => {
+      result.current.togglePortal();
+    });
+    expect(result.current.isOpen).toBe(true);
+    act(() => {
+      result.current.togglePortal();
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it("should throw error when openPortal is called without event and programmaticallyOpen is false", () => {
+    const { result } = renderHook(() =>
+      usePortal({ programmaticallyOpen: false }),
+    );
+    expect(() => {
+      act(() => {
+        result.current.openPortal();
+      });
+    }).toThrow(errorMessage1);
+  });
+
+  it("should call onOpen callback when portal is opened", () => {
+    const onOpen = jest.fn();
+    const { result } = renderHook(() =>
+      usePortal({ onOpen, programmaticallyOpen: true }),
+    );
+    act(() => {
+      result.current.openPortal();
+    });
+    expect(onOpen).toHaveBeenCalled();
+  });
+
+  it("should call onClose callback when portal is closed", () => {
+    const onClose = jest.fn();
+    const { result } = renderHook(() => usePortal({ isOpen: true, onClose }));
+    act(() => {
+      result.current.closePortal();
+    });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should close portal when Escape key is pressed", () => {
+    const { result } = renderHook(() => usePortal({ isOpen: true }));
+    act(() => {
+      const event = new KeyboardEvent("keydown", { key: "Escape" });
+      document.dispatchEvent(event);
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it("should close portal when clicking outside", () => {
+    const { result } = renderHook(() => usePortal({ isOpen: true }));
+    act(() => {
+      const event = new MouseEvent("mousedown", { bubbles: true });
+      document.body.dispatchEvent(event);
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+});