@sproutsocial/seeds-react-tooltip 1.1.20 → 1.1.28

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     6.73 KB
-CJS dist/index.js.map 11.16 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     4.74 KB
-ESM dist/esm/index.js.map 11.05 KB
-ESM ⚡️ Build success in 14ms
+CJS dist/index.js     7.77 KB
+CJS dist/index.js.map 12.50 KB
+CJS ⚡️ Build success in 18ms
+ESM dist/esm/index.js     5.59 KB
+ESM dist/esm/index.js.map 12.37 KB
+ESM ⚡️ Build success in 18ms
 DTS Build start
-DTS ⚡️ Build success in 1860ms
-DTS dist/index.d.ts  2.30 KB
-DTS dist/index.d.mts 2.30 KB
-Done in 2.59s.
+DTS ⚡️ Build success in 4180ms
+DTS dist/index.d.ts  3.03 KB
+DTS dist/index.d.mts 3.03 KB
+Done in 5.73s.

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @sproutsocial/seeds-react-tooltip
 
+## 1.1.28
+
+### Patch Changes
+
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+  - @sproutsocial/seeds-react-box@1.1.22
+
+## 1.1.27
+
+### Patch Changes
+
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.21
+
+## 1.1.26
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-box@1.1.20
+
+## 1.1.25
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-box@1.1.19
+
+## 1.1.24
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-box@1.1.18
+
+## 1.1.23
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-box@1.1.17
+
+## 1.1.22
+
+### Patch Changes
+
+- e5f4df1: Replace internal Tooltip implementation with @base-ui/react Tooltip primitives while preserving the existing public props API.
+
+  Behavioral note: the `placement` prop still accepts `auto`, `auto-start`, and `auto-end`, but these no longer perform Popper-style "best available side" selection. They now anchor to the `top` side (with the requested alignment) and rely on base-ui's runtime collision flipping to move off `top` only when there is not enough room. Since `placement` defaults to `auto`, tooltips that did not specify a placement will start at `top` and flip on collision instead of being positioned on the side with the most available space.
+
+## 1.1.21
+
+### Patch Changes
+
+- Updated dependencies [6c3e44e]
+  - @sproutsocial/seeds-react-popout@2.5.0
+
 ## 1.1.20
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,8 +1,10 @@
 // src/Tooltip.tsx
 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 Box2 from "@sproutsocial/seeds-react-box";
 
 // src/styles.ts
 import styled from "styled-components";
@@ -14,51 +16,38 @@ var StyledTooltipContent = styled(Box)`
 `;
 
 // src/Tooltip.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var idCounter = 0;
 var hasAttribute = (child, attribute) => {
   return React.isValidElement(child) && child.props[attribute] !== void 0;
 };
