Tooltip now closes on ESC key press

packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import useRandomId from "../../hooks/useRandomId";
 import useStateWithTimeout from "../../hooks/useStateWithTimeout";
 import Portal from "../../Portal";
-import { TooltipWrapper } from "../TooltipPrimitive";
+import TooltipWrapper from "../TooltipPrimitive/components/TooltipWrapper";
 import DialogContent from "./components/DialogContent";
 import type { Props } from "./types";
 

packages/orbit-components/src/primitives/TooltipPrimitive/__tests__/index.test.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { render, screen } from "../../../test-utils";
+import { fireEvent, render, screen } from "../../../test-utils";
 import Tooltip from "..";
 
 describe("Tooltip", () => {
   const user = userEvent.setup();
 
-  it("it should render on hover", async () => {
+  it("should render on hover", async () => {
     const content = "Write some message to the user";
     render(
       <Tooltip content={content}>
@@ -17,7 +17,21 @@ describe("Tooltip", () => {
 
     expect(screen.queryByText(content)).not.toBeInTheDocument();
     await user.hover(screen.getByText("Some text"));
-    expect(screen.queryByText(content)).toBeInTheDocument();
+    expect(screen.queryByText(content)).toBeVisible();
+  });
+
+  it("should close on ESC click", async () => {
+    const content = "Write some message to the user";
+    render(
+      <Tooltip content={content}>
+        <p>Some text</p>
+      </Tooltip>,
+    );
+
+    await user.hover(screen.getByText("Some text"));
+    expect(screen.queryByText(content)).toBeVisible();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(screen.queryByText(content)).not.toBeVisible();
   });
 
   it("should call onClick 1 time", async () => {

packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipWrapper.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import cx from "clsx";
+
+import type { Props } from "../types";
+
+const TooltipWrapper = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLProps<HTMLSpanElement> & {
+    block?: Props["block"];
+    enabled?: Props["enabled"];
+    removeUnderlinedText?: Props["removeUnderlinedText"];
+  }
+>(({ block, enabled, removeUnderlinedText, ...props }, ref) => {
+  return (
+    <span
+      className={cx(
+        "orbit-tooltip-wrapper",
+        "max-w-full cursor-auto",
+        "focus:outline-none active:outline-none [&_:disabled]:pointer-events-none",
+        block ? "flex" : "inline-flex",
+        enabled &&
+          !removeUnderlinedText &&
+          "[&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-current [&_.orbit-text]:decoration-dotted",
+      )}
+      ref={ref}
+      role="button"
+      {...props}
+    />
+  );
+});
+
+export default TooltipWrapper;

packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx

@@ -1,38 +1,12 @@
 import * as React from "react";
-import cx from "clsx";
 import { FloatingPortal } from "@floating-ui/react";
 
 import useRandomId from "../../hooks/useRandomId";
-import TooltipContent from "./components/TooltipContent";
 import useStateWithTimeout from "../../hooks/useStateWithTimeout";
+import TooltipContent from "./components/TooltipContent";
+import TooltipWrapper from "./components/TooltipWrapper";
 import type { Props } from "./types";
 
-export const TooltipWrapper = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLProps<HTMLSpanElement> & {
-    block?: Props["block"];
-    enabled?: Props["enabled"];
-    removeUnderlinedText?: Props["removeUnderlinedText"];
-  }
->(({ block, enabled, removeUnderlinedText, ...props }, ref) => {
-  return (
-    <span
-      className={cx(
-        "orbit-tooltip-wrapper",
-        "max-w-full cursor-auto",
-        "focus:outline-none active:outline-none [&_:disabled]:pointer-events-none",
-        block ? "flex" : "inline-flex",
-        enabled &&
-          !removeUnderlinedText &&
-          "[&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-current [&_.orbit-text]:decoration-dotted",
-      )}
-      ref={ref}
-      role="button"
-      {...props}
-    />
-  );
-});
-
 const TooltipPrimitive = ({
   children,
   enabled = true,
@@ -61,17 +35,30 @@ const TooltipPrimitive = ({
 
   const tooltipId = useRandomId();
 
+  const handleEsc = React.useCallback(
+    (ev: { key: string }) => {
+      if (ev.key === "Escape") {
+        setShown(false);
+        setRenderWithTimeout(false);
+        document.removeEventListener("keydown", handleEsc);
+      }
+    },
+    [setRenderWithTimeout],
+  );
+
+  const handleOut = React.useCallback(() => {
+    setShown(false);
+    setRenderWithTimeout(false);
+    document.removeEventListener("keydown", handleEsc);
+  }, [handleEsc, setRenderWithTimeout]);
+
   const handleIn = React.useCallback(() => {
     setRender(true);
     setShown(true);
     if (onShow) onShow();
     clearRenderTimeout();
-  }, [clearRenderTimeout, setRender, onShow]);
-
-  const handleOut = React.useCallback(() => {
-    setShown(false);
-    setRenderWithTimeout(false);
-  }, [setRenderWithTimeout]);
+    document.addEventListener("keydown", handleEsc);
+  }, [setRender, onShow, clearRenderTimeout, handleEsc]);
 
   const handleClick = React.useCallback(
     (ev: React.MouseEvent<HTMLSpanElement | HTMLDivElement>) => {