@xsolla/xui-tooltip 0.216.1 → 0.218.0

package/web/index.d.ts

@@ -1,11 +1,14 @@
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type TooltipSize = "sm" | "md" | "lg" | "xl";
 type TooltipPlacement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
 interface TooltipProps {
     /**
-     * The content of the tooltip.
+     * The content of the tooltip. Strings and numbers are rendered as themed
+     * text; any other node is rendered as-is and inherits the tooltip's
+     * typography (see `TooltipText` / `TooltipLink`).
      */
     content: ReactNode;
     /**
@@ -52,7 +55,125 @@ interface TooltipProps {
     className?: string;
     testID?: string;
 }
+/**
+ * Typography and colour tokens the tooltip publishes to its content, so nested
+ * helpers do not have to re-derive them from the tooltip's `size`.
+ */
+interface TooltipContentStyles {
+    /** Size of the surrounding tooltip. */
+    size: TooltipSize;
+    /** Font size for the surrounding tooltip's size, in pixels. */
+    fontSize: number;
+    /** Line height for the surrounding tooltip's size, as a CSS length. */
+    lineHeight: string;
+    /** `content/primary` — default colour for tooltip copy. */
+    color: string;
+    /** `content/brand-primary` — default colour for links inside a tooltip. */
+    linkColor: string;
+}
+interface TooltipTextProps {
+    children?: ReactNode;
+    /**
+     * Render with the *accent* (bold) weight of the body token matching the
+     * tooltip's size.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * Overrides the size inherited from the surrounding tooltip. Defaults to the
+     * tooltip's own `size`, or `"md"` when rendered outside one.
+     */
+    size?: TooltipSize;
+    /** Overrides the inherited text colour. */
+    color?: string;
+    style?: any;
+    "data-testid"?: string;
+    testID?: string;
+}
+interface TooltipLinkProps extends TooltipTextProps {
+    /** Destination. Omit when driving navigation through `onPress`. */
+    href?: string;
+    /**
+     * Anchor target. `"_blank"` automatically adds `noopener noreferrer` to
+     * `rel`.
+     */
+    target?: string;
+    rel?: string;
+    /**
+     * Click handler. When supplied, the anchor's default navigation is
+     * prevented.
+     */
+    onPress?: () => void;
+    /**
+     * Underline the link text.
+     * @default false
+     */
+    underline?: boolean;
+}
+
+declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Text inside a `Tooltip`'s `content`, styled with the tooltip's own size
+ * scale and `content/primary` colour.
+ *
+ * Pass `accent` for bold copy — the weight is read from the body accent token
+ * matching the tooltip's size, so it tracks the active product context instead
+ * of a hardcoded `700`.
+ */
+declare const TooltipText: React__default.FC<TooltipTextProps & ThemeOverrideProps>;
+
+/**
+ * A link inside a `Tooltip`'s `content`. Uses the `content/brand-primary`
+ * token and the tooltip's own size scale, so it sits inline with surrounding
+ * `TooltipText` without the caller re-deriving typography.
+ *
+ * The tooltip surface is hoverable, so the link is reachable with a pointer.
+ * It is **not** reachable by keyboard — tabbing away from the trigger blurs it
+ * and dismisses the tooltip. When a link must be keyboard-operable, use
+ * [Toggletip](../../toggletip) instead.
+ */
+declare const TooltipLink: React__default.FC<TooltipLinkProps & ThemeOverrideProps>;
+
+/**
+ * Publishes the surrounding tooltip's resolved typography and colour tokens to
+ * whatever is rendered inside its `content`, so `TooltipText` / `TooltipLink`
+ * inherit the tooltip's size without the caller repeating it.
+ *
+ * `null` when the consumer is rendered outside a `Tooltip` — the helpers then
+ * fall back to their own defaults.
+ */
+declare const TooltipContentContext: React.Context<TooltipContentStyles | null>;
+declare const useTooltipContentStyles: () => TooltipContentStyles | null;
+
+/**
+ * Per-size font metrics for tooltip copy. Mirrors the tooltip size matrix in
+ * the Figma UI kit (node 5680-32928).
+ */
+declare const getTooltipTypoStyles: (size: TooltipSize) => {
+    fontSize: number;
+    lineHeight: string;
+};
+/** Fallbacks for a resolved theme that predates `typographyTokens`. */
+declare const DEFAULT_BODY_FONT_WEIGHT = 400;
+declare const DEFAULT_ACCENT_FONT_WEIGHT = 500;
+interface TooltipTypographyTokens {
+    basic?: Record<string, {
+        fontWeight?: number;
+        accent?: {
+            fontWeight?: number;
+        };
+    } | undefined>;
+}
+/** The slice of the resolved theme this module reads. */
+interface TooltipThemeTypography {
+    typographyTokens?: TooltipTypographyTokens;
+}
+/**
+ * Resolves the accent font weight for `size` from the theme's body typography
+ * scale, so bold tooltip copy follows the active product context (b2b/b2c use
+ * 500, corpsite uses 600) instead of a hardcoded weight.
+ */
+declare const getTooltipAccentFontWeight: (typographyTokens: TooltipTypographyTokens | undefined, size: TooltipSize) => number;
 
-export { Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize };
+export { DEFAULT_ACCENT_FONT_WEIGHT, DEFAULT_BODY_FONT_WEIGHT, Tooltip, TooltipContentContext, type TooltipContentStyles, TooltipLink, type TooltipLinkProps, type TooltipPlacement, type TooltipProps, type TooltipSize, TooltipText, type TooltipTextProps, type TooltipThemeTypography, type TooltipTypographyTokens, getTooltipAccentFontWeight, getTooltipTypoStyles, useTooltipContentStyles };

package/web/index.js

@@ -30,12 +30,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  Tooltip: () => Tooltip
+  DEFAULT_ACCENT_FONT_WEIGHT: () => DEFAULT_ACCENT_FONT_WEIGHT,
+  DEFAULT_BODY_FONT_WEIGHT: () => DEFAULT_BODY_FONT_WEIGHT,
+  Tooltip: () => Tooltip,
+  TooltipContentContext: () => TooltipContentContext,
+  TooltipLink: () => TooltipLink,
+  TooltipText: () => TooltipText,
+  getTooltipAccentFontWeight: () => getTooltipAccentFontWeight,
+  getTooltipTypoStyles: () => getTooltipTypoStyles,
+  useTooltipContentStyles: () => useTooltipContentStyles
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/Tooltip.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // ../../foundation/primitives-web/src/Box.tsx
 var import_react2 = __toESM(require("react"));
@@ -383,6 +391,41 @@ var Portal = ({ children }) => {
   return (0, import_react_dom.createPortal)(children, mountNode);
 };
 
+// src/TooltipContentContext.tsx
+var import_react4 = require("react");
+var TooltipContentContext = (0, import_react4.createContext)(
+  null
+);
+var useTooltipContentStyles = () => (0, import_react4.useContext)(TooltipContentContext);
+
+// src/contentTypography.ts
+var getTooltipTypoStyles = (size) => {
+  switch (size) {
+    case "sm":
+      return { fontSize: 14, lineHeight: "16px" };
+    case "md":
+      return { fontSize: 16, lineHeight: "18px" };
+    case "lg":
+      return { fontSize: 18, lineHeight: "20px" };
+    case "xl":
+      return { fontSize: 20, lineHeight: "22px" };
+    default:
+      return { fontSize: 16, lineHeight: "18px" };
+  }
+};
+var TOOLTIP_BODY_VARIANT = {
+  sm: "body-sm",
+  md: "body-md",
+  lg: "body-lg",
+  xl: "body-lg"
+};
+var DEFAULT_BODY_FONT_WEIGHT = 400;
+var DEFAULT_ACCENT_FONT_WEIGHT = 500;
+var getTooltipAccentFontWeight = (typographyTokens, size) => {
+  const variant = TOOLTIP_BODY_VARIANT[size] ?? TOOLTIP_BODY_VARIANT.md;
+  return typographyTokens?.basic?.[variant]?.accent?.fontWeight ?? DEFAULT_ACCENT_FONT_WEIGHT;
+};
+
 // src/Tooltip.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TOOLTIP_OPEN_EVENT = "xui-tooltip-open";
@@ -453,20 +496,6 @@ var getPositionStyles = (triggerRect, placement, offset, isVisible) => {
       };
   }
 };
