@sproutsocial/seeds-react-tooltip 1.1.33 → 1.1.35

package/src/Tooltip.stories.tsx

@@ -1,312 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Banner from "@sproutsocial/seeds-react-banner";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Text from "@sproutsocial/seeds-react-text";
-import Tooltip from "./Tooltip";
-
-const meta: Meta<typeof Tooltip> = {
-  title: "Components/Tooltip",
-  component: Tooltip,
-};
-export default meta;
-
-type Story = StoryObj<typeof Tooltip>;
-
-export const Default: Story = {
-  render: () => (
-    <>
-      <Box mb={400}>
-        <Banner text="Tooltips should be applied only to interactive elements, allowing users to launch them via focus or mouse hover." />
-      </Box>
-      <Box
-        width="100%"
-        p={600}
-        alignItems="center"
-        justifyContent="center"
-        display="flex"
-        height="200px"
-      >
-        <Tooltip content="This is a tooltip. It is a small piece of text that is shown when a user hovers or focuses over an element.">
-          <Button appearance="primary">show tooltip</Button>
-        </Tooltip>
-      </Box>
-    </>
-  ),
-};
-
-export const Focus: Story = {
-  render: () => (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-      color="text.body"
-    >
-      We've got some text and then we've got a focusable
-      <Tooltip content="I'm a tooltip">
-        <Button mx={300} appearance="primary">
-          button
-        </Button>
-      </Tooltip>
-      and then some more text
-    </Box>
-  ),
-};
-
-export const WithNonStringContent: Story = {
-  render: () => (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip
-        content={
-          <img
-            src="https://pixel.nymag.com/imgs/daily/vulture/2016/11/03/03-steven-seagal.w330.h330.jpg"
-            alt="a cool guy"
-            width="200"
-          />
-        }
-      >
-        <Button appearance="primary">show tooltip</Button>
-      </Tooltip>
-    </Box>
-  ),
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip content="This is a button's tooltip">
-        <Button appearance="pill" ariaLabel="This is a button's label">
-          <Icon name="circle-check-outline" aria-hidden />
-        </Button>
-      </Tooltip>
-    </Box>
-  ),
-};
-
-export const WithFocusableContent: Story = {
-  render: () => (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip
-        content={
-          <Button
-            appearance="secondary"
-            width={1}
-            onClick={() => alert("clicked!")}
-          >
-            Tab to me
-          </Button>
-        }
-      >
-        <Button appearance="primary">show tooltip</Button>
-      </Tooltip>
-    </Box>
-  ),
-};
-
-export const WithLegacyMouseInteraction: Story = {
-  render: () => (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      flexDirection="column"
-      gap={400}
-      height="400px"
-    >
-      <Box display="flex" flexDirection="column" alignItems="center" gap={200}>
-        <Tooltip
-          content={
-            <Box>
-              <div>Hover into this content!</div>
-              <Button
-                appearance="secondary"
-                size="small"
-                mt={200}
-                onClick={() => alert("Clicked!")}
-              >
-                Interactive button
-              </Button>
-            </Box>
-          }
-          legacyMouseInteraction={true}
-        >
-          <Button appearance="primary">With legacyMouseInteraction</Button>
-        </Tooltip>
-        <Text fontSize={300} color="text.body.secondary">
-          Tooltip stays open when you hover into it (exitDelay: ~150ms)
-        </Text>
-      </Box>
-
-      <Box display="flex" flexDirection="column" alignItems="center" gap={200}>
-        <Tooltip
-          content={
-            <Box>
-              <div>Try to hover into this content</div>
-              <Button appearance="secondary" size="small" mt={200}>
-                Can't interact
-              </Button>
-            </Box>
-          }
-        >
-          <Button appearance="primary">Without legacyMouseInteraction</Button>
-        </Tooltip>
-        <Text fontSize={300} color="text.body.secondary">
-          Tooltip closes immediately when you leave (exitDelay: 0ms)
-        </Text>
-      </Box>
-    </Box>
-  ),
-};
-
-const InModalV1Template = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  // Lazy-load Modal V1 to avoid circular deps in storybook
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const Modal = require("@sproutsocial/seeds-react-modal").default;
-
-  return (
-    <Box>
-      <Button appearance="primary" onClick={() => setIsOpen(true)}>
-        Open Modal
-      </Button>
-      <Modal
-        appElementSelector="#storybook-root"
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        closeButtonLabel="Close modal"
-        label="Modal with Tooltip"
-      >
-        <Modal.Header title="Tooltip in Modal V1" />
-        <Modal.Content>
-          <Box p={400} display="flex" justifyContent="center">
-            <Tooltip content="This tooltip renders inside the Modal V1">
-              <Button appearance="primary">Hover me</Button>
-            </Tooltip>
-          </Box>
-        </Modal.Content>
-      </Modal>
-    </Box>
-  );
-};
-
-export const InModal: Story = {
-  render: () => <InModalV1Template />,
-};
-
-const InModalV2Template = () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { ModalV2, ModalHeader, ModalBody } = require("@sproutsocial/seeds-react-modal");
-
-  return (
-    <ModalV2
-      aria-label="Modal V2 with Tooltip"
-      closeButtonAriaLabel="Close Modal"
-      modalTrigger={<Button appearance="primary">Open Modal V2</Button>}
-    >
-      <ModalHeader title="Tooltip in Modal V2" />
-      <ModalBody>
-        <Box p={400} display="flex" justifyContent="center">
-          <Tooltip content="This tooltip renders inside Modal V2">
-            <Button appearance="primary">Hover me</Button>
-          </Tooltip>
-        </Box>
-      </ModalBody>
-    </ModalV2>
-  );
-};
-
-export const InModalV2: Story = {
-  render: () => <InModalV2Template />,
-};
-
-const InPopoutTemplate = () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const Popout = require("@sproutsocial/seeds-react-popout").default;
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <Box p={600} display="flex" justifyContent="center">
-      <Popout
-        content={() => (
-          <Box p={400}>
-            <Tooltip content="This tooltip renders inside a Popout">
-              <Button appearance="secondary">Hover me</Button>
-            </Tooltip>
-          </Box>
-        )}
-        isOpen={isOpen}
-        placement="bottom"
-      >
-        <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
-          Toggle Popout
-        </Button>
-      </Popout>
-    </Box>
-  );
-};
-
-export const InPopout: Story = {
-  render: () => <InPopoutTemplate />,
-};
-
-const InDrawerTemplate = () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const Drawer = require("@sproutsocial/seeds-react-drawer").default;
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <Box>
-      <Button appearance="primary" onClick={() => setIsOpen(true)}>
-        Open Drawer
-      </Button>
-      <Drawer
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        closeButtonLabel="Close drawer"
-        id="tooltip-drawer"
-      >
-        <Box p={400}>
-          <Text as="h3" fontSize={400} fontWeight="bold" mb={400}>
-            Tooltip in Drawer
-          </Text>
-          <Tooltip content="This tooltip renders inside a Drawer">
-            <Button appearance="primary">Hover me</Button>
-          </Tooltip>
-        </Box>
-      </Drawer>
-    </Box>
-  );
-};
-
-export const InDrawer: Story = {
-  render: () => <InDrawerTemplate />,
-};