-var TooltipBubble = ({
-  appearance = "pill",
-  children,
-  onFocus,
-  onBlur,
-  legacyMouseInteraction,
-  ...rest
-}) => {
-  const handleFocus = (e) => {
-    onFocus(e);
-  };
-  const handleBlur = (e) => {
-    onBlur(e);
-  };
-  return /* @__PURE__ */ jsx(
-    StyledTooltipContent,
-    {
-      role: "tooltip",
-      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
-    }
-  );
-};
+function mapPlacement(placement) {
+  const parts = placement.split("-");
+  let side;
+  let 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 };
+}
 var Tooltip = ({
   content,
   children,
@@ -69,101 +58,120 @@ var Tooltip = ({
   zIndex = 7,
   qa,
   popoutProps,
+  triggerProps,
   truncated = false,
   onFocus,
   onBlur,
   legacyMouseInteraction,
   ...rest
 }) => {
-  const [shouldShow, setShouldShow] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [open, setOpen] = useState(false);
   const [id] = useState(`Racine-tooltip-${idCounter++}`);
+  const triggerRef = useRef(null);
   const isInvalidContent = content === null || content === void 0;
+  const disablePortalToBody = useContext(DisablePortalToBodyContext);
+  const [portalContainer, setPortalContainer] = useState(void 0);
   const resolvedExitDelay = exitDelay !== void 0 ? exitDelay : legacyMouseInteraction ? MOTION.MOTION_DURATION_FAST * 1e3 : 0;
-  const show = (e) => {
-    onFocus?.(e);
-    setShouldShow(true);
-  };
-  const hide = (e) => {
-    onBlur?.(e);
-    setShouldShow(false);
-  };
   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(() => {
-    const documentBody = document.body;
-    let timeout;
-    const onEsc = (e) => {
-      if (["Escape", "Esc"].includes(e.key)) {
-        setIsOpen(false);
-        setShouldShow(false);
-      }
-    };
-    if (shouldShow) {
-      timeout = setTimeout(() => setIsOpen(true), enterDelay);
-    } else {
-      timeout = setTimeout(() => {
-        setIsOpen(false);
-      }, resolvedExitDelay);
+    if (disablePortalToBody && triggerRef.current) {
+      const dialogContent = triggerRef.current.closest("[role='dialog']");
+      setPortalContainer(dialogContent ?? void 0);
     }
-    if (isOpen) {
-      documentBody.addEventListener("keydown", onEsc, { capture: true });
-    }
-    return () => {
-      documentBody.removeEventListener("keydown", onEsc, { capture: true });
-      clearTimeout(timeout);
-    };
-  }, [isOpen, setShouldShow, shouldShow, enterDelay, resolvedExitDelay]);
-  const TooltipContent = () => /* @__PURE__ */ jsx(
-    TooltipBubble,
-    {
-      appearance: defaultAppearance,
-      onFocus: show,
-      onBlur: hide,
-      legacyMouseInteraction,
-      "aria-expanded": isOpen,
-      id,
-      ...rest,
-      children: content
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    Popout,
+  }, [disablePortalToBody]);
+  if (isInvalidContent) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: truncated ? {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        } : {},
+        children
+      }
+    );
+  }
+  const tooltipTree = /* @__PURE__ */ jsxs(
+    BaseTooltip.Root,
     {
-      content: !isInvalidContent ? TooltipContent : void 0,
-      isOpen,
-      placement,
-      qa: {
-        "data-qa-tooltip": id,
-        ...qa
-      },
-      id: id + "-wrapper",
-      focusOnContent: false,
-      zIndex,
-      "aria-haspopup": "false",
-      display: truncated ? "flex" : void 0,
-      disableWrapperAria: true,
-      ...popoutProps,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          onBlur: hide,
-          onFocus: show,
-          onMouseEnter: show,
-          onMouseLeave: hide,
-          style: truncated ? {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          } : {},
-          children: React.isValidElement(children) ? React.cloneElement(children, {
-            //** 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"] : void 0,
-            "aria-describedby": isOpen ? id : void 0
-          }) : children
-        }
-      )
+      open,
+      onOpenChange: setOpen,
+      disabled: isInvalidContent,
+      disableHoverablePopup: !legacyMouseInteraction,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseTooltip.Trigger,
+          {
+            delay: enterDelay,
+            closeDelay: resolvedExitDelay,
+            render: /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: triggerRef,
+                onFocus,
+                onBlur,
+                "data-qa-popout-isopen": open ? "true" : "false",
+                "data-qa-tooltip": id,
+                ...qa || {},
+                style: truncated ? {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  display: "inline-flex"
+                } : void 0
+              }
+            ),
+            children: React.isValidElement(children) ? React.cloneElement(children, {
+              "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : void 0,
+              "aria-describedby": open ? id : void 0
+            }) : children
+          }
+        ),
+        /* @__PURE__ */ jsx(BaseTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          BaseTooltip.Positioner,
+          {
+            side,
+            align,
+            sideOffset: 4,
+            style: { zIndex },
+            children: /* @__PURE__ */ jsx(
+              BaseTooltip.Popup,
+              {
+                id,
+                render: /* @__PURE__ */ jsx(
+                  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 : void 0,
+                    ...rest
+                  }
+                ),
+                children: content
+              }
+            )
+          }
+        ) })
+      ]
     }
   );