-var getTypoStyles = (size) => {
-  switch (size) {
-    case "sm":
-      return { fontSize: 14, lineHeight: "16px" };
-    case "md":
-      return { fontSize: 16, lineHeight: "18px" };
-    case "lg":
-      return { fontSize: 18, lineHeight: "20px" };
-    case "xl":
-      return { fontSize: 20, lineHeight: "22px" };
-    default:
-      return { fontSize: 16, lineHeight: "18px" };
-  }
-};
 var getArrowStyles = (placement) => {
   const base = {
     width: ARROW_SIZE,
@@ -486,7 +515,7 @@ var getArrowStyles = (placement) => {
   };
   return { ...base, ...placementStyles[placement] };
 };
-var Tooltip = (0, import_react4.forwardRef)(
+var Tooltip = (0, import_react5.forwardRef)(
   ({
     content,
     children,
@@ -504,17 +533,17 @@ var Tooltip = (0, import_react4.forwardRef)(
     themeMode,
     themeProductContext
   }, ref) => {
-    const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
-    const [triggerRect, setTriggerRect] = (0, import_react4.useState)(null);
+    const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+    const [triggerRect, setTriggerRect] = (0, import_react5.useState)(null);
     const { theme: resolvedTheme } = (0, import_xui_core.useResolvedTheme)({
       themeMode,
       themeProductContext
     });
     const theme = resolvedTheme;
-    const enterTimeoutRef = (0, import_react4.useRef)(null);
-    const leaveTimeoutRef = (0, import_react4.useRef)(null);
-    const rafRef = (0, import_react4.useRef)(null);
-    const triggerRef = (0, import_react4.useRef)(null);
+    const enterTimeoutRef = (0, import_react5.useRef)(null);
+    const leaveTimeoutRef = (0, import_react5.useRef)(null);
+    const rafRef = (0, import_react5.useRef)(null);
+    const triggerRef = (0, import_react5.useRef)(null);
     const tooltipId = (0, import_xui_core.useId)();
     const modalId = (0, import_xui_core.useModalId)();
     const overlayLayer = (0, import_xui_core.useOverlayLayer)();
@@ -537,14 +566,29 @@ var Tooltip = (0, import_react4.forwardRef)(
       clearPendingVisibilityUpdates();
       setIsHovered(false);
     };
-    const positionStyles = (0, import_react4.useMemo)(
+    const positionStyles = (0, import_react5.useMemo)(
       () => triggerRect ? getPositionStyles(triggerRect, placement, offset, isVisible) : { top: 0, left: 0 },
       [triggerRect, placement, offset, isVisible]
     );
-    const typoStyles = (0, import_react4.useMemo)(() => getTypoStyles(size), [size]);
+    const typoStyles = (0, import_react5.useMemo)(() => getTooltipTypoStyles(size), [size]);
     const borderRadius = (theme.shape.tooltip[size] ?? theme.shape.tooltip.md).borderRadius;
-    const arrowStyles = (0, import_react4.useMemo)(() => getArrowStyles(placement), [placement]);
-    (0, import_react4.useEffect)(() => {
+    const arrowStyles = (0, import_react5.useMemo)(() => getArrowStyles(placement), [placement]);
+    const contentStyles = (0, import_react5.useMemo)(
+      () => ({
+        size,
+        fontSize: typoStyles.fontSize,
+        lineHeight: typoStyles.lineHeight,
+        color: theme.colors.content.primary,
+        linkColor: theme.colors.content.brand.primary
+      }),
+      [
+        size,
+        typoStyles,
+        theme.colors.content.primary,
+        theme.colors.content.brand.primary
+      ]
+    );
+    (0, import_react5.useEffect)(() => {
       if (!isVisible || import_xui_core.isNative) return;
       const updatePosition = () => {
         if (triggerRef.current) {
@@ -604,7 +648,7 @@ var Tooltip = (0, import_react4.forwardRef)(
         setIsHovered(false);
       }
     };
-    (0, import_react4.useEffect)(() => {
+    (0, import_react5.useEffect)(() => {
       if (import_xui_core.isNative) return;
       const handleEscape = (event) => {
         if (event.key === "Escape" && isVisible) {
@@ -698,21 +742,28 @@ var Tooltip = (0, import_react4.forwardRef)(
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContentContext.Provider, { value: contentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   Box,
                   {
                     style: {
                       wordWrap: "break-word",
                       overflowWrap: "break-word",
                       maxWidth: "100%",
-                      whiteSpace: "normal"
+                      whiteSpace: "normal",
+                      // Custom `content` inherits the tooltip's own type scale,
+                      // so plain markup (`<strong>`, `<a>`, bare strings) reads
+                      // at the right size without re-deriving it per call site.
+                      fontSize: typoStyles.fontSize,
+                      lineHeight: typoStyles.lineHeight,
+                      fontWeight: DEFAULT_BODY_FONT_WEIGHT,
+                      color: theme.colors.content.primary
                     },
                     children: typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       Text,
                       {
                         color: theme.colors.content.primary,
                         fontSize: typoStyles.fontSize,
-                        fontWeight: "400",
+                        fontWeight: String(DEFAULT_BODY_FONT_WEIGHT),
                         style: {
                           lineHeight: typoStyles.lineHeight,
                           whiteSpace: "pre-line"
@@ -721,7 +772,7 @@ var Tooltip = (0, import_react4.forwardRef)(
                       }
                     ) : content
                   }
-                )
+                ) })
               ]
             }
           ) })
@@ -731,8 +782,136 @@ var Tooltip = (0, import_react4.forwardRef)(
   }
 );
 Tooltip.displayName = "Tooltip";
+
+// src/TooltipText.tsx
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TooltipText = ({
+  children,
+  accent = false,
+  size,
+  color,
+  style,
+  testID,
+  "data-testid": dataTestId,
+  themeMode,
+  themeProductContext
+}) => {
+  const inherited = useTooltipContentStyles();
+  const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
+  const resolvedSize = size ?? inherited?.size ?? "md";
+  const typo = getTooltipTypoStyles(resolvedSize);
+  const resolvedColor = color ?? inherited?.color ?? theme.colors.content.primary;
+  const fontWeight = accent ? getTooltipAccentFontWeight(
+    theme.typographyTokens,
+    resolvedSize
+  ) : DEFAULT_BODY_FONT_WEIGHT;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Text,
+    {
+      testID,
+      "data-testid": dataTestId,
+      color: resolvedColor,
+      fontSize: typo.fontSize,
+      fontWeight: String(fontWeight),
+      style: {
+        lineHeight: typo.lineHeight,
+        whiteSpace: "pre-line",
+        ...style
+      },
+      children
+    }
+  );
+};
+TooltipText.displayName = "TooltipText";
+
+// src/TooltipLink.tsx
+var import_xui_core3 = require("@xsolla/xui-core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TooltipLink = ({
+  children,
+  href,
+  target,
+  rel,
+  onPress,
+  accent = false,
+  underline = false,
+  size,
+  color,
+  style,
+  testID,
+  "data-testid": dataTestId,
+  themeMode,
+  themeProductContext
+}) => {
+  const inherited = useTooltipContentStyles();
+  const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
+  const resolvedSize = size ?? inherited?.size ?? "md";
+  const typo = getTooltipTypoStyles(resolvedSize);
+  const resolvedColor = color ?? inherited?.linkColor ?? theme.colors.content.brand.primary;
+  const fontWeight = accent ? getTooltipAccentFontWeight(
+    theme.typographyTokens,
+    resolvedSize
+  ) : DEFAULT_BODY_FONT_WEIGHT;
+  const resolvedRel = target === "_blank" ? Array.from(
+    /* @__PURE__ */ new Set([
+      ...rel ? rel.split(/\s+/).filter(Boolean) : [],
+      "noopener",
+      "noreferrer"
+    ])
+  ).join(" ") : rel;
+  const handlePress = (event) => {
+    if (!onPress) return;
+    event?.preventDefault?.();
+    onPress();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Box,
+    {
+      as: "a",
+      href,
+      target,
+      rel: resolvedRel,
+      onPress: handlePress,
+      onClick: handlePress,
+      role: "link",
+      cursor: "pointer",
+      display: "inline-flex",
+      alignItems: "center",
+      testID,
+      "data-testid": dataTestId,
+      hoverStyle: { opacity: 0.8 },
+      focusStyle: {
+        outlineColor: theme.colors.border.brand,
+        outlineWidth: 2,
+        outlineStyle: "solid",
+        outlineOffset: 2
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Text,
+        {
+          color: resolvedColor,
+          fontSize: typo.fontSize,
+          fontWeight: String(fontWeight),
+          textDecoration: underline ? "underline" : "none",
+          style: { lineHeight: typo.lineHeight, ...style },
+          children
+        }
+      )
+    }
+  );
+};
+TooltipLink.displayName = "TooltipLink";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Tooltip
+  DEFAULT_ACCENT_FONT_WEIGHT,
+  DEFAULT_BODY_FONT_WEIGHT,
+  Tooltip,
+  TooltipContentContext,
+  TooltipLink,
+  TooltipText,
+  getTooltipAccentFontWeight,
+  getTooltipTypoStyles,
+  useTooltipContentStyles
 });
 //# sourceMappingURL=index.js.map