@dynatrace/strato-components 3.7.1 → 3.9.0

package/charts/core/components/annotations/components/canvas/displays/AnnotationsChartDisplay.js

@@ -21,21 +21,27 @@ __export(AnnotationsChartDisplay_exports, {
 });
 module.exports = __toCommonJS(AnnotationsChartDisplay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_AnnotationsTrackDisplay = require("./AnnotationsTrackDisplay.js");
+var import_AnnotationsConfig_context = require("../../../contexts/AnnotationsConfig.context.js");
 var import_useMarkersByTrack = require("../../../hooks/useMarkersByTrack.js");
 const AnnotationsChartDisplay = () => {
   const tracksWithMarkers = (0, import_useMarkersByTrack.useMarkersByTrack)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tracksWithMarkers.map(({ markers, hidden, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_AnnotationsTrackDisplay.AnnotationsTrackDisplay,
-    {
-      trackIndex: i,
-      drawTopLine: i === 0,
-      markers,
-      label,
-      hidden,
-      emphasizeBottomLine: i === tracksWithMarkers.length - 1
-    },
-    i
-  )) });
+  const { outerBottomLine } = (0, import_react.useContext)(import_AnnotationsConfig_context.AnnotationsConfigContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tracksWithMarkers.map(({ markers, hidden, label }, i) => {
+    const isLastTrack = i === tracksWithMarkers.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_AnnotationsTrackDisplay.AnnotationsTrackDisplay,
+      {
+        trackIndex: i,
+        drawTopLine: i === 0 && tracksWithMarkers.length > 1,
+        drawBottomLine: !isLastTrack || !!outerBottomLine,
+        markers,
+        label,
+        hidden
+      },
+      i
+    );
+  }) });
 };
 AnnotationsChartDisplay["displayName"] = "AnnotationsChartDisplay";

package/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.js

