@automattic/charts 4.7.0 → 4.8.0

package/src/components/tooltip/{base-tooltip.module.scss → tooltip-box.module.scss}

@@ -1,8 +1,7 @@
 // `.surface` is the look alone, for a chart that positions the box itself.
-// The box carries the chart scope class inside TooltipTheme, so these roles
+// The box carries the tooltip scope class inside TooltipTheme, so these roles
 // resolve for the dark tooltip theme, as in @wordpress/ui's Tooltip popup.
-.surface,
-.tooltip {
+.surface {
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
 	background-color: var(--a8c-charts-color-surface);
 	color: var(--a8c-charts-color-label);
@@ -12,13 +11,11 @@
 	line-height: 1.4;
 	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 	pointer-events: none;
+	// Beats a host `max-width` on `.visx-tooltip`, even an `!important`
+	// one: WordPress.com's Help Center caps it at 150px.
+	min-width: fit-content;
 
 	@media (forced-colors: active) {
 		border: var(--wpds-border-width-xs) solid CanvasText;
 	}
 }
-
-.tooltip {
-	position: absolute;
-	transform: translate(-50%, -100%);
-}

package/src/components/tooltip/tooltip-box.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TOOLTIP_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { TooltipTheme } from './private/tooltip-theme';
+import styles from './tooltip-box.module.scss';
+import type { HTMLAttributes } from 'react';
+
+type TooltipBoxProps = HTMLAttributes< HTMLDivElement > & {
+	/** Drop the chart surface, scope class and dark theme, leaving a bare box. */
+	unstyled?: boolean;
+};
+
+/**
+ * The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
+ *
+ * @param props          - Div attributes, plus `unstyled`.
+ * @param props.unstyled - Drop the surface, scope class and theme.
+ * @param ref            - Forwarded to the box element.
+ * @return The tooltip box.
+ */
+export const TooltipBox = forwardRef< HTMLDivElement, TooltipBoxProps >(
+	( { unstyled = false, role = 'tooltip', className, children, ...rest }, ref ) => {
+		const box = (
+			<div
+				ref={ ref }
+				role={ role }
+				className={ clsx(
+					'visx-tooltip',
+					! unstyled && [ TOOLTIP_SCOPE_CLASS, styles.surface ],
+					className
+				) }
+				{ ...rest }
+			>
+				{ children }
+			</div>
+		);
+		return unstyled ? box : <TooltipTheme>{ box }</TooltipTheme>;
+	}
+);
+
+TooltipBox.displayName = 'TooltipBox';
+
+export type { TooltipBoxProps };

package/src/components/tooltip/types.ts

@@ -5,4 +5,10 @@ type TooltipProps = {
 	};
 };
 
-export type { TooltipProps };
+type TooltipData = {
+	label: string;
+	value: number;
+	valueDisplay?: string;
+};
+
+export type { TooltipProps, TooltipData };