package/src/Tooltip.tsx

@@ -1,206 +0,0 @@
-import * as React from "react";
-import { useState, useRef, useEffect, useContext } from "react";
-import MOTION from "@sproutsocial/seeds-motion/unitless";
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
-import Box from "@sproutsocial/seeds-react-box";
-import { StyledTooltipContent } from "./styles";
-import type { TypeTooltipProps } from "./TooltipTypes";
-
-let idCounter = 0;
-
-const hasAttribute = (child: React.ReactNode, attribute: string) => {
-  return React.isValidElement(child) && child.props[attribute] !== undefined;
-};
-
-type Side = "top" | "bottom" | "left" | "right";
-type Align = "start" | "center" | "end";
-
-// `auto`, `auto-start`, and `auto-end` resolve to `side: "top"` (with align
-// taken from the suffix) and rely on base-ui's Positioner collision flipping at
-// runtime, rather than Popper's old best-initial-side selection. Exported for
-// unit testing of this mapping.
-export function mapPlacement(placement: string): { side: Side; align: Align } {
-  const parts = placement.split("-");
-  let side: Side;
-  let align: Align = "center";
-
-  switch (parts[0]) {
-    case "bottom":
-      side = "bottom";
-      break;
-    case "left":
-      side = "left";
-      break;
-    case "right":
-      side = "right";
-      break;
-    case "top":
-    case "auto":
-    default:
-      side = "top";
-      break;
-  }
-
-  if (parts[1] === "start") {
-    align = "start";
-  } else if (parts[1] === "end") {
-    align = "end";
-  }
-
-  return { side, align };
-}
-
-const Tooltip = ({
-  content,
-  children,
-  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,
-  exitDelay,
-  placement = "auto",
-  appearance,
-  zIndex = 7,
-  qa,
-  popoutProps,
-  triggerProps,
-  truncated = false,
-  onFocus,
-  onBlur,
-  legacyMouseInteraction,
-  ...rest
-}: TypeTooltipProps) => {
-  const [open, setOpen] = useState(false);
-  const [id] = useState(`Racine-tooltip-${idCounter++}`);
-  const triggerRef = useRef<HTMLSpanElement>(null);
-  const isInvalidContent = content === null || content === undefined;
-  const disablePortalToBody = useContext(DisablePortalToBodyContext);
-  const [portalContainer, setPortalContainer] = useState<
-    HTMLElement | undefined
-  >(undefined);
-
-  const resolvedExitDelay =
-    exitDelay !== undefined
-      ? exitDelay
-      : legacyMouseInteraction
-      ? MOTION.MOTION_DURATION_FAST * 1000
-      : 0;
-
-  const defaultAppearance =
-    appearance || (typeof content === "object" ? "box" : "pill");
-
-  const { side, align } = mapPlacement(placement);
-
-  const mergedWrapperProps = {
-    ...popoutProps,
-    ...triggerProps,
-  };
-
-  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;
-
-  useEffect(() => {
-    if (disablePortalToBody && triggerRef.current) {
-      const dialogContent =
-        triggerRef.current.closest<HTMLElement>("[role='dialog']");
-      setPortalContainer(dialogContent ?? undefined);
-    }
-  }, [disablePortalToBody]);
-
-  if (isInvalidContent) {
-    return (
-      <span
-        style={
-          truncated
-            ? {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }
-            : {}
-        }
-      >
-        {children}
-      </span>
-    );
-  }
-
-  const tooltipTree = (
-    <BaseTooltip.Root
-      open={open}
-      onOpenChange={setOpen}
-      disabled={isInvalidContent}
-      disableHoverablePopup={!legacyMouseInteraction}
-    >
-      <BaseTooltip.Trigger
-        delay={enterDelay}
-        closeDelay={resolvedExitDelay}
-        render={
-          <span
-            ref={triggerRef}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            data-qa-popout-isopen={open ? "true" : "false"}
-            data-qa-tooltip={id}
-            {...(qa || {})}
-            style={
-              truncated
-                ? {
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    display: "inline-flex",
-                  }
-                : undefined
-            }
-          />
-        }
-      >
-        {React.isValidElement(children)
-          ? React.cloneElement(children as React.ReactElement, {
-              "aria-expanded": hasAttribute(children, "aria-expanded")
-                ? children.props["aria-expanded"]
-                : undefined,
-              "aria-describedby": open ? id : undefined,
-            })
-          : children}
-      </BaseTooltip.Trigger>
-      <BaseTooltip.Portal container={portalContainer}>
-        <BaseTooltip.Positioner
-          side={side}
-          align={align}
-          sideOffset={4}
-          style={{ zIndex }}
-        >
-          <BaseTooltip.Popup
-            id={id}
-            render={
-              <StyledTooltipContent
-                role="tooltip"
-                appearance={defaultAppearance}
-                borderRadius={defaultAppearance === "box" ? 500 : "5000em"}
-                px={400}
-                py={defaultAppearance === "box" ? 400 : 200}
-                m={200}
-                color="text.body"
-                bg="container.background.base"
-                boxShadow="medium"
-                border={500}
-                borderColor="container.border.base"
-                tabIndex={legacyMouseInteraction ? 0 : undefined}
-                {...rest}
-              />
-            }
-          >
-            {content}
-          </BaseTooltip.Popup>
-        </BaseTooltip.Positioner>
-      </BaseTooltip.Portal>
-    </BaseTooltip.Root>
-  );
-
-  return hasWrapperProps ? (
-    <Box {...mergedWrapperProps}>{tooltipTree}</Box>
-  ) : (
-    tooltipTree
-  );
-};
-
-export default Tooltip;