@@ -52,7 +52,8 @@ const AnnotationsMarkersDisplay = ({
       width: widthProp,
       x,
       textOverflow,
-      truncateMode
+      truncateMode,
+      symbolColor
     } = props;
     const isRange = widthProp > 0;
     const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;
@@ -92,6 +93,7 @@ const AnnotationsMarkersDisplay = ({
       strokeColor: (0, import_getTokenComputedStyle.getTokenComputedStyle)(import_constants.MARKER_STROKE_COLOR),
       opacity,
       brightness,
+      symbolColor: symbolColor ? (0, import_getTokenComputedStyle.getTokenComputedStyle)(symbolColor) : void 0,
       children: sanitizedContent
     };
     return isRange ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [

package/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.d.ts

@@ -3,8 +3,8 @@ import { TrackAtomProps } from '../../../types/track.js';
 interface AnnotationsTrackDisplayProps extends TrackAtomProps {
     trackIndex: number;
     drawTopLine?: boolean;
+    drawBottomLine?: boolean;
     markers: MarkerAtomProps[];
-    emphasizeBottomLine?: boolean;
 }
 export declare const AnnotationsTrackDisplay: {
     (props: AnnotationsTrackDisplayProps): import("react/jsx-runtime").JSX.Element;

package/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.js

@@ -32,14 +32,19 @@ var import_AnnotationsLabelRenderer = require("../renderers/AnnotationsLabelRend
 var import_AnnotationsLineRenderer = require("../renderers/AnnotationsLineRenderer.js");
 const getLabelYPosition = (index) => (0, import_get_track_separator_offset.getTrackSeparatorOffset)(index) + import_constants.LABEL_OFFSET;
 const AnnotationsTrackDisplay = (props) => {
-  const { drawTopLine, label, markers, trackIndex, emphasizeBottomLine } = props;
+  const {
+    drawTopLine,
+    drawBottomLine = true,
+    label,
+    markers,
+    trackIndex
+  } = props;
   const { labelsWidth, trackWidth, showLabels } = (0, import_react.useContext)(
     import_AnnotationsConfig_context.AnnotationsConfigContext
   );
   const trackFinalXPosition = labelsWidth + trackWidth;
   const topLineY = (0, import_get_track_separator_offset.getTrackSeparatorOffset)(trackIndex);
   const bottomLineY = (0, import_get_track_separator_offset.getTrackSeparatorOffset)(trackIndex + 1);
-  const bottomLineColor = emphasizeBottomLine ? import_constants.EMPHASIZED_TRACK_SEPARATOR_COLOR : import_constants.TRACK_SEPARATOR_COLOR;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     drawTopLine && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_AnnotationsLineRenderer.AnnotationsLineRenderer,
@@ -70,7 +75,7 @@ const AnnotationsTrackDisplay = (props) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AnnotationsMarkersDisplay.AnnotationsMarkersDisplay, { markers })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      drawBottomLine && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_AnnotationsLineRenderer.AnnotationsLineRenderer,
         {
           source: { x: labelsWidth, y: bottomLineY },
@@ -78,7 +83,7 @@ const AnnotationsTrackDisplay = (props) => {
             x: trackFinalXPosition,
             y: bottomLineY
           },
-          strokeColor: (0, import_getTokenComputedStyle.getTokenComputedStyle)(bottomLineColor)
+          strokeColor: (0, import_getTokenComputedStyle.getTokenComputedStyle)(import_constants.TRACK_SEPARATOR_COLOR)
         }
       )
     ] })

package/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js

@@ -42,7 +42,8 @@ const RangeMarkerRenderer = (props) => {
     children,
     opacity = import_constants2.MARKER_OPACITY,
     brightness,
-    strokeColor
+    strokeColor,
+    symbolColor
   } = props;
   const iconImages = (0, import_useAnnotationsIconImages.useAnnotationsIconImages)();
   const draw = (0, import_react.useCallback)(
@@ -74,7 +75,8 @@ const RangeMarkerRenderer = (props) => {
           textX,
           y + CONTENT_OFFSET_Y,
           "center",
-          fillColor
+          fillColor,
+          symbolColor
         );
       }
       return false;
@@ -89,7 +91,8 @@ const RangeMarkerRenderer = (props) => {
       fillColor,
       strokeColor,
       children,
-      iconImages
+      iconImages,
+      symbolColor
     ]
   );
   (0, import_useCanvas.useCanvas)("annotations-range-marker", draw);

package/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.d.ts

@@ -10,5 +10,6 @@ export type ValueMarkerRendererProps = {
     opacity?: number;
     brightness?: string;
     orientation?: ValueMarkerPointerPosition;
+    symbolColor?: string;
 };
 export declare const ValueMarkerRenderer: (props: PropsWithChildren<ValueMarkerRendererProps>) => null;

package/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js

