@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltip.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  return showTooltip ? (\n    <CategoricalBarChartTooltipWrapper\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n      estimatedItemSize={estimatedItemSize}\n    >\n      <InteractiveChartTooltip.Header>\n        {hasHeader && (\n          <CategoricalTooltipHeader\n            name={safeGet(categoryMap, closestCategory).name}\n            item={headerItem}\n          />\n        )}\n      </InteractiveChartTooltip.Header>\n      {bodyItems && (\n        <InteractiveChartTooltip.Body>\n          {bodyItems.map((item, index) => () => {\n            const isBodyItem = item !== headerItem;\n            const isOpen = selectedItem === item.id;\n            return (\n              isBodyItem && (\n                <ChartActionsMenu\n                  key={`${item.id}`}\n                  isOpen={isOpen}\n                  actions={isOpen ? seriesActions(item) : undefined}\n                  defaultActions={getDefaultAction(item)}\n                  ref={actionsMenuRef}\n                  onActionClick={actionClickHandler}\n                >\n                  <SeriesBasedContent\n                    item={item}\n                    onMouseHover={() => updateSelectedItem(item.id)}\n                    showDivider={index !== bodyItems.length - 1}\n                    truncationMode={truncationMode}\n                    isScrolling={isScrolling}\n                  />\n                </ChartActionsMenu>\n              )\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </CategoricalBarChartTooltipWrapper>\n  ) : null;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useMemo } from 'react';\n\nimport {\n  getClosestCategory,\n  getSortedTooltipItems,\n} from './categorical-tooltip.js';\nimport { CategoricalBarChartTooltipWrapper } from './CategoricalBarChartTooltipWrapper.js';\nimport { ChartActionsMenu } from '../../../../core/components/series-action/ChartActionsMenu.js';\nimport { useChartActionsMenu } from '../../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { SeriesBasedContent } from '../../../../core/components/tooltip/InteractiveChartTooltip/contents/SeriesBasedContent.js';\nimport { CategoricalTooltipHeader } from '../../../../core/components/tooltip/InteractiveChartTooltip/headers/CategoricalTooltipHeader.js';\nimport { useSeriesBasedItemEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/hooks/useSeriesBasedItemEstimatedSize.js';\nimport { useTooltipSeriesActions } from '../../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { Formatter } from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { VARIANT_GROUPED } from '../../../constants.js';\nimport { useTooltipState } from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartTooltip } from '../../../hooks/useCategoricalBarChartTooltip.js';\nimport { useCategoricalBarFilteredData } from '../../../hooks/useCategoricalBarFilteredData.js';\nimport { useTruncationMode } from '../../../hooks/useTruncationMode.js';\nimport {\n  Dimension,\n  DimensionXYPoint,\n} from '../../../types/categorical-bar-chart-data.js';\nimport { useSeriesActionClickHandler } from '../hooks/useSeriesActionClickHandler.js';\n\ninterface CategoricalBarChartTooltipProps {\n  /** Closest point to the mouse position & the x and y position of the tooltip */\n  closestDimensionPoint?: DimensionXYPoint;\n  hasHeader: boolean;\n  formatter: Formatter;\n  unit?: ChartUnit;\n}\n\n/**\n * Tooltip specific to the CategoricalBarChart.\n */\nexport function CategoricalBarChartTooltip({\n  closestDimensionPoint,\n  hasHeader,\n  formatter,\n  unit,\n}: CategoricalBarChartTooltipProps) {\n  const { visibleTooltip } = useTooltipState();\n  const { variant } = useCategoricalBarChartTooltip();\n  const truncationMode = useTruncationMode();\n  const {\n    filteredCategories: categories,\n    dimensionMap,\n    categoryMap,\n  } = useCategoricalBarFilteredData();\n  const {\n    onLeave: handleMenuLeave,\n    onScroll: handleMenuScroll,\n    selectedItem,\n    updateSelectedItem,\n    actionsMenuRef,\n    isScrolling,\n  } = useChartActionsMenu();\n  const grouped = variant === VARIANT_GROUPED;\n  const closestCategory = useMemo(\n    () => getClosestCategory(categories, dimensionMap, closestDimensionPoint),\n    [categories, dimensionMap, closestDimensionPoint],\n  );\n  const { valueScale } = useCategoricalBarChartScales();\n  const sortedTooltipItems = useMemo(\n    () =>\n      getSortedTooltipItems(\n        dimensionMap,\n        closestDimensionPoint,\n        grouped,\n        closestCategory,\n        formatter,\n        valueScale,\n        unit,\n      ),\n    [\n      dimensionMap,\n      closestDimensionPoint,\n      grouped,\n      closestCategory,\n      formatter,\n      valueScale,\n      unit,\n    ],\n  );\n\n  const actionClickHandler = useSeriesActionClickHandler(\n    sortedTooltipItems.length > 1,\n  );\n\n  const seriesActions = useTooltipSeriesActions<Dimension>(\n    closestCategory?.dimensions,\n    (dimension) => safeGet(dimensionMap, dimension).id,\n  );\n\n  const estimatedItemSize = useSeriesBasedItemEstimatedSize(\n    sortedTooltipItems,\n    'single-line',\n  );\n\n  const showTooltip = sortedTooltipItems.length && visibleTooltip;\n\n  const headerItem = hasHeader\n    ? closestDimensionPoint &&\n      sortedTooltipItems.find(\n        (item) => item.id === closestDimensionPoint.datapoint.id,\n      )\n    : undefined;\n\n  const bodyItems = headerItem\n    ? sortedTooltipItems.filter((item) => item !== headerItem)\n    : sortedTooltipItems;\n\n  return showTooltip ? (\n    <CategoricalBarChartTooltipWrapper\n      onMouseLeave={handleMenuLeave}\n      onScrollContent={handleMenuScroll}\n      estimatedItemSize={estimatedItemSize}\n    >\n      <InteractiveChartTooltip.Header>\n        {hasHeader && (\n          <CategoricalTooltipHeader\n            name={safeGet(categoryMap, closestCategory).name}\n            item={headerItem}\n          />\n        )}\n      </InteractiveChartTooltip.Header>\n      {bodyItems && (\n        <InteractiveChartTooltip.Body>\n          {bodyItems.map((item, index) => () => {\n            const isBodyItem = item !== headerItem;\n            const isOpen = selectedItem === item.id;\n            return (\n              isBodyItem && (\n                <ChartActionsMenu\n                  key={`${item.id}`}\n                  isOpen={isOpen}\n                  actions={isOpen ? seriesActions(item) : undefined}\n                  defaultActions={getDefaultAction(item)}\n                  ref={actionsMenuRef}\n                  onActionClick={actionClickHandler}\n                >\n                  <SeriesBasedContent\n                    item={item}\n                    onMouseHover={() => updateSelectedItem(item.id)}\n                    showDivider={index !== bodyItems.length - 1}\n                    truncationMode={truncationMode}\n                    isScrolling={isScrolling}\n                  />\n                </ChartActionsMenu>\n              )\n            );\n          })}\n        </InteractiveChartTooltip.Body>\n      )}\n    </CategoricalBarChartTooltipWrapper>\n  ) : null;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltipWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/tooltip/CategoricalBarChartTooltipWrapper.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport {\n  type PropsWithChildren,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { VirtualEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/types/virtual-estimated-size.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport {\n  useMousePositionState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\n\ninterface CategoricalBarChartTooltipWrapperProps {\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n  estimatedItemSize: VirtualEstimatedSize;\n}\n\nconst ADJUSTED_LAYOUT_OFFSET = { x: -10, y: 30 };\n\nexport const CategoricalBarChartTooltipWrapper = ({\n  onMouseLeave,\n  onScrollContent,\n  estimatedItemSize,\n  children,\n}: PropsWithChildren<CategoricalBarChartTooltipWrapperProps>) => {\n  const { pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinnedTooltip)();\n\n  if (isUndefined(mousePosition?.absolute)) {\n    return null;\n  }\n\n  const adjustedPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    mousePosition,\n    ADJUSTED_LAYOUT_OFFSET,\n  );\n\n  if (!adjustedPosition) {\n    return null;\n  }\n\n  return (\n    <InteractiveChartTooltip\n      position={adjustedPosition}\n      pinned={pinnedTooltip}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  );\n};\n"],
-  "mappings": "AAkDI;AAlDJ,SAAS,mBAAmB;AAM5B,SAAS,+BAA+B;AAExC,SAAS,sCAAsC;AAC/C,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AAQjD,MAAM,yBAAyB,EAAE,GAAG,KAAK,GAAG,GAAG;AAExC,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiE;AAC/D,QAAM,EAAE,cAAc,IAAI,gBAAgB;AAC1C,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,WAAW,iCAAiC;AAClD,QAAM,SAAS,+BAA+B,UAAU,aAAa,EAAE;AAEvE,MAAI,YAAY,eAAe,QAAQ,GAAG;AACxC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { isUndefined } from 'lodash-es';\nimport {\n  type PropsWithChildren,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { InteractiveChartTooltip } from '../../../../core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.js';\nimport { VirtualEstimatedSize } from '../../../../core/components/tooltip/InteractiveChartTooltip/types/virtual-estimated-size.js';\nimport { useScrollResponsiveChartBounds } from '../../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { calculateAdjustedTooltipPosition } from '../../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport {\n  useMousePositionState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\n\ninterface CategoricalBarChartTooltipWrapperProps {\n  onMouseLeave: (event?: ReactMouseEvent) => void;\n  onScrollContent: (event?: Event) => void;\n  estimatedItemSize: VirtualEstimatedSize;\n}\n\nconst ADJUSTED_LAYOUT_OFFSET = { x: -10, y: 30 };\n\nexport const CategoricalBarChartTooltipWrapper = ({\n  onMouseLeave,\n  onScrollContent,\n  estimatedItemSize,\n  children,\n}: PropsWithChildren<CategoricalBarChartTooltipWrapperProps>) => {\n  const { pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const bounds = useScrollResponsiveChartBounds(chartRef, pinnedTooltip)();\n\n  if (isUndefined(mousePosition?.absolute)) {\n    return null;\n  }\n\n  const adjustedPosition = calculateAdjustedTooltipPosition(\n    bounds,\n    mousePosition,\n    ADJUSTED_LAYOUT_OFFSET,\n  );\n\n  if (!adjustedPosition) {\n    return null;\n  }\n\n  return (\n    <InteractiveChartTooltip\n      position={adjustedPosition}\n      pinned={pinnedTooltip}\n      itemSize={estimatedItemSize}\n      updatePositionWhenPinned={true}\n      onMouseLeave={onMouseLeave}\n      onScrollContent={onScrollContent}\n    >\n      {children}\n    </InteractiveChartTooltip>\n  );\n};\n"],
+  "mappings": "AAmDI;AAlDJ,SAAS,mBAAmB;AAM5B,SAAS,+BAA+B;AAExC,SAAS,sCAAsC;AAC/C,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AAQjD,MAAM,yBAAyB,EAAE,GAAG,KAAK,GAAG,GAAG;AAExC,MAAM,oCAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiE;AAC/D,QAAM,EAAE,cAAc,IAAI,gBAAgB;AAC1C,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,WAAW,iCAAiC;AAClD,QAAM,SAAS,+BAA+B,UAAU,aAAa,EAAE;AAEvE,MAAI,YAAY,eAAe,QAAQ,GAAG;AACxC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-5-2 {
+._145zb630-3-7-0 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-5-2";
+var wrapper = "_145zb630-3-7-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-5-2';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useOverlay } from "../../overlay-tooltip/contexts/OverlayContext.js";
 import { AnnotationsAtom } from "../AnnotationsAtom.js";
 import { useAnnotationsSelectionState } from "../hooks/store/selectors.js";
 import { useGroupedAnnotationsData } from "../hooks/useGroupedAnnotationsData.js";
@@ -17,12 +18,12 @@ const AnnotationsRenderer = (props) => {
     showLabels,
     tracks,
     textOverflow,
-    truncateMode,
-    annotationsContainerRef
+    truncateMode
   } = props;
+  const overlay = useOverlay();
   const groupedData = useGroupedAnnotationsData(tracks, scale.domain());
   const selection = useAnnotationsSelectionState();
-  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } = useMarkerEventHandlers(annotationsContainerRef);
+  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } = useMarkerEventHandlers(overlay.overlayRef);
   return /* @__PURE__ */ jsx(
     AnnotationsAtom,
     {
@@ -30,14 +31,16 @@ const AnnotationsRenderer = (props) => {
       labelsWidth: labelsOffset,
       showLabels,
       children: groupedData.map((track, trackNumber) => {
-        const currentTrack = Array.from(track.markers.entries());
+        const currentTrack = Array.from(track.markers.entries()).sort(
+          ([, a], [, b]) => Math.max(...a.map((g) => g.priority)) - Math.max(...b.map((g) => g.priority))
+        );
         return /* @__PURE__ */ jsx(
           TrackAtom,
           {
             label: track.label,
             hidden: track.hidden,
             children: currentTrack.map(([groupId, annotationsGroup]) => {
-              return [...annotationsGroup].sort((a, b) => a.priority - b.priority).map(({ key: markerId, markers }) => {
+              return annotationsGroup.toSorted((a, b) => a.priority - b.priority).map(({ key: markerId, markers }) => {
                 const [marker] = markers;
                 const color = defineMarkerColor(markers);
                 const state = defineMarkerBrightnessState(

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/components/AnnotationsRenderer.tsx"],
-  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\nimport type { RefObject } from 'react';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColor } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  annotationsContainerRef?: RefObject<HTMLDivElement>;\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n    annotationsContainerRef,\n  } = props;\n  const groupedData = useGroupedAnnotationsData(tracks, scale.domain());\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(annotationsContainerRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const currentTrack = Array.from(track.markers.entries());\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return [...annotationsGroup] // this is needed because sort method mutates the original array, and affects the order of the tooltip items\n                .sort((a, b) => a.priority - b.priority)\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const color = defineMarkerColor(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = defineMarkerContent(markers);\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
-  "mappings": "AAuFoB;AA9EpB,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAiB7B,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,0BAA0B,QAAQ,MAAM,OAAO,CAAC;AAEpE,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,uBAAuB;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC;AAEvD,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,CAAC,GAAG,gBAAgB,EACxB,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,EACtC,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,QAAQ,kBAAkB,OAAO;AAEvC,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAAoB,OAAO;AAEjD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAfK;AAAA,gBAgBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UAxCI;AAAA,QAyCP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
+  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useOverlay } from '../../overlay-tooltip/contexts/OverlayContext.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColor } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n  } = props;\n  const overlay = useOverlay();\n  const groupedData = useGroupedAnnotationsData(tracks, scale.domain());\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(overlay.overlayRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const currentTrack = Array.from(track.markers.entries()).sort(\n          ([, a], [, b]) =>\n            Math.max(...a.map((g) => g.priority)) -\n            Math.max(...b.map((g) => g.priority)),\n        );\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return annotationsGroup\n                .toSorted((a, b) => a.priority - b.priority)\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const color = defineMarkerColor(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = defineMarkerContent(markers);\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
+  "mappings": "AA0FoB;AAlFpB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAgB7B,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,WAAW;AAC3B,QAAM,cAAc,0BAA0B,QAAQ,MAAM,OAAO,CAAC;AAEpE,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,QAAQ,UAAU;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,UACvD,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,MACV,KAAK,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,IACpC,KAAK,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,QACxC;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,iBACJ,SAAS,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,EAC1C,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,QAAQ,kBAAkB,OAAO;AAEvC,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAAoB,OAAO;AAEjD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAfK;AAAA,gBAgBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UAxCI;AAAA,QAyCP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
   "names": ["width"]
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-5-2 {
+._1yc349j0-3-7-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-5-2";
+var canvasContainer = "_1yc349j0-3-7-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-5-2';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/AnnotationsLabelRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/AnnotationsLabelRenderer.tsx"],
-  "sourcesContent": ["import { Point } from '@visx/brush/lib/types';\nimport { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\n\ninterface AnnotationsLabelRendererProps extends Point {\n  text: string;\n  maxWidth?: number;\n  textAlign?: CanvasTextAlign;\n  ellipsis?: boolean;\n}\n\nconst getLabelFont = () => {\n  const fontSize = getTokenComputedStyle(Typography.Text.Small.Default.Size);\n  const fontFamily = getTokenComputedStyle(\n    Typography.Text.Small.Default.Family,\n  );\n\n  const fontWeight = getTokenComputedStyle(\n    Typography.Text.Small.Default.Weight,\n  );\n\n  return [fontWeight, fontSize, fontFamily];\n};\n\nexport const AnnotationsLabelRenderer = (\n  props: AnnotationsLabelRendererProps,\n) => {\n  const {\n    text: originalText,\n    x,\n    y,\n    maxWidth,\n    textAlign = 'right',\n    ellipsis,\n  } = props;\n\n  const color = getTokenComputedStyle(Colors.Text.Neutral.Subdued);\n\n  const [fontWeight, fontSize, fontFamily] = getLabelFont();\n\n  const font = [fontWeight, fontSize, fontFamily].join(' ');\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.font = font;\n\n      const textWidth = calculateWidth(\n        originalText,\n        charsFontWidth12pixelsSize400Map,\n      );\n      const applyEllipsis = ellipsis && maxWidth && textWidth > maxWidth;\n      const textToRender = applyEllipsis\n        ? truncateString(\n            originalText,\n            maxWidth,\n            charsFontWidth12pixelsSize400Map,\n            'end',\n          )\n        : originalText;\n      ctx.textAlign = textAlign;\n      ctx.fillStyle = color;\n      ctx.textBaseline = 'middle';\n\n      ctx.fillText(textToRender, x, y, maxWidth);\n\n      return false;\n    },\n    [originalText, x, y, maxWidth],\n  );\n\n  useCanvas('annotations-label', draw);\n\n  return null;\n};\n\nAnnotationsLabelRenderer['displayName'] = 'AnnotationsLabelRenderer';\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAEvB,SAAS,6BAA6B;AACtC,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AASP,MAAM,eAAe,MAAM;AACzB,QAAM,WAAW,sBAAsB,WAAW,KAAK,MAAM,QAAQ,IAAI;AACzE,QAAM,aAAa;AAAA,IACjB,WAAW,KAAK,MAAM,QAAQ;AAAA,EAChC;AAEA,QAAM,aAAa;AAAA,IACjB,WAAW,KAAK,MAAM,QAAQ;AAAA,EAChC;AAEA,SAAO,CAAC,YAAY,UAAU,UAAU;AAC1C;AAEO,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,sBAAsB,OAAO,KAAK,QAAQ,OAAO;AAE/D,QAAM,CAAC,YAAY,UAAU,UAAU,IAAI,aAAa;AAExD,QAAM,OAAO,CAAC,YAAY,UAAU,UAAU,EAAE,KAAK,GAAG;AAExD,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,OAAO;AAEX,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,MACF;AACA,YAAM,gBAAgB,YAAY,YAAY,YAAY;AAC1D,YAAM,eAAe,gBACjB;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IACA;AACJ,UAAI,YAAY;AAChB,UAAI,YAAY;AAChB,UAAI,eAAe;AAEnB,UAAI,SAAS,cAAc,GAAG,GAAG,QAAQ;AAEzC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,cAAc,GAAG,GAAG,QAAQ;AAAA,EAC/B;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport { Point } from '../../../../../types/point.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\n\ninterface AnnotationsLabelRendererProps extends Point {\n  text: string;\n  maxWidth?: number;\n  textAlign?: CanvasTextAlign;\n  ellipsis?: boolean;\n}\n\nconst getLabelFont = () => {\n  const fontSize = getTokenComputedStyle(Typography.Text.Small.Default.Size);\n  const fontFamily = getTokenComputedStyle(\n    Typography.Text.Small.Default.Family,\n  );\n\n  const fontWeight = getTokenComputedStyle(\n    Typography.Text.Small.Default.Weight,\n  );\n\n  return [fontWeight, fontSize, fontFamily];\n};\n\nexport const AnnotationsLabelRenderer = (\n  props: AnnotationsLabelRendererProps,\n) => {\n  const {\n    text: originalText,\n    x,\n    y,\n    maxWidth,\n    textAlign = 'right',\n    ellipsis,\n  } = props;\n\n  const color = getTokenComputedStyle(Colors.Text.Neutral.Subdued);\n\n  const [fontWeight, fontSize, fontFamily] = getLabelFont();\n\n  const font = [fontWeight, fontSize, fontFamily].join(' ');\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.font = font;\n\n      const textWidth = calculateWidth(\n        originalText,\n        charsFontWidth12pixelsSize400Map,\n      );\n      const applyEllipsis = ellipsis && maxWidth && textWidth > maxWidth;\n      const textToRender = applyEllipsis\n        ? truncateString(\n            originalText,\n            maxWidth,\n            charsFontWidth12pixelsSize400Map,\n            'end',\n          )\n        : originalText;\n      ctx.textAlign = textAlign;\n      ctx.fillStyle = color;\n      ctx.textBaseline = 'middle';\n\n      ctx.fillText(textToRender, x, y, maxWidth);\n\n      return false;\n    },\n    [originalText, x, y, maxWidth],\n  );\n\n  useCanvas('annotations-label', draw);\n\n  return null;\n};\n\nAnnotationsLabelRenderer['displayName'] = 'AnnotationsLabelRenderer';\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAGvB,SAAS,6BAA6B;AACtC,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AASP,MAAM,eAAe,MAAM;AACzB,QAAM,WAAW,sBAAsB,WAAW,KAAK,MAAM,QAAQ,IAAI;AACzE,QAAM,aAAa;AAAA,IACjB,WAAW,KAAK,MAAM,QAAQ;AAAA,EAChC;AAEA,QAAM,aAAa;AAAA,IACjB,WAAW,KAAK,MAAM,QAAQ;AAAA,EAChC;AAEA,SAAO,CAAC,YAAY,UAAU,UAAU;AAC1C;AAEO,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,sBAAsB,OAAO,KAAK,QAAQ,OAAO;AAE/D,QAAM,CAAC,YAAY,UAAU,UAAU,IAAI,aAAa;AAExD,QAAM,OAAO,CAAC,YAAY,UAAU,UAAU,EAAE,KAAK,GAAG;AAExD,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,OAAO;AAEX,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,MACF;AACA,YAAM,gBAAgB,YAAY,YAAY,YAAY;AAC1D,YAAM,eAAe,gBACjB;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IACA;AACJ,UAAI,YAAY;AAChB,UAAI,YAAY;AAChB,UAAI,eAAe;AAEnB,UAAI,SAAS,cAAc,GAAG,GAAG,QAAQ;AAEzC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,cAAc,GAAG,GAAG,QAAQ;AAAA,EAC/B;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/AnnotationsLineRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/AnnotationsLineRenderer.tsx"],
-  "sourcesContent": ["import { Point } from '@visx/brush/lib/types';\nimport { useCallback } from 'react';\n\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport {\n  TRACK_SEPARATOR_COLOR,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\n\ninterface AnnotationsLineRendererProps {\n  source: Point;\n  destination: Point;\n  strokeColor: string;\n}\n\nexport const AnnotationsLineRenderer = (\n  props: AnnotationsLineRendererProps,\n) => {\n  const {\n    source,\n    destination,\n    strokeColor = getTokenComputedStyle(TRACK_SEPARATOR_COLOR),\n  } = props;\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      ctx.moveTo(\n        source.x - CANVAS_PIXEL_OFFSET,\n        source.y - CANVAS_PIXEL_OFFSET,\n      );\n      ctx.lineTo(\n        destination.x - CANVAS_PIXEL_OFFSET,\n        destination.y - CANVAS_PIXEL_OFFSET,\n      );\n      ctx.lineWidth = TRACK_SEPARATOR_STROKE_WIDTH;\n      ctx.strokeStyle = strokeColor;\n      ctx.stroke();\n      ctx.closePath();\n\n      return false;\n    },\n    [source, destination, strokeColor],\n  );\n\n  useCanvas('annotations-line', draw);\n\n  return null;\n};\n\nAnnotationsLineRenderer['displayName'] = 'AnnotationsLineRenderer';\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAQ7B,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc,sBAAsB,qBAAqB;AAAA,EAC3D,IAAI;AAEJ,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,UAAI;AAAA,QACF,OAAO,IAAI;AAAA,QACX,OAAO,IAAI;AAAA,MACb;AACA,UAAI;AAAA,QACF,YAAY,IAAI;AAAA,QAChB,YAAY,IAAI;AAAA,MAClB;AACA,UAAI,YAAY;AAChB,UAAI,cAAc;AAClB,UAAI,OAAO;AACX,UAAI,UAAU;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC,QAAQ,aAAa,WAAW;AAAA,EACnC;AAEA,YAAU,oBAAoB,IAAI;AAElC,SAAO;AACT;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { Point } from '../../../../../types/point.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport {\n  TRACK_SEPARATOR_COLOR,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\n\ninterface AnnotationsLineRendererProps {\n  source: Point;\n  destination: Point;\n  strokeColor: string;\n}\n\nexport const AnnotationsLineRenderer = (\n  props: AnnotationsLineRendererProps,\n) => {\n  const {\n    source,\n    destination,\n    strokeColor = getTokenComputedStyle(TRACK_SEPARATOR_COLOR),\n  } = props;\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      ctx.moveTo(\n        source.x - CANVAS_PIXEL_OFFSET,\n        source.y - CANVAS_PIXEL_OFFSET,\n      );\n      ctx.lineTo(\n        destination.x - CANVAS_PIXEL_OFFSET,\n        destination.y - CANVAS_PIXEL_OFFSET,\n      );\n      ctx.lineWidth = TRACK_SEPARATOR_STROKE_WIDTH;\n      ctx.strokeStyle = strokeColor;\n      ctx.stroke();\n      ctx.closePath();\n\n      return false;\n    },\n    [source, destination, strokeColor],\n  );\n\n  useCanvas('annotations-line', draw);\n\n  return null;\n};\n\nAnnotationsLineRenderer['displayName'] = 'AnnotationsLineRenderer';\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAQ7B,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc,sBAAsB,qBAAqB;AAAA,EAC3D,IAAI;AAEJ,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,UAAI;AAAA,QACF,OAAO,IAAI;AAAA,QACX,OAAO,IAAI;AAAA,MACb;AACA,UAAI;AAAA,QACF,YAAY,IAAI;AAAA,QAChB,YAAY,IAAI;AAAA,MAClB;AACA,UAAI,YAAY;AAChB,UAAI,cAAc;AAClB,UAAI,OAAO;AACX,UAAI,UAAU;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC,QAAQ,aAAa,WAAW;AAAA,EACnC;AAEA,YAAU,oBAAoB,IAAI;AAElC,SAAO;AACT;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/displays/AnnotationsContainer.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useOverlay } from "../../../overlay-tooltip/contexts/OverlayContext.js";
+const AnnotationsContainer = (props) => {
+  const { children, ...divProps } = props;
+  const overlay = useOverlay();
+  return /* @__PURE__ */ jsx("div", { ref: overlay.overlayRef, ...divProps, children });
+};
+AnnotationsContainer.displayName = "AnnotationsContainer";
+export {
+  AnnotationsContainer
+};
+//# sourceMappingURL=AnnotationsContainer.js.map

package/esm/charts/core/components/annotations/components/displays/AnnotationsContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/charts/core/components/annotations/components/displays/AnnotationsContainer.tsx"],
+  "sourcesContent": ["import type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { useOverlay } from '../../../overlay-tooltip/contexts/OverlayContext.js';\n\n/**\n * Wrapping container for the AnnotationsChart displays. Sits inside the\n * `OverlayProvider` so it can attach `overlay.overlayRef` declaratively to\n * the DOM node that defines the chart's bounds. This mirrors the pattern\n * used by other charts (PieChart, XYChart, MeterBarChart, etc.) and avoids\n * mutating the context-derived ref from a child component.\n *\n * @internal\n */\nexport const AnnotationsContainer = (\n  props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,\n) => {\n  const { children, ...divProps } = props;\n  const overlay = useOverlay();\n\n  return (\n    <div ref={overlay.overlayRef} {...divProps}>\n      {children}\n    </div>\n  );\n};\n\nAnnotationsContainer.displayName = 'AnnotationsContainer';\n"],
+  "mappings": "AAoBI;AAlBJ,SAAS,kBAAkB;AAWpB,MAAM,uBAAuB,CAClC,UACG;AACH,QAAM,EAAE,UAAU,GAAG,SAAS,IAAI;AAClC,QAAM,UAAU,WAAW;AAE3B,SACE,oBAAC,SAAI,KAAK,QAAQ,YAAa,GAAG,UAC/B,UACH;AAEJ;AAEA,qBAAqB,cAAc;",
+  "names": []
+}

package/esm/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { AnnotationsContainer } from "./AnnotationsContainer.js";
 import { useBehavioralTrackingProps } from "../../../../../../core/hooks/useBehavioralTrackingProps.js";
+import { OverlayProvider } from "../../../overlay-tooltip/contexts/OverlayContext.js";
+import { TooltipProvider } from "../../../overlay-tooltip/contexts/TooltipContext.js";
 import { AnnotationsProviders } from "../../providers/AnnotationsProviders.js";
 import { AnnotationsRenderer } from "../AnnotationsRenderer.js";
-import { AnnotationsTooltip } from "../tooltip/AnnotationsTooltip.js";
+import { AnnotationsOverlayTooltip } from "../tooltip/AnnotationsOverlayTooltip.js";
 import { AnnotationsTooltipFormatterContext } from "../tooltip/contexts/AnnotationsTooltipFormatter.context.js";
 const AnnotationsNumericalDisplay = (props) => {
   const {
@@ -15,39 +17,32 @@ const AnnotationsNumericalDisplay = (props) => {
     ...rendererProps
   } = props;
   const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
-  const AnnotationsContainerRef = useRef(null);
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(
+    AnnotationsContainer,
     {
-      ref: AnnotationsContainerRef,
       ...behaviorTrackingProps,
       "data-dt-component": dataDtComponent,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(TooltipProvider, { persistedStore: true, children: /* @__PURE__ */ jsx(
         AnnotationsProviders,
         {
           onAnnotationsMarkersInteraction: markerGroupHover,
           annotationsActions,
           tooltipConfig,
           children: /* @__PURE__ */ jsxs(AnnotationsTooltipFormatterContext.Provider, { value: formatter, children: [
+            /* @__PURE__ */ jsx(AnnotationsRenderer, { ...rendererProps }),
             /* @__PURE__ */ jsx(
-              AnnotationsRenderer,
-              {
-                ...rendererProps,
-                annotationsContainerRef: AnnotationsContainerRef
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              AnnotationsTooltip,
+              AnnotationsOverlayTooltip,
               {
                 tooltipType: "numerical",
-                annotationsContainerRef: AnnotationsContainerRef
+                truncationMode: rendererProps.truncateMode,
+                maxLines: rendererProps.maxLines
               }
             )
           ] })
         }
-      )
+      ) })
     }
-  );
+  ) });
 };
 AnnotationsNumericalDisplay["displayName"] = "AnnotationsNumericalDisplay";
 export {

package/esm/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.tsx"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { Formatter } from '../../../../types/formatter.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsTooltip } from '../tooltip/AnnotationsTooltip.js';\nimport { AnnotationsTooltipFormatterContext } from '../tooltip/contexts/AnnotationsTooltipFormatter.context.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\ntype AnnotationsNumericalDisplayProps = BehaviorTrackingProps & {\n  tracks: AnnotationsTrackConfig[];\n  scale: ScaleLinear<number, number> | ScaleSymLog<number, number>;\n  showLabels: boolean;\n  labelsOffset: number;\n  width: number;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  annotationsActions?: AnnotationsActionsHandler;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsNumericalDisplay = (\n  props: AnnotationsNumericalDisplayProps,\n) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    formatter,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const AnnotationsContainerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={AnnotationsContainerRef}\n      {...behaviorTrackingProps}\n      data-dt-component={dataDtComponent}\n    >\n      <AnnotationsProviders\n        onAnnotationsMarkersInteraction={markerGroupHover}\n        annotationsActions={annotationsActions}\n        tooltipConfig={tooltipConfig}\n      >\n        <AnnotationsTooltipFormatterContext.Provider value={formatter}>\n          <AnnotationsRenderer\n            {...rendererProps}\n            annotationsContainerRef={AnnotationsContainerRef}\n          />\n          <AnnotationsTooltip\n            tooltipType=\"numerical\"\n            annotationsContainerRef={AnnotationsContainerRef}\n          />\n        </AnnotationsTooltipFormatterContext.Provider>\n      </AnnotationsProviders>\n    </div>\n  );\n};\n\nAnnotationsNumericalDisplay['displayName'] = 'AnnotationsNumericalDisplay';\n"],
-  "mappings": "AAuEQ,SACE,KADF;AAtER,SAAS,cAAc;AAQvB,SAAS,kCAAkC;AAI3C,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;AAwB5C,MAAM,8BAA8B,CACzC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,QAAM,0BAA0B,OAAuB,IAAI;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,+BAAC,mCAAmC,UAAnC,EAA4C,OAAO,WAClD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,yBAAyB;AAAA;AAAA,YAC3B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,yBAAyB;AAAA;AAAA,YAC3B;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,4BAA4B,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { Formatter } from '../../../../types/formatter.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport { AnnotationsTooltipFormatterContext } from '../tooltip/contexts/AnnotationsTooltipFormatter.context.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\ntype AnnotationsNumericalDisplayProps = BehaviorTrackingProps & {\n  tracks: AnnotationsTrackConfig[];\n  scale: ScaleLinear<number, number> | ScaleSymLog<number, number>;\n  showLabels: boolean;\n  labelsOffset: number;\n  width: number;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  annotationsActions?: AnnotationsActionsHandler;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsNumericalDisplay = (\n  props: AnnotationsNumericalDisplayProps,\n) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    formatter,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsTooltipFormatterContext.Provider value={formatter}>\n              <AnnotationsRenderer {...rendererProps} />\n              <AnnotationsOverlayTooltip\n                tooltipType=\"numerical\"\n                truncationMode={rendererProps.truncateMode}\n                maxLines={rendererProps.maxLines}\n              />\n            </AnnotationsTooltipFormatterContext.Provider>\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\n\nAnnotationsNumericalDisplay['displayName'] = 'AnnotationsNumericalDisplay';\n"],
+  "mappings": "AAyEY,SACE,KADF;AAjEZ,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAI3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,0CAA0C;AAyB5C,MAAM,8BAA8B,CACzC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,+BAAC,mCAAmC,UAAnC,EAA4C,OAAO,WAClD;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA,aACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,4BAA4B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { AnnotationsContainer } from "./AnnotationsContainer.js";
 import { useBehavioralTrackingProps } from "../../../../../../core/hooks/useBehavioralTrackingProps.js";
+import { OverlayProvider } from "../../../overlay-tooltip/contexts/OverlayContext.js";
+import { TooltipProvider } from "../../../overlay-tooltip/contexts/TooltipContext.js";
 import { AnnotationsProviders } from "../../providers/AnnotationsProviders.js";
 import { AnnotationsRenderer } from "../AnnotationsRenderer.js";
-import { AnnotationsTooltip } from "../tooltip/AnnotationsTooltip.js";
+import { AnnotationsOverlayTooltip } from "../tooltip/AnnotationsOverlayTooltip.js";
 const AnnotationsTimeDisplay = (props) => {
   const {
     annotationsActions,
@@ -13,39 +15,32 @@ const AnnotationsTimeDisplay = (props) => {
     ...rendererProps
   } = props;
   const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
-  const AnnotationsContainerRef = useRef(null);
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(
+    AnnotationsContainer,
     {
-      ref: AnnotationsContainerRef,
       ...behaviorTrackingProps,
       "data-dt-component": dataDtComponent,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(TooltipProvider, { persistedStore: true, children: /* @__PURE__ */ jsxs(
         AnnotationsProviders,
         {
           onAnnotationsMarkersInteraction: markerGroupHover,
           annotationsActions,
           tooltipConfig,
           children: [
+            /* @__PURE__ */ jsx(AnnotationsRenderer, { ...rendererProps }),
             /* @__PURE__ */ jsx(
-              AnnotationsRenderer,
-              {
-                ...rendererProps,
-                annotationsContainerRef: AnnotationsContainerRef
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              AnnotationsTooltip,
+              AnnotationsOverlayTooltip,
               {
                 tooltipType: "time",
-                annotationsContainerRef: AnnotationsContainerRef
+                truncationMode: rendererProps.truncateMode,
+                maxLines: rendererProps.maxLines
               }
             )
           ]
         }
-      )
+      ) })
     }
-  );
+  ) });
 };
 AnnotationsTimeDisplay["displayName"] = "AnnotationsTimeDisplay";
 export {

package/esm/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.tsx"],
-  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsTooltip } from '../tooltip/AnnotationsTooltip.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\nexport type AnnotationsTimeDisplayProps = BehaviorTrackingProps & {\n  scale: ScaleTime<number, number>;\n  width: number;\n  tracks: AnnotationsTrackConfig[];\n  labelsOffset: number;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  showLabels: boolean;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsTimeDisplay = (props: AnnotationsTimeDisplayProps) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const AnnotationsContainerRef = useRef<HTMLDivElement>(null);\n  return (\n    <div\n      ref={AnnotationsContainerRef}\n      {...behaviorTrackingProps}\n      data-dt-component={dataDtComponent}\n    >\n      <AnnotationsProviders\n        onAnnotationsMarkersInteraction={markerGroupHover}\n        annotationsActions={annotationsActions}\n        tooltipConfig={tooltipConfig}\n      >\n        <AnnotationsRenderer\n          {...rendererProps}\n          annotationsContainerRef={AnnotationsContainerRef}\n        />\n        <AnnotationsTooltip\n          tooltipType=\"time\"\n          annotationsContainerRef={AnnotationsContainerRef}\n        />\n      </AnnotationsProviders>\n    </div>\n  );\n};\nAnnotationsTimeDisplay['displayName'] = 'AnnotationsTimeDisplay';\n"],
-  "mappings": "AAqDM,SAKE,KALF;AApDN,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAG3C,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAuB5B,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,QAAM,0BAA0B,OAAuB,IAAI;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,yBAAyB;AAAA;AAAA,YAC3B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,yBAAyB;AAAA;AAAA,YAC3B;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AACA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\nexport type AnnotationsTimeDisplayProps = BehaviorTrackingProps & {\n  scale: ScaleTime<number, number>;\n  width: number;\n  tracks: AnnotationsTrackConfig[];\n  labelsOffset: number;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  showLabels: boolean;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsTimeDisplay = (props: AnnotationsTimeDisplayProps) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsRenderer {...rendererProps} />\n            <AnnotationsOverlayTooltip\n              tooltipType=\"time\"\n              truncationMode={rendererProps.truncateMode}\n              maxLines={rendererProps.maxLines}\n            />\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\nAnnotationsTimeDisplay['displayName'] = 'AnnotationsTimeDisplay';\n"],
+  "mappings": "AAwDU,SAKE,KALF;AAtDV,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAG3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAwBnC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AACA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-5-2 {
+._107efci0-3-7-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-5-2";
+var annotationsOverlay = "_107efci0-3-7-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-5-2';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-5-2 {
+._uzgvu30-3-7-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-5-2";
+var scrollWrapper = "_uzgvu30-3-7-0";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-5-2';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsCustomizedTooltip.js

@@ -1,5 +1,6 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { prepareCustomTooltipData } from "./utils/prepare-custom-tooltip-data.js";
+import { annotationsGroupsScrollContainer } from "../../../overlay-tooltip/tooltip.sty.js";
 import { useAnnotationsSelectionState } from "../../hooks/store/selectors.js";
 const AnnotationsCustomizedTooltip = ({
   data,
@@ -7,7 +8,7 @@ const AnnotationsCustomizedTooltip = ({
 }) => {
   const { hoveredItem } = useAnnotationsSelectionState();
   const parsedData = prepareCustomTooltipData(data, hoveredItem ?? "");
-  return /* @__PURE__ */ jsx(Fragment, { children: tooltipTemplate(parsedData.hoveredMarkers, parsedData.closeMarkers) });
+  return /* @__PURE__ */ jsx("div", { className: annotationsGroupsScrollContainer, children: tooltipTemplate(parsedData.hoveredMarkers, parsedData.closeMarkers) });
 };
 AnnotationsCustomizedTooltip["displayName"] = "AnnotationsCustomizedTooltip";
 export {

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsCustomizedTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/tooltip/AnnotationsCustomizedTooltip.tsx"],
-  "sourcesContent": ["import { AnnotationsTooltipHandler } from './types/annotations-tooltip-props.js';\nimport { prepareCustomTooltipData } from './utils/prepare-custom-tooltip-data.js';\nimport { useAnnotationsSelectionState } from '../../hooks/store/selectors.js';\nimport { AnnotationsMarkerGroup } from '../../types/annotations.js';\n\ninterface AnnotationsCustomizedTooltipProps {\n  data: AnnotationsMarkerGroup[];\n  tooltipTemplate: AnnotationsTooltipHandler;\n}\n\nexport const AnnotationsCustomizedTooltip = ({\n  data,\n  tooltipTemplate,\n}: AnnotationsCustomizedTooltipProps) => {\n  const { hoveredItem } = useAnnotationsSelectionState();\n  const parsedData = prepareCustomTooltipData(data, hoveredItem ?? '');\n\n  return (\n    <>{tooltipTemplate(parsedData.hoveredMarkers, parsedData.closeMarkers)}</>\n  );\n};\n\nAnnotationsCustomizedTooltip['displayName'] = 'AnnotationsCustomizedTooltip';\n"],
-  "mappings": "AAkBI;AAjBJ,SAAS,gCAAgC;AACzC,SAAS,oCAAoC;AAQtC,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,aAAa,yBAAyB,MAAM,eAAe,EAAE;AAEnE,SACE,gCAAG,0BAAgB,WAAW,gBAAgB,WAAW,YAAY,GAAE;AAE3E;AAEA,6BAA6B,aAAa,IAAI;",
+  "sourcesContent": ["import { AnnotationsTooltipHandler } from './types/annotations-tooltip-props.js';\nimport { prepareCustomTooltipData } from './utils/prepare-custom-tooltip-data.js';\nimport { annotationsGroupsScrollContainer } from '../../../overlay-tooltip/tooltip.sty.js';\nimport { useAnnotationsSelectionState } from '../../hooks/store/selectors.js';\nimport { AnnotationsMarkerGroup } from '../../types/annotations.js';\n\ninterface AnnotationsCustomizedTooltipProps {\n  data: AnnotationsMarkerGroup[];\n  tooltipTemplate: AnnotationsTooltipHandler;\n}\n\nexport const AnnotationsCustomizedTooltip = ({\n  data,\n  tooltipTemplate,\n}: AnnotationsCustomizedTooltipProps) => {\n  const { hoveredItem } = useAnnotationsSelectionState();\n  const parsedData = prepareCustomTooltipData(data, hoveredItem ?? '');\n\n  return (\n    <div className={annotationsGroupsScrollContainer}>\n      {tooltipTemplate(parsedData.hoveredMarkers, parsedData.closeMarkers)}\n    </div>\n  );\n};\n\nAnnotationsCustomizedTooltip['displayName'] = 'AnnotationsCustomizedTooltip';\n"],
+  "mappings": "AAmBI;AAlBJ,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAQtC,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,aAAa,yBAAyB,MAAM,eAAe,EAAE;AAEnE,SACE,oBAAC,SAAI,WAAW,kCACb,0BAAgB,WAAW,gBAAgB,WAAW,YAAY,GACrE;AAEJ;AAEA,6BAA6B,aAAa,IAAI;",
   "names": []
 }