@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/components/ui/tooltip.tsx

@@ -5,33 +5,57 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
-import { UtilityClose } from "@/components/icons/UtilityClose";
+import { Button } from "@/components/ui/button";
 
-const tooltipContentVariants = cva("tooltip-content", {
+const tooltipContentVariants = cva("tooltip-content font-mazzardSoft", {
   variants: {
-    variant: {
-      default: "tooltip-content--default",
-      simple: "tooltip-content--simple",
+    tone: {
+      dark: "tooltip-content--dark",
+      light: "tooltip-content--light",
     },
   },
   defaultVariants: {
-    variant: "default",
+    tone: "dark",
   },
 });
 
+export type TooltipTone = NonNullable<
+  VariantProps<typeof tooltipContentVariants>["tone"]
+>;
+
+export type TooltipDirection = "top" | "bottom" | "left" | "right";
+
+const MARKER_INSET = { inline: 54, block: 53 } as const;
+const MARKER_HALF = 5;
+
+const directionToSide: Record<
+  TooltipDirection,
+  "top" | "bottom" | "left" | "right"
+> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
 type TriggerMode = "hover" | "click";
 
-// Context for passing trigger mode and close function to children
+type AnchorSize = { width: number; height: number };
+
 const TooltipContext = React.createContext<{
   trigger: TriggerMode;
   toggle: () => void;
   close: () => void;
   triggerRef: React.RefObject<HTMLButtonElement | null>;
+  anchorSize: AnchorSize;
+  setAnchorSize: (size: AnchorSize) => void;
 }>({
   trigger: "hover",
   toggle: () => {},
   close: () => {},
   triggerRef: { current: null },
+  anchorSize: { width: 0, height: 0 },
+  setAnchorSize: () => {},
 });
 
 function TooltipProvider({
@@ -52,20 +76,13 @@ interface TooltipProps
     React.ComponentProps<typeof TooltipPrimitive.Root>,
     "open" | "onOpenChange"
   > {
-  /**
-   * Trigger mode: "hover" (default) or "click"
-   * - hover: Opens on mouse hover, closes on hover off (default tooltip behavior)
-   * - click: Opens on click, closes on trigger click or click outside
-   */
   trigger?: TriggerMode;
-  /** Controlled open state (optional) */
   open?: boolean;
-  /** Callback when open state changes (optional) */
   onOpenChange?: (open: boolean) => void;
 }
 
 function Tooltip({
-  trigger = "hover",
+  trigger = "click",
   open: controlledOpen,
   onOpenChange,
   children,
@@ -73,14 +90,16 @@ function Tooltip({
 }: TooltipProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const [anchorSize, setAnchorSize] = React.useState<AnchorSize>({
+    width: 0,
+    height: 0,
+  });
 
-  // Use controlled or uncontrolled state
   const isControlled = controlledOpen !== undefined;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
 
   const handleOpenChange = React.useCallback(
     (newOpen: boolean) => {
-      // For click mode, ignore hover-triggered changes
       if (trigger === "click") return;
 
       if (!isControlled) {
@@ -106,7 +125,6 @@ function Tooltip({
     onOpenChange?.(newOpen);
   }, [isOpen, isControlled, onOpenChange]);
 
-  // For click mode, we fully control open state
   const tooltipProps =
     trigger === "click"
       ? {
@@ -119,7 +137,9 @@ function Tooltip({
         };
 
   return (
-    <TooltipContext.Provider value={{ trigger, toggle, close, triggerRef }}>
+    <TooltipContext.Provider
+      value={{ trigger, toggle, close, triggerRef, anchorSize, setAnchorSize }}
+    >
       <TooltipProvider delayDuration={trigger === "click" ? 100000 : 0}>
         <TooltipPrimitive.Root data-slot="tooltip" {...tooltipProps} {...props}>
           {children}
@@ -133,7 +153,21 @@ function TooltipTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  const { trigger, toggle, triggerRef } = React.useContext(TooltipContext);
+  const { trigger, toggle, triggerRef, setAnchorSize } =
+    React.useContext(TooltipContext);
+
+  React.useLayoutEffect(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const measure = () => {
+      const { width, height } = el.getBoundingClientRect();
+      setAnchorSize({ width, height });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [triggerRef, setAnchorSize]);
 
   const handleClick = React.useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -157,26 +191,191 @@ function TooltipTrigger({
   );
 }
 
+function TooltipMarker() {
+  return (
+    <svg
+      className="tooltip-marker"
+      data-slot="tooltip-marker"
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d="M10 0L0 0C0 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function textOf(node: React.ReactNode): string {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).filter(Boolean).join(" ");
+  if (React.isValidElement(node)) {
+    return textOf((node.props as { children?: React.ReactNode }).children);
+  }
+  return "";
+}
+
+export interface TooltipPanelProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof tooltipContentVariants> {
+  direction?: TooltipDirection;
+  heading?: React.ReactNode;
+  body?: React.ReactNode;
+  conditionalText?: React.ReactNode;
+  primaryLabel?: React.ReactNode;
+  secondaryLabel?: React.ReactNode;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+}
+
+const TooltipPanel = React.forwardRef<HTMLDivElement, TooltipPanelProps>(
+  (
+    {
+      className,
+      tone = "dark",
+      direction = "top",
+      heading,
+      body,
+      conditionalText,
+      primaryLabel,
+      secondaryLabel,
+      onPrimaryAction,
+      onSecondaryAction,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const showHeader = heading != null || body != null;
+    const showActions = primaryLabel != null || secondaryLabel != null;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="tooltip-content"
+        data-direction={direction}
+        className={cn(tooltipContentVariants({ tone }), className)}
+        {...props}
+      >
+        <TooltipMarker />
+
+        {showHeader && (
+          <div className="tooltip-header" data-slot="tooltip-header">
+            {heading != null && (
+              <p className="tooltip-heading" data-slot="tooltip-heading">
+                {heading}
+              </p>
+            )}
+            {body != null && (
+              <p className="tooltip-body" data-slot="tooltip-body">
+                {body}
+              </p>
+            )}
+          </div>
+        )}
+
+        {conditionalText != null && (
+          <>
+            <span
+              className="tooltip-separator"
+              data-slot="tooltip-separator"
+              aria-hidden
+            />
+            <p className="tooltip-body" data-slot="tooltip-conditional-text">
+              {conditionalText}
+            </p>
+          </>
+        )}
+
+        {children}
+
+        {showActions && (
+          <div className="tooltip-actions" data-slot="tooltip-actions">
+            {primaryLabel != null && (
+              <Button
+                type="button"
+                size="utility"
+                variant={
+                  tone === "light" ? "tooltip-primary-light" : "tooltip-primary"
+                }
+                onClick={onPrimaryAction}
+              >
+                {primaryLabel}
+              </Button>
+            )}
+            {secondaryLabel != null && (
+              <Button
+                type="button"
+                size="utility"
+                variant={
+                  tone === "light"
+                    ? "tooltip-secondary-light"
+                    : "tooltip-secondary"
+                }
+                onClick={onSecondaryAction}
+              >
+                {secondaryLabel}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+TooltipPanel.displayName = "TooltipPanel";
+
+export interface TooltipContentProps
+  extends Omit<
+      React.ComponentProps<typeof TooltipPrimitive.Content>,
+      "content" | "side"
+    >,
+    VariantProps<typeof tooltipContentVariants> {
+  direction?: TooltipDirection;
+  heading?: React.ReactNode;
+  body?: React.ReactNode;
+  conditionalText?: React.ReactNode;
+  primaryLabel?: React.ReactNode;
+  secondaryLabel?: React.ReactNode;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+}
+
 function TooltipContent({
   className,
-  variant,
-  sideOffset = 0,
-  side = "bottom",
+  tone = "dark",
+  sideOffset = 12,
+  direction = "top",
+  align = "start",
+  alignOffset,
+  heading,
+  body,
+  conditionalText,
+  primaryLabel,
+  secondaryLabel,
+  onPrimaryAction,
+  onSecondaryAction,
+  "aria-label": ariaLabel,
   children,
-  alignOffset = 0,
-  hideClose = false,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content> &
-  VariantProps<typeof tooltipContentVariants> & {
-    hideClose?: boolean;
-  }) {
-  const { trigger, close, triggerRef } = React.useContext(TooltipContext);
+}: TooltipContentProps) {
+  const { trigger, close, triggerRef, anchorSize } =
+    React.useContext(TooltipContext);
   const contentRef = React.useRef<HTMLDivElement>(null);
 
-  // Click outside detection for click mode
   React.useEffect(() => {
     if (trigger !== "click") return;
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Node;
       const isOutsideContent =
@@ -189,72 +388,66 @@ function TooltipContent({
       }
     };
 
-    // Small delay to avoid closing immediately on the same click that opened it
     const timeoutId = setTimeout(() => {
       document.addEventListener("click", handleClickOutside);
     }, 0);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
       clearTimeout(timeoutId);
       document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [trigger, close, triggerRef]);
 
+  const isVertical = direction === "top" || direction === "bottom";
+  const markerCentre =
+    (isVertical ? MARKER_INSET.inline : MARKER_INSET.block) + MARKER_HALF;
+  const anchorExtent = isVertical ? anchorSize.width : anchorSize.height;
+  const resolvedAlignOffset =
+    alignOffset ?? (anchorExtent > 0 ? anchorExtent / 2 - markerCentre : 0);
+
+  const derivedLabel = [heading, body, conditionalText]
+    .map(textOf)
+    .filter(Boolean)
+    .join(". ");
+
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        asChild
         ref={contentRef}
-        data-slot="tooltip-content"
         sideOffset={sideOffset}
-        alignOffset={alignOffset}
-        side={side}
-        className={cn(tooltipContentVariants({ variant }), className)}
+        alignOffset={resolvedAlignOffset}
+        side={directionToSide[direction]}
+        align={align}
+        aria-label={ariaLabel ?? (derivedLabel || undefined)}
         {...props}
       >
-        {variant !== "simple" && (
-          <div className="tooltip-arrow">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="10"
-              height="5"
-              viewBox="0 0 10 5"
-              fill="none"
-            >
-              <path
-                d="M10 -1.74846e-06L-7.36867e-07 0C-3.29906e-07 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 -1.74846e-06Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        )}
-        {variant !== "simple" && !hideClose && (
-          <ToggleClose />
-        )}
-        {children}
+        <TooltipPanel
+          tone={tone}
+          direction={direction}
+          className={className}
+          heading={heading}
+          body={body}
+          conditionalText={conditionalText}
+          primaryLabel={primaryLabel}
+          secondaryLabel={secondaryLabel}
+          onPrimaryAction={onPrimaryAction}
+          onSecondaryAction={onSecondaryAction}
+        >
+          {children}
+        </TooltipPanel>
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
 }
 
-function ToggleClose({ className }: { className?: string }) {
-  const { close } = React.useContext(TooltipContext);
-
-  return (
-    <button
-      data-slot="tooltip-close"
-      onClick={close}
-      className={className}
-    >
-      <UtilityClose className="text-inherit" />
-    </button>
-  );
-}
-
 export {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
+  TooltipPanel,
   tooltipContentVariants,
   TooltipProvider,
-  ToggleClose,
 };