@sproutsocial/seeds-react-tooltip 1.1.33 → 1.1.35

package/src/__tests__/Tooltip.test.tsx

@@ -1,285 +0,0 @@
-import React from "react";
-import {
-  render,
-  screen,
-  waitFor,
-} from "@sproutsocial/seeds-react-testing-library";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Tooltip from "../Tooltip";
-import Button from "@sproutsocial/seeds-react-button";
-
-jest.mock("@sproutsocial/seeds-react-portal", () => {
-  const Portal = ({ children }: { children: React.ReactNode }) => (
-    <div>{children}</div>
-  );
-  Portal.DisablePortalToBodyContext = require("react").createContext(false);
-  return {
-    __esModule: true,
-    default: Portal,
-    DisablePortalToBodyContext: Portal.DisablePortalToBodyContext,
-  };
-});
-
-describe("Tooltip", () => {
-  describe("rendering all valid `React.Node`s", () => {
-    it("should render string content", async () => {
-      const contentText = "hey";
-      const { user } = render(<Tooltip content={contentText}>hi</Tooltip>);
-      await user.hover(screen.getByText("hi"));
-      await screen.findByText(contentText);
-      expect(screen.getByText(contentText)).toBeInTheDocument();
-    });
-
-    it("should render number content", async () => {
-      const contentText = 123;
-      const { user } = render(<Tooltip content={contentText}>hi</Tooltip>);
-      await user.hover(screen.getByText("hi"));
-      await screen.findByDataQaLabel({
-        "popout-isopen": "true",
-      });
-      expect(screen.getByText(`${contentText}`)).toBeInTheDocument();
-    });
-
-    it("should render React Element content", async () => {
-      const { user } = render(<Tooltip content={<p>hey</p>}>hi</Tooltip>);
-      await user.hover(screen.getByText("hi"));
-      await screen.findByDataQaLabel({
-        "popout-isopen": "true",
-      });
-      expect(screen.getByText("hey")).toBeInTheDocument();
-    });
-
-    it("should render $Iterable<string> content", async () => {
-      const { user } = render(
-        <Tooltip content={["hello", "world"]}>hi</Tooltip>
-      );
-      await user.hover(screen.getByText("hi"));
-      await screen.findByText(/hello/i);
-      expect(screen.getByText(/hello/i)).toBeInTheDocument();
-      await screen.findByText(/world/i);
-      expect(screen.getByText(/world/i)).toBeInTheDocument();
-    });
-
-    it("should render $Iterable<React$Element<any>> content", async () => {
-      const { user } = render(
-        <Tooltip content={[<p key="1">hello</p>, <p key="2">world</p>]}>
-          hi
-        </Tooltip>
-      );
-      await user.hover(screen.getByText("hi"));
-      await screen.findByText(/hello/i);
-      expect(screen.getByText(/hello/i)).toBeInTheDocument();
-      await screen.findByText(/world/i);
-      expect(screen.getByText(/world/i)).toBeInTheDocument();
-    });
-
-    it("should not render null content", async () => {
-      expect.assertions(1);
-      const { user } = render(<Tooltip content={null}>hi</Tooltip>);
-      await user.hover(screen.getByText("hi"));
-      await expect(
-        screen.findByDataQaLabel({
-          "popout-isopen": "true",
-        })
-      ).rejects.toBeTruthy();
-    });
-
-    it("should not render undefined content", async () => {
-      expect.assertions(1);
-      const { user } = render(<Tooltip content={undefined}>hi</Tooltip>);
-      await user.hover(screen.getByText("hi"));
-      await expect(
-        screen.findByDataQaLabel({
-          "popout-isopen": "true",
-        })
-      ).rejects.toBeTruthy();
-    });
-
-    it("should not add aria-expanded to elements without it", async () => {
-      const { user } = render(
-        <Tooltip content="hello">
-          <Button>hi</Button>
-        </Tooltip>
-      );
-
-      const button = screen.getByRole("button", { name: "hi" });
-
-      expect(button).not.toHaveAttribute("aria-expanded");
-
-      await user.hover(button.closest("[data-qa-tooltip]")!);
-
-      await screen.findByText(/hello/i);
-
-      expect(button).not.toHaveAttribute("aria-expanded");
-    });
-
-    it("should preserve existing aria-expanded attribute", async () => {
-      const { user } = render(
-        <Tooltip content="hello">
-          <Button aria-expanded="false">hi</Button>
-        </Tooltip>
-      );
-
-      const button = screen.getByRole("button", { name: "hi" });
-
-      expect(button).toHaveAttribute("aria-expanded", "false");
-
-      await user.hover(button.closest("[data-qa-tooltip]")!);
-
-      await screen.findByText(/hello/i);
-
-      expect(button).toHaveAttribute("aria-expanded", "false");
-    });
-
-    it("should not add aria-expanded to non-interactive elements", () => {
-      render(
-        <Tooltip content="Tooltip text">
-          <span data-testid="text-element">Static text</span>
-        </Tooltip>
-      );
-
-      const textElement = screen.getByTestId("text-element");
-
-      expect(textElement).not.toHaveAttribute("aria-expanded");
-    });
-  });
-
-  it("should render when wrapped around an icon", async () => {
-    const { user } = render(
-      <Tooltip content="hey">
-        <Icon
-          data-testid="icon"
-          name="globe-outline"
-          aria-label="Open Tooltip"
-        />
-      </Tooltip>
-    );
-    await user.hover(screen.getByTestId("icon").closest("[data-qa-tooltip]")!);
-    await expect(
-      screen.findByDataQaLabel({
-        "popout-isopen": "true",
-      })
-    ).resolves.toBeTruthy();
-  });
-
-  describe("ARIA attributes", () => {
-    it("should not have aria-describedby when tooltip is closed", () => {
-      render(
-        <Tooltip content="Tooltip content">
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-      expect(trigger).not.toHaveAttribute("aria-describedby");
-    });
-
-    it("should have aria-describedby when tooltip is open", async () => {
-      const { user } = render(
-        <Tooltip content="Tooltip content">
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-
-      await user.hover(trigger.closest("[data-qa-tooltip]")!);
-
-      await screen.findByText("Tooltip content");
-
-      expect(trigger).toHaveAttribute("aria-describedby");
-      const tooltipId = trigger.getAttribute("aria-describedby");
-      expect(tooltipId).toBeTruthy();
-      expect(tooltipId).toMatch(/^Racine-tooltip-\d+$/);
-    });
-
-    it("should remove aria-describedby when tooltip closes", async () => {
-      const { user } = render(
-        <Tooltip content="Tooltip content">
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-
-      await user.hover(trigger.closest("[data-qa-tooltip]")!);
-
-      await screen.findByText("Tooltip content");
-
-      expect(trigger).toHaveAttribute("aria-describedby");
-
-      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
-
-      await waitFor(() => {
-        expect(trigger).not.toHaveAttribute("aria-describedby");
-      });
-    });
-
-    it("should have aria-describedby pointing to element with role='tooltip'", async () => {
-      const { user } = render(
-        <Tooltip content="Tooltip content">
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-
-      await user.hover(trigger.closest("[data-qa-tooltip]")!);
-
-      const tooltipElement = await screen.findByText("Tooltip content");
-
-      const tooltipId = trigger.getAttribute("aria-describedby");
-      expect(tooltipId).toBeTruthy();
-
-      const tooltipByRole = screen.getByRole("tooltip");
-      expect(tooltipByRole).toBeInTheDocument();
-
-      expect(tooltipByRole).toHaveAttribute("id", tooltipId);
-
-      expect(tooltipByRole).toContainElement(tooltipElement);
-    });
-  });
-
-  describe("legacyMouseInteraction prop", () => {
-    it("should allow hovering over tooltip content when legacyMouseInteraction is true", async () => {
-      const { user } = render(
-        <Tooltip content="Tooltip content" legacyMouseInteraction>
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-
-      await user.hover(trigger.closest("[data-qa-tooltip]")!);
-
-      const tooltipContent = await screen.findByText("Tooltip content");
-      expect(tooltipContent).toBeInTheDocument();
-
-      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
-      await user.hover(tooltipContent);
-
-      await waitFor(() => {
-        expect(tooltipContent).toBeInTheDocument();
-      });
-
-      await user.unhover(tooltipContent);
-    });
-
-    it("should not have mouse handlers on tooltip content when legacyMouseInteraction is false", async () => {
-      const { user } = render(
-        <Tooltip content="Tooltip content">
-          <Button data-testid="trigger">Trigger</Button>
-        </Tooltip>
-      );
-
-      const trigger = screen.getByTestId("trigger");
-
-      await user.hover(trigger.closest("[data-qa-tooltip]")!);
-
-      const tooltipContent = await screen.findByText("Tooltip content");
-      expect(tooltipContent).toBeInTheDocument();
-
-      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
-    });
-  });
-});

package/src/__tests__/Tooltip.typetest.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import Tooltip from "../Tooltip";
-import { Text } from "@sproutsocial/seeds-react-text";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function TooltipTypes() {
-  return (
-    <>
-      <Tooltip content="This is a tooltip on a text element">
-        <Text>Hello World</Text>
-      </Tooltip>
-      <Tooltip onFocus={() => {}} content="This is a tooltip on a text element">
-        <Text>Hello World</Text>
-      </Tooltip>
-      <Tooltip
-        content="foo"
-        ariaProps={{
-          role: "link",
-        }}
-      >
-        <Text>Yo</Text>
-      </Tooltip>
-      {/* @ts-expect-error - test that invalid props are rejected */}
-      <Tooltip />
-    </>
-  );
-}

package/src/__tests__/mapPlacement.test.ts

@@ -1,56 +0,0 @@
-import { mapPlacement } from "../Tooltip";
-
-describe("mapPlacement", () => {
-  it("maps top placements", () => {
-    expect(mapPlacement("top")).toEqual({ side: "top", align: "center" });
-    expect(mapPlacement("top-start")).toEqual({ side: "top", align: "start" });
-    expect(mapPlacement("top-end")).toEqual({ side: "top", align: "end" });
-  });
-
-  it("maps bottom placements", () => {
-    expect(mapPlacement("bottom")).toEqual({ side: "bottom", align: "center" });
-    expect(mapPlacement("bottom-start")).toEqual({
-      side: "bottom",
-      align: "start",
-    });
-    expect(mapPlacement("bottom-end")).toEqual({
-      side: "bottom",
-      align: "end",
-    });
-  });
-
-  it("maps left placements", () => {
-    expect(mapPlacement("left")).toEqual({ side: "left", align: "center" });
-    expect(mapPlacement("left-start")).toEqual({
-      side: "left",
-      align: "start",
-    });
-    expect(mapPlacement("left-end")).toEqual({ side: "left", align: "end" });
-  });
-
-  it("maps right placements", () => {
-    expect(mapPlacement("right")).toEqual({ side: "right", align: "center" });
-    expect(mapPlacement("right-start")).toEqual({
-      side: "right",
-      align: "start",
-    });
-    expect(mapPlacement("right-end")).toEqual({ side: "right", align: "end" });
-  });
-
-  // `auto*` deliberately anchors to `side: "top"` and relies on base-ui's
-  // runtime collision flipping rather than Popper-style best-initial-side
-  // selection. This is the documented, intentional behavior — see the
-  // changeset and the `placement` prop JSDoc in TooltipTypes.ts.
-  it("anchors auto placements to top with align from the suffix", () => {
-    expect(mapPlacement("auto")).toEqual({ side: "top", align: "center" });
-    expect(mapPlacement("auto-start")).toEqual({
-      side: "top",
-      align: "start",
-    });
-    expect(mapPlacement("auto-end")).toEqual({ side: "top", align: "end" });
-  });
-
-  it("falls back to top/center for unknown placements", () => {
-    expect(mapPlacement("nonsense")).toEqual({ side: "top", align: "center" });
-  });
-});

package/src/index.ts

@@ -1,5 +0,0 @@
-import Tooltip from "./Tooltip";
-
-export default Tooltip;
-export { Tooltip };
-export * from "./TooltipTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}

package/src/styles.ts

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-import type { TypeTooltipContent } from "./TooltipTypes";
-
-export const StyledTooltipContent = styled(Box)<
-  Pick<TypeTooltipContent, "appearance">
->`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]}
-  text-align: ${(props) => (props.appearance === "box" ? "left" : "center")};
-`;

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "module": "esnext"
-  },
-  "include": ["src/**/*"],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "coverage",
-    "**/*.stories.tsx",
-    "**/*.stories.ts"
-  ]
-}

package/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  clean: true,
-  legacyOutput: true,
-  dts: options.dts,
-  external: ["react"],
-  sourcemap: true,
-  metafile: options.metafile,
-}));