+  return hasWrapperProps ? /* @__PURE__ */ jsx(Box2, { ...mergedWrapperProps, children: tooltipTree }) : tooltipTree;
 };
 var Tooltip_default = Tooltip;
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      {...(legacyMouseInteraction && {\n        onFocus: handleFocus,\n        onBlur: handleBlur,\n        onMouseEnter: handleFocus,\n        onMouseLeave: handleBlur,\n      })}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // Compute exitDelay based on legacyMouseInteraction if not explicitly provided\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, resolvedExitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, resolvedExitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      legacyMouseInteraction={legacyMouseInteraction}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** 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 */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": isOpen ? id : undefined,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** 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. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useRef, useEffect, useContext } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Align = \"start\" | \"center\" | \"end\";\n\n// `auto`, `auto-start`, and `auto-end` resolve to `side: \"top\"` (with align\n// taken from the suffix) and rely on base-ui's Positioner collision flipping at\n// runtime, rather than Popper's old best-initial-side selection. Exported for\n// unit testing of this mapping.\nexport function mapPlacement(placement: string): { side: Side; align: Align } {\n  const parts = placement.split(\"-\");\n  let side: Side;\n  let align: Align = \"center\";\n\n  switch (parts[0]) {\n    case \"bottom\":\n      side = \"bottom\";\n      break;\n    case \"left\":\n      side = \"left\";\n      break;\n    case \"right\":\n      side = \"right\";\n      break;\n    case \"top\":\n    case \"auto\":\n    default:\n      side = \"top\";\n      break;\n  }\n\n  if (parts[1] === \"start\") {\n    align = \"start\";\n  } else if (parts[1] === \"end\") {\n    align = \"end\";\n  }\n\n  return { side, align };\n}\n\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  exitDelay,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  triggerProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  legacyMouseInteraction,\n  ...rest\n}: TypeTooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const isInvalidContent = content === null || content === undefined;\n  const disablePortalToBody = useContext(DisablePortalToBodyContext);\n  const [portalContainer, setPortalContainer] = useState<\n    HTMLElement | undefined\n  >(undefined);\n\n  const resolvedExitDelay =\n    exitDelay !== undefined\n      ? exitDelay\n      : legacyMouseInteraction\n      ? MOTION.MOTION_DURATION_FAST * 1000\n      : 0;\n\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  const { side, align } = mapPlacement(placement);\n\n  const mergedWrapperProps = {\n    ...popoutProps,\n    ...triggerProps,\n  };\n\n  const hasWrapperProps = Object.keys(mergedWrapperProps).length > 0;\n\n  useEffect(() => {\n    if (disablePortalToBody && triggerRef.current) {\n      const dialogContent =\n        triggerRef.current.closest<HTMLElement>(\"[role='dialog']\");\n      setPortalContainer(dialogContent ?? undefined);\n    }\n  }, [disablePortalToBody]);\n\n  if (isInvalidContent) {\n    return (\n      <span\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {children}\n      </span>\n    );\n  }\n\n  const tooltipTree = (\n    <BaseTooltip.Root\n      open={open}\n      onOpenChange={setOpen}\n      disabled={isInvalidContent}\n      disableHoverablePopup={!legacyMouseInteraction}\n    >\n      <BaseTooltip.Trigger\n        delay={enterDelay}\n        closeDelay={resolvedExitDelay}\n        render={\n          <span\n            ref={triggerRef}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            data-qa-popout-isopen={open ? \"true\" : \"false\"}\n            data-qa-tooltip={id}\n            {...(qa || {})}\n            style={\n              truncated\n                ? {\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    display: \"inline-flex\",\n                  }\n                : undefined\n            }\n          />\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": open ? id : undefined,\n            })\n          : children}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={4}\n          style={{ zIndex }}\n        >\n          <BaseTooltip.Popup\n            id={id}\n            render={\n              <StyledTooltipContent\n                role=\"tooltip\"\n                appearance={defaultAppearance}\n                borderRadius={defaultAppearance === \"box\" ? 500 : \"5000em\"}\n                px={400}\n                py={defaultAppearance === \"box\" ? 400 : 200}\n                m={200}\n                color=\"text.body\"\n                bg=\"container.background.base\"\n                boxShadow=\"medium\"\n                border={500}\n                borderColor=\"container.border.base\"\n                tabIndex={legacyMouseInteraction ? 0 : undefined}\n                {...rest}\n              />\n            }\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  return hasWrapperProps ? (\n    <Box {...mergedWrapperProps}>{tooltipTree}</Box>\n  ) : (\n    tooltipTree\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeTooltipPlacement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /**\n   * The placement of the tooltip in relation to the children.\n   *\n   * Note: `auto`, `auto-start`, and `auto-end` resolve to the `top` side (with\n   * the requested alignment) and rely on base-ui's runtime collision flipping,\n   * rather than the legacy Popper.js best-initial-side selection.\n   */\n  placement?: TypeTooltipPlacement;\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */\n  exitDelay?: number;\n\n  /**\n   * When true, enables mouse interaction on tooltip content and sets exitDelay\n   * to MOTION_DURATION_FAST * 1000 by default (instead of 0).\n   */\n  legacyMouseInteraction?: boolean;\n\n  /** 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. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /**\n   * @deprecated Use `triggerProps` instead. The Tooltip no longer uses Popout internally. This prop is accepted and merged with triggerProps\n   */\n  popoutProps?: Record<string, unknown>;\n\n  /** 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. */\n  triggerProps?: TypeBoxProps;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  legacyMouseInteraction?: boolean;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,UAAU,QAAQ,WAAW,kBAAkB;AACxD,OAAO,YAAY;AACnB,SAAS,WAAW,mBAAmB;AACvC,SAAS,kCAAkC;AAC3C,OAAOA,UAAS;;;ACLhB,OAAO,YAAY;AACnB,OAAO,SAAS;AAGT,IAAM,uBAAuB,OAAO,GAAG;AAAA,iBAG7B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,IAC9C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,gBAC1B,CAAC,UAAW,MAAM,eAAe,QAAQ,SAAS,QAAS;AAAA;;;ADmGrE,cAiBF,YAjBE;AAnGN,IAAI,YAAY;AAEhB,IAAM,eAAe,CAAC,OAAwB,cAAsB;AAClE,SAAa,qBAAe,KAAK,KAAK,MAAM,MAAM,SAAS,MAAM;AACnE;AASO,SAAS,aAAa,WAAiD;AAC5E,QAAM,QAAQ,UAAU,MAAM,GAAG;AACjC,MAAI;AACJ,MAAI,QAAe;AAEnB,UAAQ,MAAM,CAAC,GAAG;AAAA,IAChB,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AACH,aAAO;AACP;AAAA,IACF,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AACP;AAAA,EACJ;AAEA,MAAI,MAAM,CAAC,MAAM,SAAS;AACxB,YAAQ;AAAA,EACV,WAAW,MAAM,CAAC,MAAM,OAAO;AAC7B,YAAQ;AAAA,EACV;AAEA,SAAO,EAAE,MAAM,MAAM;AACvB;AAEA,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa,OAAO,uBAAuB;AAAA,EAC3C;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,EAAE,IAAI,SAAS,kBAAkB,WAAW,EAAE;AACrD,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,mBAAmB,YAAY,QAAQ,YAAY;AACzD,QAAM,sBAAsB,WAAW,0BAA0B;AACjE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAE5C,MAAS;AAEX,QAAM,oBACJ,cAAc,SACV,YACA,yBACA,OAAO,uBAAuB,MAC9B;AAEN,QAAM,oBACJ,eAAe,OAAO,YAAY,WAAW,QAAQ;AAEvD,QAAM,EAAE,MAAM,MAAM,IAAI,aAAa,SAAS;AAE9C,QAAM,qBAAqB;AAAA,IACzB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,OAAO,KAAK,kBAAkB,EAAE,SAAS;AAEjE,YAAU,MAAM;AACd,QAAI,uBAAuB,WAAW,SAAS;AAC7C,YAAM,gBACJ,WAAW,QAAQ,QAAqB,iBAAiB;AAC3D,yBAAmB,iBAAiB,MAAS;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,kBAAkB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OACE,YACI;AAAA,UACE,UAAU;AAAA,UACV,cAAc;AAAA,UACd,YAAY;AAAA,QACd,IACA,CAAC;AAAA,QAGN;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,cACJ;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,MACV,uBAAuB,CAAC;AAAA,MAExB;AAAA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,QACE;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA,yBAAuB,OAAO,SAAS;AAAA,gBACvC,mBAAiB;AAAA,gBAChB,GAAI,MAAM,CAAC;AAAA,gBACZ,OACE,YACI;AAAA,kBACE,UAAU;AAAA,kBACV,cAAc;AAAA,kBACd,YAAY;AAAA,kBACZ,SAAS;AAAA,gBACX,IACA;AAAA;AAAA,YAER;AAAA,YAGD,UAAM,qBAAe,QAAQ,IACpB,mBAAa,UAAgC;AAAA,cACjD,iBAAiB,aAAa,UAAU,eAAe,IACnD,SAAS,MAAM,eAAe,IAC9B;AAAA,cACJ,oBAAoB,OAAO,KAAK;AAAA,YAClC,CAAC,IACD;AAAA;AAAA,QACN;AAAA,QACA,oBAAC,YAAY,QAAZ,EAAmB,WAAW,iBAC7B;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,OAAO,EAAE,OAAO;AAAA,YAEhB;AAAA,cAAC,YAAY;AAAA,cAAZ;AAAA,gBACC;AAAA,gBACA,QACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,YAAY;AAAA,oBACZ,cAAc,sBAAsB,QAAQ,MAAM;AAAA,oBAClD,IAAI;AAAA,oBACJ,IAAI,sBAAsB,QAAQ,MAAM;AAAA,oBACxC,GAAG;AAAA,oBACH,OAAM;AAAA,oBACN,IAAG;AAAA,oBACH,WAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,aAAY;AAAA,oBACZ,UAAU,yBAAyB,IAAI;AAAA,oBACtC,GAAG;AAAA;AAAA,gBACN;AAAA,gBAGD;AAAA;AAAA,YACH;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAGF,SAAO,kBACL,oBAACC,MAAA,EAAK,GAAG,oBAAqB,uBAAY,IAE1C;AAEJ;AAEA,IAAO,kBAAQ;;;AE7Mf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Box","Box"]}

