@dynatrace/strato-components 3.4.0 → 3.5.0

package/charts/core/components/overlay-tooltip/constants.js

@@ -25,7 +25,6 @@ __export(constants_exports, {
   MAX_SERIES_NAME_LINES: () => MAX_SERIES_NAME_LINES,
   MAX_TOOLTIP_WIDTH: () => MAX_TOOLTIP_WIDTH,
   MIN_TOOLTIP_WIDTH: () => MIN_TOOLTIP_WIDTH,
-  OVERLAY_TOOLTIP_ELEVATION: () => OVERLAY_TOOLTIP_ELEVATION,
   SCROLLBAR_WIDTH: () => SCROLLBAR_WIDTH,
   SPACE_CHARACTER_WIDTH: () => SPACE_CHARACTER_WIDTH,
   SYMBOL_AND_SPACING_WIDTH: () => SYMBOL_AND_SPACING_WIDTH,
@@ -46,7 +45,6 @@ const SPACE_CHARACTER_WIDTH = 4;
 const SYMBOL_CONTAINER_WIDTH = 24;
 const GAP_BETWEEN_COLUMNS = 12;
 const SYMBOL_AND_SPACING_WIDTH = SYMBOL_CONTAINER_WIDTH + GAP_BETWEEN_COLUMNS;
-const OVERLAY_TOOLTIP_ELEVATION = 15;
 const MIN_TOOLTIP_WIDTH = 200;
 const MAX_TOOLTIP_WIDTH = 480;
 const SCROLLBAR_WIDTH = 14;

package/charts/core/components/overlay-tooltip/hooks/useDynamicTooltip.js

@@ -58,7 +58,7 @@ const useDynamicTooltip = (args) => {
     y: -1,
     getBoundingClientRect: (0, import_create_dom_rect.createDOMRect)({ x: -1, y: -1 })
   });
-  const overlayStacking = (0, import_useOverlayStacking.useOverlayStacking)(0, "dropdown");
+  const overlayStacking = (0, import_useOverlayStacking.useOverlayStacking)(0, "overlay");
   if (x !== virtualElement.current.x || y !== virtualElement.current.y) {
     virtualElement.current = {
       x,

package/charts/core/components/overlay-tooltip/tooltip.css

@@ -1,4 +1,4 @@
-._1j1seex4-3-4-0 {
+._1j1seex4-3-5-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -8,29 +8,28 @@
   overflow: hidden;
   top: 0;
   left: 0;
-  z-index: 15;
   color: currentColor;
   min-width: 200px;
   max-width: 480px;
 }
-._1j1seex4-3-4-0[data-placement="right"] {
+._1j1seex4-3-5-0[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._1j1seex4-3-4-0[data-placement="left"] {
+._1j1seex4-3-5-0[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._1j1seex5-3-4-0 {
+._1j1seex5-3-5-0 {
   pointer-events: all;
 }
-._1j1seex5-3-4-0[data-popper-reference-hidden=true] {
+._1j1seex5-3-5-0[data-popper-reference-hidden=true] {
   visibility: hidden;
   pointer-events: none;
 }
-._1j1seex6-3-4-0 {
+._1j1seex6-3-5-0 {
   pointer-events: none;
   user-select: none;
 }
-._1j1seex7-3-4-0 {
+._1j1seex7-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -43,33 +42,33 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seex8-3-4-0 {
+._1j1seex8-3-5-0 {
   min-width: 0;
 }
-._1j1seex9-3-4-0 {
+._1j1seex9-3-5-0 {
   min-width: 0;
   text-align: right;
 }
-._1j1seexa-3-4-0 {
+._1j1seexa-3-5-0 {
   min-height: 24px;
   max-height: 192px;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._1j1seexb-3-4-0 {
+._1j1seexb-3-5-0 {
   width: 100%;
 }
-._1j1seexc-3-4-0 {
+._1j1seexc-3-5-0 {
   display: grid;
   width: 100%;
   position: relative;
   gap: 2px 16px;
 }
-._1j1seexd-3-4-0 {
+._1j1seexd-3-5-0 {
   width: 100%;
   position: relative;
 }
-._1j1seexe-3-4-0 {
+._1j1seexe-3-5-0 {
   display: grid;
   align-items: flex-start;
   box-sizing: border-box;
@@ -81,20 +80,22 @@
   width: 100%;
   min-width: fit-content;
 }
-._1j1seexf-3-4-0 {
+._1j1seexf-3-5-0 {
   grid-template-areas: "symbol name value";
-  grid-template-columns: var(--_1j1seex3-3-4-0) 1fr auto;
+  grid-template-columns: var(--_1j1seex3-3-5-0) 1fr auto;
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexg-3-4-0 {
+._1j1seexg-3-5-0 {
   grid-template-areas: "name value symbol";
-  grid-template-columns: 1fr auto var(--_1j1seex3-3-4-0);
+  grid-template-columns: 1fr auto var(--_1j1seex3-3-5-0);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexh-3-4-0 {
+._1j1seexh-3-5-0 {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._1j1seexi-3-4-0 {
+._1j1seexi-3-5-0 {
+  all: unset;
+  display: block;
   width: 100%;
   box-sizing: border-box;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -103,12 +104,12 @@
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
   cursor: pointer;
 }
-._1j1seexj-3-4-0 {
+._1j1seexj-3-5-0 {
   display: flex;
   align-items: flex-start;
   width: 100%;
 }
-._1j1seexk-3-4-0 {
+._1j1seexk-3-5-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -120,30 +121,30 @@
   flex-shrink: 0;
   color: currentColor;
 }
-._1j1seexl-3-4-0 {
+._1j1seexl-3-5-0 {
   margin-left: calc(var(--dt-spacings-size-2, 2px) - var(--dt-spacings-size-6, 6px));
 }
-._1j1seexm-3-4-0 {
+._1j1seexm-3-5-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1j1seexn-3-4-0 {
+._1j1seexn-3-5-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexo-3-4-0 {
+._1j1seexo-3-5-0 {
   display: -webkit-box;
-  -webkit-line-clamp: var(--_1j1seex0-3-4-0);
+  -webkit-line-clamp: var(--_1j1seex0-3-5-0);
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word;
 }
-._1j1seexp-3-4-0 {
+._1j1seexp-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexq-3-4-0 {
+._1j1seexq-3-5-0 {
   height: var(--dt-spacings-size-24, 24px);
   line-height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
@@ -152,10 +153,10 @@
   min-width: var(--dt-spacings-size-24, 24px);
   align-items: center;
 }
-._1j1seexr-3-4-0 {
+._1j1seexr-3-5-0 {
   margin-right: -6px;
 }
-._1j1seexs-3-4-0 {
+._1j1seexs-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -164,25 +165,25 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seext-3-4-0 {
+._1j1seext-3-5-0 {
   min-width: 0;
   flex: 1;
 }
-._1j1seexu-3-4-0 {
+._1j1seexu-3-5-0 {
   flex-shrink: 0;
   text-align: right;
 }
-._1j1seexv-3-4-0 {
+._1j1seexv-3-5-0 {
   display: flex;
   align-items: flex-start;
   min-width: 0;
 }
-._1j1seexw-3-4-0 {
+._1j1seexw-3-5-0 {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-._1j1seexx-3-4-0 {
+._1j1seexx-3-5-0 {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -190,15 +191,15 @@
   margin-block: var(--dt-spacings-size-0, 0);
   padding-block: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexy-3-4-0 {
+._1j1seexy-3-5-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexz-3-4-0 {
+._1j1seexz-3-5-0 {
   margin-left: -6px;
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex10-3-4-0 {
+._1j1seex10-3-5-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -208,19 +209,19 @@
   max-width: 480px;
   box-sizing: border-box;
 }
-._1j1seex11-3-4-0 {
+._1j1seex11-3-5-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1j1seex2-3-4-0);
+  -webkit-line-clamp: var(--_1j1seex2-3-5-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1j1seex12-3-4-0 {
+._1j1seex12-3-5-0 {
   display: flex;
   flex-direction: column;
 }
-._1j1seex4-3-4-0:not(:has(._1j1seex12-3-4-0:hover)) ._1j1seex13-3-4-0 {
+._1j1seex4-3-5-0:not(:has(._1j1seex12-3-5-0:hover)) ._1j1seex13-3-5-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }

package/charts/core/components/overlay-tooltip/tooltip.sty.js

@@ -57,37 +57,37 @@ module.exports = __toCommonJS(tooltip_css_exports);
 var import_tooltip_css_ts_vanilla = require("./tooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var TOOLTIP_MAX_WIDTH = 480;
-var actionsContainer = "_1j1seex12-3-4-0";
-var chevron = "_1j1seexk-3-4-0";
-var chevronRightAligned = "_1j1seexl-3-4-0";
-var divider = "_1j1seexy-3-4-0";
-var headerText = "_1j1seexs-3-4-0";
-var multiLineName = "_1j1seexx-3-4-0";
-var relativeValueStyle = "_1j1seexp-3-4-0";
-var seriesActionHeader = "_1j1seex10-3-4-0";
-var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-4-0)";
-var seriesActionHeaderMultiLine = "_1j1seex11-3-4-0";
-var seriesGridContainer = "_1j1seexb-3-4-0";
-var seriesHeader = "_1j1seex7-3-4-0";
-var seriesHeaderName = "_1j1seex8-3-4-0";
-var seriesHeaderValue = "_1j1seex9-3-4-0";
-var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexe-3-4-0", variantClassNames: { symbolPosition: { left: "_1j1seexf-3-4-0", right: "_1j1seexg-3-4-0" }, hasChevron: { true: "_1j1seexh-3-4-0" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
-var seriesItemActive = "_1j1seexm-3-4-0";
-var seriesItemHighlighted = "_1j1seex13-3-4-0";
-var seriesItemMaxWidthVar = "var(--_1j1seex1-3-4-0)";
-var seriesItemText = "_1j1seexn-3-4-0";
-var seriesItemWithChevron = "_1j1seexj-3-4-0";
-var seriesItemWrapper = "_1j1seexi-3-4-0";
-var seriesNameCell = "_1j1seexv-3-4-0";
-var seriesNameMaxLinesVar = "var(--_1j1seex0-3-4-0)";
-var seriesNameText = "_1j1seext-3-4-0";
-var seriesNameTextMultiLine = "_1j1seexo-3-4-0";
-var seriesOverflowContainer = "_1j1seexd-3-4-0";
-var seriesOverflowContainerBase = "_1j1seexc-3-4-0";
-var seriesValueCell = "_1j1seexw-3-4-0";
-var seriesValueText = "_1j1seexu-3-4-0";
-var seriesWrapper = "_1j1seexa-3-4-0";
-var spaceSavedForSymbolVar = "var(--_1j1seex3-3-4-0)";
-var symbolRight = "_1j1seexz-3-4-0";
-var symbolWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexq-3-4-0", variantClassNames: { isRight: { true: "_1j1seexr-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex4-3-4-0", variantClassNames: { isInteractive: { true: "_1j1seex5-3-4-0", false: "_1j1seex6-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var actionsContainer = "_1j1seex12-3-5-0";
+var chevron = "_1j1seexk-3-5-0";
+var chevronRightAligned = "_1j1seexl-3-5-0";
+var divider = "_1j1seexy-3-5-0";
+var headerText = "_1j1seexs-3-5-0";
+var multiLineName = "_1j1seexx-3-5-0";
+var relativeValueStyle = "_1j1seexp-3-5-0";
+var seriesActionHeader = "_1j1seex10-3-5-0";
+var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-5-0)";
+var seriesActionHeaderMultiLine = "_1j1seex11-3-5-0";
+var seriesGridContainer = "_1j1seexb-3-5-0";
+var seriesHeader = "_1j1seex7-3-5-0";
+var seriesHeaderName = "_1j1seex8-3-5-0";
+var seriesHeaderValue = "_1j1seex9-3-5-0";
+var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexe-3-5-0", variantClassNames: { symbolPosition: { left: "_1j1seexf-3-5-0", right: "_1j1seexg-3-5-0" }, hasChevron: { true: "_1j1seexh-3-5-0" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
+var seriesItemActive = "_1j1seexm-3-5-0";
+var seriesItemHighlighted = "_1j1seex13-3-5-0";
+var seriesItemMaxWidthVar = "var(--_1j1seex1-3-5-0)";
+var seriesItemText = "_1j1seexn-3-5-0";
+var seriesItemWithChevron = "_1j1seexj-3-5-0";
+var seriesItemWrapper = "_1j1seexi-3-5-0";
+var seriesNameCell = "_1j1seexv-3-5-0";
+var seriesNameMaxLinesVar = "var(--_1j1seex0-3-5-0)";
+var seriesNameText = "_1j1seext-3-5-0";
+var seriesNameTextMultiLine = "_1j1seexo-3-5-0";
+var seriesOverflowContainer = "_1j1seexd-3-5-0";
+var seriesOverflowContainerBase = "_1j1seexc-3-5-0";
+var seriesValueCell = "_1j1seexw-3-5-0";
+var seriesValueText = "_1j1seexu-3-5-0";
+var seriesWrapper = "_1j1seexa-3-5-0";
+var spaceSavedForSymbolVar = "var(--_1j1seex3-3-5-0)";
+var symbolRight = "_1j1seexz-3-5-0";
+var symbolWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexq-3-5-0", variantClassNames: { isRight: { true: "_1j1seexr-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex4-3-5-0", variantClassNames: { isInteractive: { true: "_1j1seex5-3-5-0", false: "_1j1seex6-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/overlay-tooltip/types/series.d.ts

@@ -1,55 +1,113 @@
 import type { JSX } from 'react';
 import type { SeriesActionsTemplate } from '../../../types/series-actions-template.js';
 import { VariantShape } from '../../shape/type.js';
-import type { Data } from '../types.js';
-/** @internal */
-export type Series = Data['series'][number];
-/** @internal */
+/**
+ * Shape of a single data series entry rendered inside the tooltip.
+ * @public
+ */
+export type Series = {
+    /** Display name of the series. Pass an array for multi-line names. */
+    name: string | string[];
+    /** The formatted value to display (string, number, or Date). */
+    value: string | number | Date;
+    /** The color used for the series symbol. */
+    color: string;
+    /** Optional unit label appended after the main value. */
+    valueUnit?: string;
+    /** Optional relative value (e.g. percentage) shown alongside the main value. */
+    relativeValue?: string | number;
+    /** Optional unit label appended after the relative value. */
+    relativeValueUnit?: string;
+};
+/**
+ * Truncation options that enable multi-line wrapping for series names.
+ * @public
+ */
 export type TruncationModeMultiLine = {
+    /** When `true`, the series name wraps across multiple lines instead of being truncated. */
     multiLine?: true;
 };
-/** @internal */
+/**
+ * Truncation options that cap series name display to a fixed number of lines.
+ * @public
+ */
 export type TruncationModeMaxLines = {
+    /** When `false` or omitted, multi-line wrapping is disabled. */
     multiLine?: false;
+    /** Maximum number of lines before the name is truncated. Defaults to `1`. */
     maxLines?: number;
 };
-/** @internal */
+/**
+ * Union of supported truncation strategies for series name display.
+ * @public
+ */
 export type TooltipTruncationOptions = TruncationModeMultiLine | TruncationModeMaxLines;
 /**
- * @internal
+ * Visual size variant for the series icon.
+ * - `'default'` — standard size.
+ * - `'large'` — enlarged icon for emphasis.
+ * @public
  */
 export type IconStyle = 'default' | 'large';
-/** @internal */
+/**
+ * Base props shared across all `OverlayTooltip.SeriesItem` variants.
+ * @public
+ */
 export type BaseSeriesItemProps = {
+    /** Display name of the series. Pass an array to enable multi-line rendering. */
     name: Series['name'];
+    /** The formatted value to display. */
     value: Series['value'];
+    /** Optional unit label appended after the main value. */
     valueUnit?: string;
+    /** Optional relative value (e.g. a percentage) shown next to the main value. */
     relativeValue?: Series['relativeValue'];
+    /** Optional unit label appended after the relative value. */
     relativeValueUnit?: string;
+    /** Enables multi-line wrapping for the series name. */
     multiLine?: boolean;
+    /** Maximum number of lines to display before truncating the series name. */
     maxLines?: number;
+    /** Controls the visual size of the series icon. */
     iconStyle?: IconStyle;
 } & TooltipTruncationOptions;
-/** @internal */
+/**
+ * Optional actions rendered inside a series item row.
+ * @public
+ */
 export type SeriesItemActions = {
+    /** Factory function returning the actions to render for this series entry. */
     actions?: () => SeriesActionsTemplate;
 };
-/** @internal */
+/**
+ * Props for a series item rendered with a colored geometric shape symbol.
+ * @public
+ */
 export type ShapeSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    /** Fill color for the shape symbol. */
     color: string;
+    /** Shape variant to use. Defaults to a filled circle. */
     shape?: VariantShape;
     symbol?: never;
     icon?: never;
 };
-/** @internal */
+/**
+ * Props for a series item rendered with a custom SVG path symbol string.
+ * @public
+ */
 export type SymbolSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    /** SVG path string used as the series symbol. */
     symbol: string;
     color?: never;
     shape?: never;
     icon?: never;
 };
-/** @internal */
+/**
+ * Props for a series item rendered with a custom JSX icon element.
+ * @public
+ */
 export type IconSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
+    /** JSX element used as the series icon. */
     icon: JSX.Element;
     color?: never;
     shape?: never;
@@ -58,7 +116,7 @@ export type IconSeriesItemProps = BaseSeriesItemProps & SeriesItemActions & {
 /**
  * Public union — enforces mutual exclusivity at the call site via `never`.
  * Consumers must pass exactly one of: color, symbol, or icon.
- * @internal
+ * @public
  */
 export type SeriesItemProps = ShapeSeriesItemProps | SymbolSeriesItemProps | IconSeriesItemProps;
 export type InternalSeriesItemProps = Omit<BaseSeriesItemProps, 'multiLine' | 'maxLines '> & {

package/charts/core/components/overlay-tooltip/types.d.ts

@@ -1,8 +1,8 @@
 import type { JSX, ReactNode, RefObject } from 'react';
 import type { MessageDescriptor } from 'react-intl';
 import type { Store } from '../../../../core/store/store.js';
+import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
 import type { SeriesActionsTemplate } from '../../types/series-actions-template.js';
-import { TruncationMode } from '../text-ellipsis/ChartTextEllipsis.js';
 /** @internal */
 export declare const enum GeometryTypesEnum {
     'dot' = "dot",
@@ -56,11 +56,25 @@ export type TooltipState = {
 } & Positions;
 /**  @internal  */
 export type TooltipStore = Store<TooltipState>;
-/**  @internal  */
+/**
+ * A primitive value that can appear in a tooltip header or series row.
+ * @public
+ */
 export type TooltipValue = string | number | Date | undefined;
-/** @internal */
+/**
+ * The display name for a data series.
+ * Pass a `string[]` to enable multi-line rendering.
+ * @public
+ */
 export type SeriesName = string | string[];
-/** @internal */
+/**
+ * The value(s) displayed in a tooltip header row.
+ * - `TooltipValue` — single value.
+ * - `[TooltipValue]` — single value as a tuple.
+ * - `[TooltipValue, TooltipValue]` — a from/to range pair.
+ * - `[]` — explicitly empty (no header value).
+ * @public
+ */
 export type HeaderData = [] | [TooltipValue] | [TooltipValue, TooltipValue] | TooltipValue;
 /**  @internal  */
 export type Geometry = GeometryTypesEnum;
@@ -109,6 +123,7 @@ export type DefaultConfigByGeometry = Record<Geometry, DefaultConfig>;
 export type GeoLayerTypes = 'bubble' | 'choropleth' | 'connection' | 'dot';
 /** @internal */
 export type DefaultConfigByGeoLayer = Record<GeoLayerTypes, DefaultConfig>;
+/** @internal */
 export type ExternalConfig = {
     seriesHeader: JSX.Element | null;
     displayHeaderDivider: boolean;
@@ -119,6 +134,7 @@ export type ExternalConfig = {
 };
 /** @internal */
 export type OverlayTooltipBaseProps = {
+    /** Overrides the horizontal alignment of series symbols. */
     symbolAlignment?: 'left' | 'right';
     legacyTemplate?: ReactNode;
     /**
@@ -144,14 +160,21 @@ export type OverlayTooltipControlledProps = OverlayTooltipBaseProps & {
 };
 /** @internal */
 export type OverlayTooltipProps = OverlayTooltipUncontrolledProps | OverlayTooltipControlledProps;
-/** @internal */
+/**
+ * Props for `OverlayTooltip.Header`, which renders the primary header text row.
+ * @public
+ */
 export type HeaderProps = {
     /** The header text to display. */
     text?: string;
     /** Maximum width in pixels before truncation. If not provided, uses container width. */
     maxWidth?: number;
 };
-/**  @internal  */
+/**
+ * Props for `OverlayTooltip.SeriesHeader`, which renders the column label row
+ * above the series entries.
+ * @public
+ */
 export type SeriesHeaderProps = {
     /** The series label text. */
     seriesLabel?: string;

package/charts/core/components/overlay-tooltip/useTooltipReducer.js

@@ -50,12 +50,14 @@ const useTooltipReducer = () => {
           store.setState((prevState) => {
             prevState.inBounds || overlay.clear();
             const { relativeX, relativeY, pinned, data } = action.payload;
+            const activeSeries = pinned ? prevState.activeSeries : null;
             if ((0, import_lodash_es.isNil)(relativeX) || (0, import_lodash_es.isNil)(relativeY)) {
               return {
                 ...prevState,
                 inBounds: true,
                 pinned,
-                data
+                data,
+                activeSeries
               };
             }
             const positions = overlay.getAdjustedPositionsFromRelative(
@@ -67,6 +69,7 @@ const useTooltipReducer = () => {
               pinned: action.payload.pinned,
               inBounds: true,
               data,
+              activeSeries,
               ...positions
             };
           });

package/charts/core/components/overlay-tooltip/utils/build-content.js

@@ -104,7 +104,7 @@ function buildContent(children, defaultConfig, args) {
     ],
     config: {
       seriesHeader: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}),
-      displayHeaderDivider: !!(slots.Header && (slots.Series || slots.SeriesItem)),
+      displayHeaderDivider: !!(slots.Header && (slots.Series || slots.SeriesItem || slots.GlobalActions)),
       symbolPosition: args.userSymbolPosition || defaultConfig?.symbolPosition || "left",
       truncationMode: getTruncationMode(
         args.userTruncationMode,

package/charts/core/components/overlay-tooltip/utils/text-truncation-header.d.ts

@@ -1,4 +1,4 @@
-import { type TruncationMode } from '../../text-ellipsis/ChartTextEllipsis.js';
+import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
 /**
  * Truncates text using the header font weight (500) map.
  * Used by Header and SeriesHeader components.

package/charts/core/components/overlays/ChartOverlaysBorder.css

@@ -1,4 +1,4 @@
-._sw8x1w0-3-4-0 {
+._sw8x1w0-3-5-0 {
   position: absolute;
   top: -0.5px;
   left: -0.5px;
@@ -10,15 +10,15 @@
   border-bottom: none;
   box-sizing: border-box;
 }
-._sw8x1w1-3-4-0 {
+._sw8x1w1-3-5-0 {
   border-left: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w2-3-4-0 {
+._sw8x1w2-3-5-0 {
   border-right: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w3-3-4-0 {
+._sw8x1w3-3-5-0 {
   border-bottom: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w4-3-4-0 {
+._sw8x1w4-3-5-0 {
   border-top: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/charts/core/components/overlays/ChartOverlaysBorder.sty.js

@@ -25,8 +25,8 @@ __export(ChartOverlaysBorder_css_exports, {
 });
 module.exports = __toCommonJS(ChartOverlaysBorder_css_exports);
 var import_ChartOverlaysBorder_css_ts_vanilla = require("./ChartOverlaysBorder.css");
-var chartOverlaysBorder = "_sw8x1w0-3-4-0";
-var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-4-0";
-var chartOverlaysBorder__topAxis = "_sw8x1w4-3-4-0";
-var chartOverlaysBorder__xAxis = "_sw8x1w1-3-4-0";
-var chartOverlaysBorder__yAxis = "_sw8x1w3-3-4-0";
+var chartOverlaysBorder = "_sw8x1w0-3-5-0";
+var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-5-0";
+var chartOverlaysBorder__topAxis = "_sw8x1w4-3-5-0";
+var chartOverlaysBorder__xAxis = "_sw8x1w1-3-5-0";
+var chartOverlaysBorder__yAxis = "_sw8x1w3-3-5-0";

package/charts/core/components/selection-area/DynamicSelectionArea.js

@@ -22,7 +22,7 @@ __export(DynamicSelectionArea_exports, {
 module.exports = __toCommonJS(DynamicSelectionArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_SelectionArea = require("./SelectionArea.js");
-var import_useScrollResponsiveChartBounds = require("../../hooks/useScrollResponsiveChartBounds.js");
+var import_usePointerAndScrollResponsiveChartBounds = require("../../hooks/usePointerAndScrollResponsiveChartBounds.js");
 const DynamicSelectionArea = ({
   selection,
   chartRef,
@@ -38,7 +38,10 @@ const DynamicSelectionArea = ({
   topFormatter,
   hasMagnifiers
 }) => {
-  const chartBounds = (0, import_useScrollResponsiveChartBounds.useScrollResponsiveChartBounds)(chartRef, hasMagnifiers)();
+  const chartBounds = (0, import_usePointerAndScrollResponsiveChartBounds.usePointerAndScrollResponsiveChartBounds)(
+    chartRef,
+    hasMagnifiers
+  )();
   if (!chartBounds) {
     return null;
   }