package/src/TooltipTypes.ts

@@ -1,77 +0,0 @@
-import * as React from "react";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-
-export type TypeTooltipPlacement =
-  | "auto"
-  | "auto-start"
-  | "auto-end"
-  | "top"
-  | "top-start"
-  | "top-end"
-  | "bottom"
-  | "bottom-start"
-  | "bottom-end"
-  | "left"
-  | "left-start"
-  | "left-end"
-  | "right"
-  | "right-start"
-  | "right-end";
-
-export interface TypeTooltipProps
-  extends Omit<
-    TypeBoxProps,
-    "children" | "content" | "onMouseEnter" | "onMouseLeave"
-  > {
-  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
-  children: React.ReactNode;
-
-  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
-  content: React.ReactNode;
-
-  /**
-   * The placement of the tooltip in relation to the children.
-   *
-   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with
-   * the requested alignment) and rely on base-ui's runtime collision flipping,
-   * rather than the legacy Popper.js best-initial-side selection.
-   */
-  placement?: TypeTooltipPlacement;
-
-  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
-  enterDelay?: number;
-
-  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */
-  exitDelay?: number;
-
-  /**
-   * When true, enables mouse interaction on tooltip content and sets exitDelay
-   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).
-   */
-  legacyMouseInteraction?: boolean;
-
-  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
-  appearance?: "pill" | "box";
-  qa?: object;
-  zIndex?: number;
-
-  /**
-   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps
-   */
-  popoutProps?: Record<string, unknown>;
-
-  /** Props spread onto an outer wrapper Box rendered around the tooltip. Use this to apply layout styles (e.g. `display`, `width`) or other Box props to the element that wraps the tooltip's children. */
-  triggerProps?: TypeBoxProps;
-
-  /** Truncates text into a single line with ellipsis */
-  truncated?: boolean;
-
-  ariaProps?: Record<string, string>;
-}
-
-export interface TypeTooltipContent
-  extends Pick<TypeTooltipProps, "appearance" | "children"> {
-  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
-  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
-  legacyMouseInteraction?: boolean;
-}