package/dist/index.d.mts

@@ -1,15 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
+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";
 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 */
-    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;
     /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */
@@ -23,8 +29,12 @@ interface TypeTooltipProps extends Omit<TypeBoxProps, "children" | "content" | "
     appearance?: "pill" | "box";
     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;
     ariaProps?: Record<string, string>;
@@ -35,7 +45,6 @@ interface TypeTooltipContent extends Pick<TypeTooltipProps, "appearance" | "chil
     legacyMouseInteraction?: boolean;
 }
 
-/** Core component */
-declare const Tooltip: ({ content, children, enterDelay, exitDelay, placement, appearance, zIndex, qa, popoutProps, truncated, onFocus, onBlur, legacyMouseInteraction, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ content, children, enterDelay, exitDelay, placement, appearance, zIndex, qa, popoutProps, triggerProps, truncated, onFocus, onBlur, legacyMouseInteraction, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
 
-export { Tooltip, type TypeTooltipContent, type TypeTooltipProps, Tooltip as default };
+export { Tooltip, type TypeTooltipContent, type TypeTooltipPlacement, type TypeTooltipProps, Tooltip as default };

package/dist/index.d.ts

@@ -1,15 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
+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";
 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 */
-    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;
     /** The time (in ms) that a user has to leave hovered/focused before the tooltip will disappear  */
@@ -23,8 +29,12 @@ interface TypeTooltipProps extends Omit<TypeBoxProps, "children" | "content" | "
     appearance?: "pill" | "box";
     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;
     ariaProps?: Record<string, string>;
@@ -35,7 +45,6 @@ interface TypeTooltipContent extends Pick<TypeTooltipProps, "appearance" | "chil
     legacyMouseInteraction?: boolean;
 }
 
-/** Core component */
-declare const Tooltip: ({ content, children, enterDelay, exitDelay, placement, appearance, zIndex, qa, popoutProps, truncated, onFocus, onBlur, legacyMouseInteraction, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ content, children, enterDelay, exitDelay, placement, appearance, zIndex, qa, popoutProps, triggerProps, truncated, onFocus, onBlur, legacyMouseInteraction, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
 
-export { Tooltip, type TypeTooltipContent, type TypeTooltipProps, Tooltip as default };
+export { Tooltip, type TypeTooltipContent, type TypeTooltipPlacement, type TypeTooltipProps, Tooltip as default };