@@ -36,7 +36,7 @@ var import_render_text_in_canvas = require("../../utils/render-text-in-canvas.js
 const EXTENDED_AND_COLORED_EMOJI_REGEX = /(\p{Emoji}\uFE0F|\p{Emoji_Presentation})/gu;
 const isEmojiSymbol = (text) => typeof text === "string" && text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;
 const EMOJI_RETINA_OFFSET = 1.5;
-function renderStringToContext(ctx, children, x, width, orientation, y, fillColor) {
+function renderStringToContext(ctx, children, x, width, orientation, y, fillColor, symbolColor) {
   const contentWidth = ctx.measureText(children).width;
   const xOffset = (0, import_calculate_centered_text.calculateCenteredText)(x, width, orientation, contentWidth);
   const contentOffset = y + import_constants.CONTENT_OFFSET_Y;
@@ -46,7 +46,8 @@ function renderStringToContext(ctx, children, x, width, orientation, y, fillColo
     xOffset,
     contentOffset,
     orientation,
-    fillColor
+    fillColor,
+    symbolColor
   );
 }
 const ValueMarkerRenderer = (props) => {
@@ -59,7 +60,8 @@ const ValueMarkerRenderer = (props) => {
     opacity = import_constants2.MARKER_OPACITY,
     brightness,
     width: widthProp,
-    orientation = "center"
+    orientation = "center",
+    symbolColor
   } = props;
   const width = Math.max(widthProp, import_constants.VALUE_MARKER_WIDTH);
   const geometry = (0, import_get_marker_geometry.getMarkerGeometry)(
@@ -99,7 +101,8 @@ const ValueMarkerRenderer = (props) => {
           isEmojiSymbol(children) ? import_constants.VALUE_MARKER_WIDTH : width,
           orientation,
           y,
-          fillColor
+          fillColor,
+          symbolColor
         );
       } else {
         renderStringToContext(
@@ -109,7 +112,8 @@ const ValueMarkerRenderer = (props) => {
           width,
           orientation,
           y,
-          fillColor
+          fillColor,
+          symbolColor
         );
       }
       return false;
@@ -123,7 +127,8 @@ const ValueMarkerRenderer = (props) => {
       x,
       y,
       brightness,
-      width
+      width,
+      symbolColor
     ]
   );
   (0, import_useCanvas.useCanvas)("annotations-value-marker", draw);

package/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js

@@ -97,12 +97,11 @@ function resolveExpandedStringLayout(content, width, isRange, textOverflow, boun
     };
   }
   if (xPosition - markerWidth >= trackLeftBoundary) {
-    const adjustedX = !isRange && textOverflow === "expand" ? xPosition - markerWidth : xPosition;
     return {
       sanitizedContent: content,
       calculatedMarkerWidth: markerWidth,
       valueMarkerOrientation: "right",
-      calculatedX: adjustedX
+      calculatedX: xPosition
     };
   }
   if (xPosition + markerWidth <= trackRightBoundary) {

package/charts/core/components/annotations/components/canvas/utils/render-text-in-canvas.d.ts

@@ -1,2 +1,2 @@
 import { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';
-export declare const renderTextContent: (ctx: CanvasRenderingContext2D, content: string, x: number, y: number, orientation: ValueMarkerPointerPosition | undefined, markerFillColor: string) => void;
+export declare const renderTextContent: (ctx: CanvasRenderingContext2D, content: string, x: number, y: number, orientation: ValueMarkerPointerPosition | undefined, markerFillColor: string, symbolColor?: string) => void;

package/charts/core/components/annotations/components/canvas/utils/render-text-in-canvas.js

@@ -33,20 +33,16 @@ module.exports = __toCommonJS(render_text_in_canvas_exports);
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_get_marker_font = require("./get-marker-font.js");
 var import_color_contrast = require("../../../../../utils/color-contrast.js");
-const renderTextContent = (ctx, content, x, y, orientation = "center", markerFillColor) => {
+const renderTextContent = (ctx, content, x, y, orientation = "center", markerFillColor, symbolColor) => {
   const lightTextColor = (0, import_color_contrast.getColorTokenDefaultValue)(
     import_colors.default.Text.Neutral.OnAccent.Default
   );
   const darkTextColor = (0, import_color_contrast.getColorTokenDefaultValue)(import_colors.default.Text.Neutral.Default);
-  const contrastTextColor = (0, import_color_contrast.getColorByContrast)(
-    markerFillColor,
-    lightTextColor,
-    darkTextColor
-  );
+  const textColor = symbolColor ?? (0, import_color_contrast.getColorByContrast)(markerFillColor, lightTextColor, darkTextColor);
   const { fontFamily, fontWeight, fontSize } = (0, import_get_marker_font.getMarkerFont)();
   ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
   ctx.imageSmoothingEnabled = true;
-  ctx.fillStyle = contrastTextColor;
+  ctx.fillStyle = textColor;
   ctx.textAlign = orientation;
   ctx.textBaseline = "middle";
   ctx.fillText(content, x, y);

package/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.d.ts

@@ -20,6 +20,7 @@ type AnnotationsNumericalDisplayProps = BehaviorTrackingProps & {
     textOverflow: TextOverflowOptions;
     truncateMode?: TruncationMode;
     maxLines?: number;
+    outerBottomLine?: boolean;
     formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
     annotationsActions?: AnnotationsActionsHandler;
     markerGroupHover?: (event: Partial<SelectionState>) => void;

package/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.d.ts

@@ -21,6 +21,7 @@ export type AnnotationsTimeDisplayProps = BehaviorTrackingProps & {
     textOverflow: TextOverflowOptions;
     truncateMode?: TruncationMode;
     maxLines?: number;
+    outerBottomLine?: boolean;
     /**
      * Optional data-dt-component attribute for RUM tracking.
      */

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

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

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

@@ -28,11 +28,13 @@ var import_AnnotationsConfig_context = require("../../contexts/AnnotationsConfig
 var import_useOverlayEvents = require("../../hooks/useOverlayEvents.js");
 const AnnotationsOverlays = ({ height }) => {
   const { labelsWidth, trackWidth } = (0, import_react.useContext)(import_AnnotationsConfig_context.AnnotationsConfigContext);
-  const { handleMouseMove, handleMouseLeave, handleClick } = (0, import_useOverlayEvents.useOverlayEvents)();
+  const { handleMouseMove, handlePointerLeave, handleTouchEnd, handleClick } = (0, import_useOverlayEvents.useOverlayEvents)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      onMouseLeave: handleMouseLeave,
+      "aria-hidden": "true",
+      onPointerLeave: handlePointerLeave,
+      onTouchEnd: handleTouchEnd,
       onMouseMove: handleMouseMove,
       onClick: handleClick,
       className: import_AnnotationsOverlays_css.annotationsOverlay,

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

@@ -21,4 +21,4 @@ __export(AnnotationsOverlays_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsOverlays_css_exports);
 var import_AnnotationsOverlays_css_ts_vanilla = require("./AnnotationsOverlays.css");
-var annotationsOverlay = "_107efci0-3-7-1";
+var annotationsOverlay = "_107efci0-3-9-0";

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

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

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

@@ -21,4 +21,4 @@ __export(AnnotationsScrollWrapper_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsScrollWrapper_css_exports);
 var import_AnnotationsScrollWrapper_css_ts_vanilla = require("./AnnotationsScrollWrapper.css");
-var scrollWrapper = "_uzgvu30-3-7-1";
+var scrollWrapper = "_uzgvu30-3-9-0";

package/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.js

@@ -27,6 +27,7 @@ var import_units = require("@dynatrace-sdk/units");
 var import_useAnnotationsTooltipFormatter = require("./hooks/useAnnotationsTooltipFormatter.js");
 var import_get_symbol = require("./utils/get-symbol.js");
 var import_Divider = require("../../../../../../layouts/divider/Divider.js");
+var import_fitBetween = require("../../../../utils/fitBetween.js");
 var import_Footer = require("../../../overlay-tooltip/components/Footer.js");
 var import_Header = require("../../../overlay-tooltip/components/header/Header.js");
 var import_SeriesItem = require("../../../overlay-tooltip/components/series/SeriesItem.js");
@@ -34,6 +35,7 @@ var import_ExternalConfigContext = require("../../../overlay-tooltip/contexts/Ex
 var import_messages = require("../../../overlay-tooltip/messages.js");
 var import_selectors = require("../../../overlay-tooltip/selectors.js");
 var import_tooltip_css = require("../../../overlay-tooltip/tooltip.sty.js");
+var import_state_setters = require("../../hooks/store/state-setters.js");
 var import_useAnnotationsActions = require("../../hooks/useAnnotationsActions.js");
 var import_serialize_marker_range = require("../../utils/serialize-marker-range.js");
 const BASE_ACTIONS_CONFIG = /* @__PURE__ */ new Map([
@@ -49,91 +51,177 @@ const buildExternalConfig = (truncationMode) => ({
   variant: "single"
 });
 const X_VALUE_LABEL = "X-value";
+const GROUP_KEY_ATTRIBUTE = "data-annotation-group-key";
+const getGroupElementId = (groupKey) => `annotation-group-${groupKey}`;
+const getWrapAroundStartIndex = (delta, length) => delta > 0 ? 0 : length - 1;
 const AnnotationsDefaultTooltipContent = (props) => {
   const { data, tooltipType, truncationMode, maxLines } = props;
   const formatter = (0, import_useAnnotationsTooltipFormatter.useAnnotationsTooltipFormatter)();
   const annotationsActions = (0, import_useAnnotationsActions.useAnnotationsActions)();
+  const updateAnnotationsSelectionState = (0, import_state_setters.useSetStateSelection)();
   const config = buildExternalConfig(truncationMode);
   const intl = (0, import_react_intl.useIntl)();
   const unpinnedPlaceholderText = intl.formatMessage(
     import_messages.OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage
   );
   const pinned = (0, import_selectors.useSelector)((state) => state.pinned);
+  const [hoveredGroupKey, setHoveredGroupKey] = (0, import_react.useState)(
+    void 0
+  );
+  const setHoveredGroup = (groupKey) => {
+    if (groupKey === hoveredGroupKey) {
+      return;
+    }
+    setHoveredGroupKey(groupKey);
+    updateAnnotationsSelectionState({
+      hoveredListItem: groupKey,
+      hoverGroupListKey: groupKey
+    });
+  };
+  const resolveGroupKeyFromEvent = (event) => {
+    const target = event.target;
+    return target.closest(`[${GROUP_KEY_ATTRIBUTE}]`)?.getAttribute(GROUP_KEY_ATTRIBUTE) ?? void 0;
+  };
+  const handleGroupsMouseMove = (event) => {
+    if (!pinned) {
+      return;
+    }
+    setHoveredGroup(resolveGroupKeyFromEvent(event));
+  };
+  const handleGroupsMouseLeave = () => {
+    if (!pinned) {
+      return;
+    }
+    setHoveredGroup(void 0);
+  };
+  const handleGroupsFocus = (event) => {
+    if (!pinned) {
+      return;
+    }
+    setHoveredGroup(resolveGroupKeyFromEvent(event));
+  };
+  const handleGroupsBlur = () => {
+    if (!pinned) {
+      return;
+    }
+    setHoveredGroup(void 0);
+  };
+  const handleGroupsTouchStart = (event) => {
+    if (!pinned) {
+      return;
+    }
+    setHoveredGroup(resolveGroupKeyFromEvent(event));
+  };
+  const handleGroupsKeyDown = (event) => {
+    if (!pinned || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+      return;
+    }
+    event.preventDefault();
+    const delta = event.key === "ArrowDown" ? 1 : -1;
+    const currentIndex = data.findIndex((g) => g.key === hoveredGroupKey);
+    const nextIndex = currentIndex === -1 ? getWrapAroundStartIndex(delta, data.length) : (0, import_fitBetween.fitBetween)(currentIndex + delta, 0, data.length - 1);
+    setHoveredGroup(data[nextIndex]?.key);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: config, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_tooltip_css.annotationsGroupsScrollContainer, children: data.map((annotationGroup, groupIndex) => {
-      const [from, to] = (0, import_serialize_marker_range.deserializeMarkerRange)(annotationGroup.key);
-      const isRange = to > from;
-      let header1;
-      let showRangeDuration = false;
-      let duration;
-      if (tooltipType === "numerical" && isRange) {
-        header1 = [formatter(from), formatter(to)];
-        duration = String(Math.abs(to - from));
-      } else if (tooltipType === "numerical") {
-        header1 = formatter(from);
-      } else if (isRange) {
-        header1 = [new Date(from), new Date(to)];
-        showRangeDuration = true;
-      } else {
-        header1 = (0, import_units.formatDate)(new Date(from), {
-          day: "2-digit",
-          month: "short",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit"
-        });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-        groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Header.Header,
-          {
-            header1,
-            label: X_VALUE_LABEL,
-            showRangeDuration1: showRangeDuration,
-            duration1: duration,
-            maxLines
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: import_tooltip_css.annotationsGroupsScrollContainer,
+        role: "listbox",
+        tabIndex: pinned ? 0 : -1,
+        "aria-activedescendant": pinned && hoveredGroupKey ? getGroupElementId(hoveredGroupKey) : void 0,
+        onMouseMove: handleGroupsMouseMove,
+        onMouseLeave: handleGroupsMouseLeave,
+        onFocus: handleGroupsFocus,
+        onBlur: handleGroupsBlur,
+        onTouchStart: handleGroupsTouchStart,
+        onKeyDown: handleGroupsKeyDown,
+        children: data.map((annotationGroup, groupIndex) => {
+          const [from, to] = (0, import_serialize_marker_range.deserializeMarkerRange)(annotationGroup.key);
+          const isRange = to > from;
+          let header1;
+          let showRangeDuration = false;
+          let duration;
+          if (tooltipType === "numerical" && isRange) {
+            header1 = [formatter(from), formatter(to)];
+            duration = String(Math.abs(to - from));
+          } else if (tooltipType === "numerical") {
+            header1 = formatter(from);
+          } else if (isRange) {
+            header1 = [new Date(from), new Date(to)];
+            showRangeDuration = true;
+          } else {
+            header1 = (0, import_units.formatDate)(new Date(from), {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+              hour: "2-digit",
+              minute: "2-digit"
+            });
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_tooltip_css.seriesGridContainer, children: annotationGroup.markers.map((marker) => {
-          const symbolProps = (0, import_get_symbol.getAnnotationSeriesSymbolProps)(marker);
-          const {
-            id,
-            symbol,
-            title: markerTitle,
-            description: markerDescription,
-            start,
-            end,
-            color,
-            priority,
-            hidden: markerHidden,
-            ...extraFields
-          } = marker;
-          const payload = {
-            ...extraFields,
-            start,
-            end,
-            title: markerTitle,
-            description: markerDescription,
-            symbol
-          };
-          const actions = annotationsActions?.(payload);
-          const truncationProps = maxLines > 1 ? { multiLine: true } : { multiLine: false, maxLines };
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_SeriesItem.SeriesItem,
-            {
-              name: markerTitle ?? "",
-              description: markerDescription,
-              value: "",
-              ...symbolProps,
-              ...truncationProps,
-              actions: actions ? () => actions : void 0
-            },
-            id
-          );
-        }) })
-      ] }, annotationGroup.key);
-    }) }),
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+            groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Header.Header,
+              {
+                header1,
+                label: X_VALUE_LABEL,
+                showRangeDuration1: showRangeDuration,
+                duration1: duration,
+                maxLines
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: import_tooltip_css.seriesGridContainer,
+                role: "option",
+                id: getGroupElementId(annotationGroup.key),
+                "aria-selected": pinned && hoveredGroupKey === annotationGroup.key,
+                ...{ [GROUP_KEY_ATTRIBUTE]: annotationGroup.key },
+                children: annotationGroup.markers.map((marker) => {
+                  const symbolProps = (0, import_get_symbol.getAnnotationSeriesSymbolProps)(marker);
+                  const {
+                    id,
+                    symbol,
+                    title: markerTitle,
+                    description: markerDescription,
+                    start,
+                    end,
+                    color,
+                    priority,
+                    hidden: markerHidden,
+                    ...extraFields
+                  } = marker;
+                  const payload = {
+                    ...extraFields,
+                    start,
+                    end,
+                    title: markerTitle,
+                    description: markerDescription,
+                    symbol
+                  };
+                  const actions = annotationsActions?.(payload);
+                  const truncationProps = maxLines > 1 ? { multiLine: true } : { multiLine: false, maxLines };
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_SeriesItem.SeriesItem,
+                    {
+                      name: markerTitle ?? "",
+                      description: markerDescription,
+                      value: "",
+                      ...symbolProps,
+                      ...truncationProps,
+                      actions: actions ? () => actions : void 0
+                    },
+                    id
+                  );
+                })
+              }
+            )
+          ] }, annotationGroup.key);
+        })
+      }
+    ),
     !pinned && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Footer.Footer,
       {

package/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.d.ts

@@ -10,7 +10,7 @@ interface AnnotationsOverlayTooltipProps {
  * shared store so that positioning, pinning and out-of-bounds handling are
  * identical to XYChart and MeterBar tooltips.
  *
- * The actual UI is rendered via `<OverlayTooltip legacyTemplate={...}/>` so
+ * The actual UI is rendered via `<OverlayTooltip template={...}/>` so
  * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs
  * for collided marker groups, custom user templates, etc.) while reusing the
  * shared portal / pin / dismissal behaviour.

package/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.js

@@ -131,6 +131,6 @@ const AnnotationsOverlayTooltip = (props) => {
       maxLines
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { template: legacyTemplate });
 };
 AnnotationsOverlayTooltip.displayName = "AnnotationsOverlayTooltip";

package/charts/core/components/annotations/constants.d.ts

@@ -2,7 +2,6 @@ export declare const DEFAULT_LABELS_WIDTH = 60;
 export declare const DEFAULT_LABELS_OFFSET = 20;
 export declare const TRACK_HEIGHT = 24;
 export declare const TRACK_SEPARATOR_COLOR: string;
-export declare const EMPHASIZED_TRACK_SEPARATOR_COLOR: string;
 export declare const TRACK_SEPARATOR_STROKE_WIDTH = 1;
 export declare const TRACK_PADDING_Y = 1;
 export declare const LABEL_OFFSET = 12;

package/charts/core/components/annotations/constants.js

@@ -40,7 +40,6 @@ __export(constants_exports, {
   DEFAULT_TOOLTIP_Y_OFFSET: () => DEFAULT_TOOLTIP_Y_OFFSET,
   DEFAULT_TRACK_HIDDEN: () => DEFAULT_TRACK_HIDDEN,
   DEFAULT_TRUNCATION_MODE: () => DEFAULT_TRUNCATION_MODE,
-  EMPHASIZED_TRACK_SEPARATOR_COLOR: () => EMPHASIZED_TRACK_SEPARATOR_COLOR,
   FOREIGN_OBJECT_THRESHOLD: () => FOREIGN_OBJECT_THRESHOLD,
   LABEL_OFFSET: () => LABEL_OFFSET,
   MARGIN_TOP_STROKE: () => MARGIN_TOP_STROKE,
@@ -71,7 +70,6 @@ const DEFAULT_LABELS_WIDTH = 60;
 const DEFAULT_LABELS_OFFSET = 20;
 const TRACK_HEIGHT = 24;
 const TRACK_SEPARATOR_COLOR = import_colors.default.Border.Neutral.Default;
-const EMPHASIZED_TRACK_SEPARATOR_COLOR = import_colors.default.Border.Neutral.Accent;
 const TRACK_SEPARATOR_STROKE_WIDTH = 1;
 const TRACK_PADDING_Y = 1;
 const LABEL_OFFSET = 12;

package/charts/core/components/annotations/contexts/AnnotationsConfig.context.d.ts

@@ -2,6 +2,13 @@ interface AnnotationsContextProps {
     showLabels: boolean;
     labelsWidth: number;
     trackWidth: number;
+    /**
+     * Draws a separator line below the last (bottom-most) track, closing off the
+     * markers band. Used by charts where the annotations area is not directly
+     * adjacent to the plot (e.g. an XY chart with a top axis), so the plot border
+     * cannot serve as the separator.
+     */
+    outerBottomLine?: boolean;
 }
 export declare const AnnotationsConfigContext: import("react").Context<AnnotationsContextProps>;
 export {};