@sproutsocial/seeds-react-tooltip 1.1.20 → 1.1.27

package/src/Tooltip.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect, useContext } from "react";
 import MOTION from "@sproutsocial/seeds-motion/unitless";
-import Popout from "@sproutsocial/seeds-react-popout";
+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, TypeTooltipContent } from "./TooltipTypes";
+import type { TypeTooltipProps } from "./TooltipTypes";
 
 let idCounter = 0;
 
@@ -11,51 +13,44 @@ const hasAttribute = (child: React.ReactNode, attribute: string) => {
   return React.isValidElement(child) && child.props[attribute] !== undefined;
 };
 
-/** Tooltip Styled Popout wrapper for handling events */
-const TooltipBubble = ({
-  appearance = "pill",
-  children,
-  onFocus,
-  onBlur,
-  legacyMouseInteraction,
-  ...rest
-}: TypeTooltipContent) => {
-  // @ts-ignore Will fix during refactor
-  const handleFocus = (e) => {
-    onFocus(e);
-  };
-  // @ts-ignore Will fix during refactor
-  const handleBlur = (e) => {
-    onBlur(e);
-  };
-  return (
-    <StyledTooltipContent
-      role="tooltip"
-      appearance={appearance}
-      borderRadius={appearance === "box" ? 500 : "5000em"}
-      px={400}
-      py={appearance === "box" ? 400 : 200}
-      m={200}
-      color="text.body"
-      bg="container.background.base"
-      boxShadow="medium"
-      border={500}
-      borderColor="container.border.base"
-      {...(legacyMouseInteraction && {
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onMouseEnter: handleFocus,
-        onMouseLeave: handleBlur,
-      })}
-      tabIndex={0}
-      {...rest}
-    >
-      {children}
-    </StyledTooltipContent>
-  );
-};
+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 };
+}
 
-/** Core component */
 const Tooltip = ({
   content,
   children,
@@ -66,18 +61,22 @@ const Tooltip = ({
   zIndex = 7,
   qa,
   popoutProps,
+  triggerProps,
   truncated = false,
   onFocus,
   onBlur,
   legacyMouseInteraction,
   ...rest
 }: TypeTooltipProps) => {
-  const [shouldShow, setShouldShow] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  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);
 
-  // Compute exitDelay based on legacyMouseInteraction if not explicitly provided
   const resolvedExitDelay =
     exitDelay !== undefined
       ? exitDelay
@@ -85,87 +84,29 @@ const Tooltip = ({
       ? MOTION.MOTION_DURATION_FAST * 1000
       : 0;
 
-  // @ts-ignore Will fix during refactor
-  const show = (e) => {
-    onFocus?.(e);
-    setShouldShow(true);
-  };
-  // @ts-ignore Will fix during refactor
-  const hide = (e) => {
-    onBlur?.(e);
-    setShouldShow(false);
-  };
-
   const defaultAppearance =
     appearance || (typeof content === "object" ? "box" : "pill");
 
-  /** Handles all the logic around whether to display/not display */
-  useEffect(() => {
-    const documentBody = document.body;
-    let timeout;
-    const onEsc = (e: KeyboardEvent): void => {
-      // older browsers use "Esc"
-      if (["Escape", "Esc"].includes(e.key)) {
-        setIsOpen(false);
-        setShouldShow(false);
-      }
-    };
-
-    if (shouldShow) {
-      timeout = setTimeout(() => setIsOpen(true), enterDelay);
-    } else {
-      timeout = setTimeout(() => {
-        setIsOpen(false);
-      }, resolvedExitDelay);
-    }
+  const { side, align } = mapPlacement(placement);
+
+  const mergedWrapperProps = {
+    ...popoutProps,
+    ...triggerProps,
+  };
+
+  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;
 
-    // We only want listeners from the tooltip if its open in the first place
-    if (isOpen) {
-      documentBody.addEventListener("keydown", onEsc, { capture: true });
+  useEffect(() => {
+    if (disablePortalToBody && triggerRef.current) {
+      const dialogContent =
+        triggerRef.current.closest<HTMLElement>("[role='dialog']");
+      setPortalContainer(dialogContent ?? undefined);
     }
-    return () => {
-      documentBody.removeEventListener("keydown", onEsc, { capture: true });
-      clearTimeout(timeout);
-    };
-  }, [isOpen, setShouldShow, shouldShow, enterDelay, resolvedExitDelay]);
-
-  /** The wrapped content of whats inside the Tooltip */
-  const TooltipContent = () => (
-    <TooltipBubble
-      appearance={defaultAppearance}
-      onFocus={show}
-      onBlur={hide}
-      legacyMouseInteraction={legacyMouseInteraction}
-      aria-expanded={isOpen}
-      id={id}
-      {...rest}
-    >
-      {content}
-    </TooltipBubble>
-  );
+  }, [disablePortalToBody]);
 
-  return (
-    <Popout
-      content={!isInvalidContent ? TooltipContent : undefined}
-      isOpen={isOpen}
-      placement={placement}
-      qa={{
-        "data-qa-tooltip": id,
-        ...qa,
-      }}
-      id={id + "-wrapper"}
-      focusOnContent={false}
-      zIndex={zIndex}
-      aria-haspopup="false"
-      display={truncated ? "flex" : undefined}
-      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props
-      {...popoutProps}
-    >
+  if (isInvalidContent) {
+    return (
       <span
-        onBlur={hide}
-        onFocus={show}
-        onMouseEnter={show}
-        onMouseLeave={hide}
         style={
           truncated
             ? {
@@ -175,18 +116,90 @@ const Tooltip = ({
               }
             : {}
         }
+      >
+        {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, {
-              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */
               "aria-expanded": hasAttribute(children, "aria-expanded")
                 ? children.props["aria-expanded"]
                 : undefined,
-              "aria-describedby": isOpen ? id : undefined,
+              "aria-describedby": open ? id : undefined,
             })
           : children}
-      </span>
-    </Popout>
+      </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
   );
 };
 

package/src/TooltipTypes.ts

@@ -1,7 +1,23 @@
 import * as React from "react";
-import type { TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 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,
@@ -13,8 +29,14 @@ export interface TypeTooltipProps
   /** 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 */
-  placement?: TypePopoutProps["placement"];
+  /**
+   * 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;
@@ -33,8 +55,13 @@ export interface TypeTooltipProps
   qa?: object;
   zIndex?: number;
 
-  /** Props to be spread onto the underlying Popout component */
-  popoutProps?: Partial<TypePopoutProps>;
+  /**
+   * @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;
@@ -42,7 +69,6 @@ export interface TypeTooltipProps
   ariaProps?: Record<string, string>;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface TypeTooltipContent
   extends Pick<TypeTooltipProps, "appearance" | "children"> {
   onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;