@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -1,10 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import {
+  Fragment,
+  useState
+} from "react";
 import { useIntl } from "react-intl";
 import { formatDate } from "@dynatrace-sdk/units";
 import { useAnnotationsTooltipFormatter } from "./hooks/useAnnotationsTooltipFormatter.js";
 import { getAnnotationSeriesSymbolProps } from "./utils/get-symbol.js";
 import { Divider } from "../../../../../../layouts/divider/Divider.js";
+import { fitBetween } from "../../../../utils/fitBetween.js";
 import { Footer } from "../../../overlay-tooltip/components/Footer.js";
 import { Header } from "../../../overlay-tooltip/components/header/Header.js";
 import { SeriesItem } from "../../../overlay-tooltip/components/series/SeriesItem.js";
@@ -16,6 +20,7 @@ import {
   divider,
   seriesGridContainer
 } from "../../../overlay-tooltip/tooltip.sty.js";
+import { useSetStateSelection } from "../../hooks/store/state-setters.js";
 import { useAnnotationsActions } from "../../hooks/useAnnotationsActions.js";
 import { deserializeMarkerRange } from "../../utils/serialize-marker-range.js";
 const BASE_ACTIONS_CONFIG = /* @__PURE__ */ new Map([
@@ -31,91 +36,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 = useAnnotationsTooltipFormatter();
   const annotationsActions = useAnnotationsActions();
+  const updateAnnotationsSelectionState = useSetStateSelection();
   const config = buildExternalConfig(truncationMode);
   const intl = useIntl();
   const unpinnedPlaceholderText = intl.formatMessage(
     OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage
   );
   const pinned = useSelector((state) => state.pinned);
+  const [hoveredGroupKey, setHoveredGroupKey] = 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) : fitBetween(currentIndex + delta, 0, data.length - 1);
+    setHoveredGroup(data[nextIndex]?.key);
+  };
   return /* @__PURE__ */ jsxs(ExternalConfigContext.Provider, { value: config, children: [
-    /* @__PURE__ */ jsx("div", { className: annotationsGroupsScrollContainer, children: data.map((annotationGroup, groupIndex) => {
-      const [from, to] = 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 = formatDate(new Date(from), {
-          day: "2-digit",
-          month: "short",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit"
-        });
-      }
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        groupIndex > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: divider }),
-        /* @__PURE__ */ jsx(
-          Header,
-          {
-            header1,
-            label: X_VALUE_LABEL,
-            showRangeDuration1: showRangeDuration,
-            duration1: duration,
-            maxLines
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: 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] = 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 = formatDate(new Date(from), {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+              hour: "2-digit",
+              minute: "2-digit"
+            });
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: seriesGridContainer, children: annotationGroup.markers.map((marker) => {
-          const symbolProps = 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__ */ jsx(
-            SeriesItem,
-            {
-              name: markerTitle ?? "",
-              description: markerDescription,
-              value: "",
-              ...symbolProps,
-              ...truncationProps,
-              actions: actions ? () => actions : void 0
-            },
-            id
-          );
-        }) })
-      ] }, annotationGroup.key);
-    }) }),
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            groupIndex > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: divider }),
+            /* @__PURE__ */ jsx(
+              Header,
+              {
+                header1,
+                label: X_VALUE_LABEL,
+                showRangeDuration1: showRangeDuration,
+                duration1: duration,
+                maxLines
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: 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 = 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__ */ jsx(
+                    SeriesItem,
+                    {
+                      name: markerTitle ?? "",
+                      description: markerDescription,
+                      value: "",
+                      ...symbolProps,
+                      ...truncationProps,
+                      actions: actions ? () => actions : void 0
+                    },
+                    id
+                  );
+                })
+              }
+            )
+          ] }, annotationGroup.key);
+        })
+      }
+    ),
     !pinned && /* @__PURE__ */ jsx(
       Footer,
       {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.tsx"],
-  "sourcesContent": ["import { Fragment } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useAnnotationsTooltipFormatter } from './hooks/useAnnotationsTooltipFormatter.js';\nimport { getAnnotationSeriesSymbolProps } from './utils/get-symbol.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { Footer } from '../../../overlay-tooltip/components/Footer.js';\nimport { Header } from '../../../overlay-tooltip/components/header/Header.js';\nimport { SeriesItem } from '../../../overlay-tooltip/components/series/SeriesItem.js';\nimport { ExternalConfigContext } from '../../../overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { OVERLAY_TOOLTIP_MESSAGES } from '../../../overlay-tooltip/messages.js';\nimport { useSelector } from '../../../overlay-tooltip/selectors.js';\nimport {\n  annotationsGroupsScrollContainer,\n  divider,\n  seriesGridContainer,\n} from '../../../overlay-tooltip/tooltip.sty.js';\nimport type {\n  ExternalConfig,\n  HeaderData,\n} from '../../../overlay-tooltip/types.js';\nimport { useAnnotationsActions } from '../../hooks/useAnnotationsActions.js';\nimport type {\n  AnnotationsActionsPayload,\n  AnnotationsMarkerGroup,\n} from '../../types/annotations.js';\nimport { deserializeMarkerRange } from '../../utils/serialize-marker-range.js';\n\nconst BASE_ACTIONS_CONFIG: ExternalConfig['defaultActionsConfig'] = new Map([\n  ['name', { field: 'valueLabel' }],\n]);\n\nconst buildExternalConfig = (\n  truncationMode: TruncationMode,\n): ExternalConfig => ({\n  seriesHeader: null,\n  displayHeaderDivider: false,\n  symbolPosition: 'left',\n  symbolVerticalAlignment: 'start',\n  truncationMode,\n  defaultActionsConfig: BASE_ACTIONS_CONFIG,\n  variant: 'single',\n});\n\ntype AnnotationsDefaultTooltipContentProps = {\n  data: AnnotationsMarkerGroup[];\n  tooltipType: 'time' | 'numerical';\n  truncationMode: TruncationMode;\n  maxLines: number;\n};\n\nconst X_VALUE_LABEL = 'X-value';\n\n/**\n * Default tooltip content for AnnotationsChart, rendered through\n * OverlayTooltip primitives. Supports multiple (Header, Series) pairs for\n * collided marker groups.\n *\n * @internal\n */\nexport const AnnotationsDefaultTooltipContent = (\n  props: AnnotationsDefaultTooltipContentProps,\n) => {\n  const { data, tooltipType, truncationMode, maxLines } = props;\n  const formatter = useAnnotationsTooltipFormatter();\n  const annotationsActions = useAnnotationsActions();\n  const config = buildExternalConfig(truncationMode);\n  const intl = useIntl();\n  const unpinnedPlaceholderText = intl.formatMessage(\n    OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage,\n  );\n  // Direct subscription needed: passed as stable legacyTemplate prop, so no parent re-render reaches this fiber when pinned changes.\n  const pinned = useSelector((state) => state.pinned);\n\n  return (\n    <ExternalConfigContext.Provider value={config}>\n      <div className={annotationsGroupsScrollContainer}>\n        {data.map((annotationGroup, groupIndex) => {\n          const [from, to] = deserializeMarkerRange(annotationGroup.key);\n          const isRange = to > from;\n\n          let header1: HeaderData;\n          let showRangeDuration = false;\n          let duration: string | undefined;\n\n          if (tooltipType === 'numerical' && isRange) {\n            header1 = [formatter(from), formatter(to)] as HeaderData;\n            duration = String(Math.abs(to - from));\n          } else if (tooltipType === 'numerical') {\n            header1 = formatter(from);\n          } else if (isRange) {\n            header1 = [new Date(from), new Date(to)] as HeaderData;\n            showRangeDuration = true;\n          } else {\n            header1 = formatDate(new Date(from), {\n              day: '2-digit',\n              month: 'short',\n              year: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            });\n          }\n\n          return (\n            <Fragment key={annotationGroup.key}>\n              {groupIndex > 0 && (\n                <Divider orientation=\"horizontal\" className={divider} />\n              )}\n              <Header\n                header1={header1}\n                label={X_VALUE_LABEL}\n                showRangeDuration1={showRangeDuration}\n                duration1={duration}\n                maxLines={maxLines}\n              />\n              <div className={seriesGridContainer}>\n                {annotationGroup.markers.map((marker) => {\n                  const symbolProps = getAnnotationSeriesSymbolProps(marker);\n                  const {\n                    id,\n                    symbol,\n                    title: markerTitle,\n                    description: markerDescription,\n                    start,\n                    end,\n                    color,\n                    priority,\n                    hidden: markerHidden,\n                    ...extraFields\n                  } = marker;\n                  const payload: AnnotationsActionsPayload = {\n                    ...extraFields,\n                    start,\n                    end,\n                    title: markerTitle,\n                    description: markerDescription,\n                    symbol,\n                  };\n                  const actions = annotationsActions?.(payload);\n                  const truncationProps =\n                    maxLines > 1\n                      ? ({ multiLine: true } as const)\n                      : ({ multiLine: false, maxLines } as const);\n\n                  return (\n                    <SeriesItem\n                      key={id}\n                      name={markerTitle ?? ''}\n                      description={markerDescription}\n                      value=\"\"\n                      {...symbolProps}\n                      {...truncationProps}\n                      actions={actions ? () => actions : undefined}\n                    />\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })}\n      </div>\n      {!pinned && (\n        <Footer\n          actions={[]}\n          unpinnedPlaceholderText={unpinnedPlaceholderText}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n};\n\nAnnotationsDefaultTooltipContent.displayName =\n  'AnnotationsDefaultTooltipContent';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Fragment,\n  useState,\n  type KeyboardEvent,\n  type SyntheticEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useAnnotationsTooltipFormatter } from './hooks/useAnnotationsTooltipFormatter.js';\nimport { getAnnotationSeriesSymbolProps } from './utils/get-symbol.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { fitBetween } from '../../../../utils/fitBetween.js';\nimport { Footer } from '../../../overlay-tooltip/components/Footer.js';\nimport { Header } from '../../../overlay-tooltip/components/header/Header.js';\nimport { SeriesItem } from '../../../overlay-tooltip/components/series/SeriesItem.js';\nimport { ExternalConfigContext } from '../../../overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { OVERLAY_TOOLTIP_MESSAGES } from '../../../overlay-tooltip/messages.js';\nimport { useSelector } from '../../../overlay-tooltip/selectors.js';\nimport {\n  annotationsGroupsScrollContainer,\n  divider,\n  seriesGridContainer,\n} from '../../../overlay-tooltip/tooltip.sty.js';\nimport type {\n  ExternalConfig,\n  HeaderData,\n} from '../../../overlay-tooltip/types.js';\nimport { useSetStateSelection } from '../../hooks/store/state-setters.js';\nimport { useAnnotationsActions } from '../../hooks/useAnnotationsActions.js';\nimport type {\n  AnnotationsActionsPayload,\n  AnnotationsMarkerGroup,\n} from '../../types/annotations.js';\nimport { deserializeMarkerRange } from '../../utils/serialize-marker-range.js';\n\nconst BASE_ACTIONS_CONFIG: ExternalConfig['defaultActionsConfig'] = new Map([\n  ['name', { field: 'valueLabel' }],\n]);\n\nconst buildExternalConfig = (\n  truncationMode: TruncationMode,\n): ExternalConfig => ({\n  seriesHeader: null,\n  displayHeaderDivider: false,\n  symbolPosition: 'left',\n  symbolVerticalAlignment: 'start',\n  truncationMode,\n  defaultActionsConfig: BASE_ACTIONS_CONFIG,\n  variant: 'single',\n});\n\ntype AnnotationsDefaultTooltipContentProps = {\n  data: AnnotationsMarkerGroup[];\n  tooltipType: 'time' | 'numerical';\n  truncationMode: TruncationMode;\n  maxLines: number;\n};\n\nconst X_VALUE_LABEL = 'X-value';\nconst GROUP_KEY_ATTRIBUTE = 'data-annotation-group-key';\nconst getGroupElementId = (groupKey: string) => `annotation-group-${groupKey}`;\nconst getWrapAroundStartIndex = (delta: number, length: number) =>\n  delta > 0 ? 0 : length - 1;\n\n/**\n * Default tooltip content for AnnotationsChart, rendered through\n * OverlayTooltip primitives. Supports multiple (Header, Series) pairs for\n * collided marker groups.\n *\n * @internal\n */\nexport const AnnotationsDefaultTooltipContent = (\n  props: AnnotationsDefaultTooltipContentProps,\n) => {\n  const { data, tooltipType, truncationMode, maxLines } = props;\n  const formatter = useAnnotationsTooltipFormatter();\n  const annotationsActions = useAnnotationsActions();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const config = buildExternalConfig(truncationMode);\n  const intl = useIntl();\n  const unpinnedPlaceholderText = intl.formatMessage(\n    OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage,\n  );\n  // Direct subscription needed: passed as stable template prop, so no parent re-render reaches this fiber when pinned changes.\n  const pinned = useSelector((state) => state.pinned);\n  const [hoveredGroupKey, setHoveredGroupKey] = useState<string | undefined>(\n    undefined,\n  );\n\n  const setHoveredGroup = (groupKey: string | undefined) => {\n    if (groupKey === hoveredGroupKey) {\n      return;\n    }\n    setHoveredGroupKey(groupKey);\n    updateAnnotationsSelectionState({\n      hoveredListItem: groupKey,\n      hoverGroupListKey: groupKey,\n    });\n  };\n\n  const resolveGroupKeyFromEvent = (\n    event: SyntheticEvent,\n  ): string | undefined => {\n    const target = event.target as Element;\n    return (\n      target\n        .closest(`[${GROUP_KEY_ATTRIBUTE}]`)\n        ?.getAttribute(GROUP_KEY_ATTRIBUTE) ?? undefined\n    );\n  };\n\n  const handleGroupsMouseMove = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsMouseLeave = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsFocus = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsBlur = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsTouchStart = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsKeyDown = (event: KeyboardEvent) => {\n    if (!pinned || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {\n      return;\n    }\n    event.preventDefault();\n    const delta = event.key === 'ArrowDown' ? 1 : -1;\n    const currentIndex = data.findIndex((g) => g.key === hoveredGroupKey);\n    const nextIndex =\n      currentIndex === -1\n        ? getWrapAroundStartIndex(delta, data.length)\n        : fitBetween(currentIndex + delta, 0, data.length - 1);\n    setHoveredGroup(data[nextIndex]?.key);\n  };\n\n  return (\n    <ExternalConfigContext.Provider value={config}>\n      <div\n        className={annotationsGroupsScrollContainer}\n        role=\"listbox\"\n        tabIndex={pinned ? 0 : -1}\n        aria-activedescendant={\n          pinned && hoveredGroupKey\n            ? getGroupElementId(hoveredGroupKey)\n            : undefined\n        }\n        onMouseMove={handleGroupsMouseMove}\n        onMouseLeave={handleGroupsMouseLeave}\n        onFocus={handleGroupsFocus}\n        onBlur={handleGroupsBlur}\n        onTouchStart={handleGroupsTouchStart}\n        onKeyDown={handleGroupsKeyDown}\n      >\n        {data.map((annotationGroup, groupIndex) => {\n          const [from, to] = deserializeMarkerRange(annotationGroup.key);\n          const isRange = to > from;\n\n          let header1: HeaderData;\n          let showRangeDuration = false;\n          let duration: string | undefined;\n\n          if (tooltipType === 'numerical' && isRange) {\n            header1 = [formatter(from), formatter(to)] as HeaderData;\n            duration = String(Math.abs(to - from));\n          } else if (tooltipType === 'numerical') {\n            header1 = formatter(from);\n          } else if (isRange) {\n            header1 = [new Date(from), new Date(to)] as HeaderData;\n            showRangeDuration = true;\n          } else {\n            header1 = formatDate(new Date(from), {\n              day: '2-digit',\n              month: 'short',\n              year: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            });\n          }\n\n          return (\n            <Fragment key={annotationGroup.key}>\n              {groupIndex > 0 && (\n                <Divider orientation=\"horizontal\" className={divider} />\n              )}\n              <Header\n                header1={header1}\n                label={X_VALUE_LABEL}\n                showRangeDuration1={showRangeDuration}\n                duration1={duration}\n                maxLines={maxLines}\n              />\n              <div\n                className={seriesGridContainer}\n                role=\"option\"\n                id={getGroupElementId(annotationGroup.key)}\n                aria-selected={\n                  pinned && hoveredGroupKey === annotationGroup.key\n                }\n                {...{ [GROUP_KEY_ATTRIBUTE]: annotationGroup.key }}\n              >\n                {annotationGroup.markers.map((marker) => {\n                  const symbolProps = getAnnotationSeriesSymbolProps(marker);\n                  const {\n                    id,\n                    symbol,\n                    title: markerTitle,\n                    description: markerDescription,\n                    start,\n                    end,\n                    color,\n                    priority,\n                    hidden: markerHidden,\n                    ...extraFields\n                  } = marker;\n                  const payload: AnnotationsActionsPayload = {\n                    ...extraFields,\n                    start,\n                    end,\n                    title: markerTitle,\n                    description: markerDescription,\n                    symbol,\n                  };\n                  const actions = annotationsActions?.(payload);\n                  const truncationProps =\n                    maxLines > 1\n                      ? ({ multiLine: true } as const)\n                      : ({ multiLine: false, maxLines } as const);\n\n                  return (\n                    <SeriesItem\n                      key={id}\n                      name={markerTitle ?? ''}\n                      description={markerDescription}\n                      value=\"\"\n                      {...symbolProps}\n                      {...truncationProps}\n                      actions={actions ? () => actions : undefined}\n                    />\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })}\n      </div>\n      {!pinned && (\n        <Footer\n          actions={[]}\n          unpinnedPlaceholderText={unpinnedPlaceholderText}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n};\n\nAnnotationsDefaultTooltipContent.displayName =\n  'AnnotationsDefaultTooltipContent';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -112,7 +112,7 @@ const AnnotationsOverlayTooltip = (props) => {
       maxLines
     }
   );
-  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate });
+  return /* @__PURE__ */ jsx(OverlayTooltip, { template: legacyTemplate });
 };
 AnnotationsOverlayTooltip.displayName = "AnnotationsOverlayTooltip";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { AnnotationsCustomizedTooltip } from './AnnotationsCustomizedTooltip.js';\nimport { AnnotationsDefaultTooltipContent } from './AnnotationsDefaultTooltipContent.js';\nimport { useAnnotationsTooltipConfig } from './hooks/useAnnotationsTooltipConfig.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayTooltip } from '../../../overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../overlay-tooltip/types.js';\nimport { useTooltipReducer } from '../../../overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../overlay-tooltip/utils.js';\nimport { useAnnotationsTooltipState } from '../../hooks/store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from '../../hooks/store/state-setters.js';\nimport { useMarkersInteractions } from '../../hooks/useMarkersInteractions.js';\nimport { initialState } from '../../providers/AnnotationsDataInitialState.js';\n\ninterface AnnotationsOverlayTooltipProps {\n  tooltipType: 'time' | 'numerical';\n  truncationMode?: TruncationMode;\n  maxLines?: number;\n}\n\n// Sentinel payload used to keep the OverlayTooltip store data non-empty while\n// the annotations tooltip is visible. The actual content is rendered through\n// `legacyTemplate`, so this value is never read by the default tooltip\n// rendering pipeline \u2014 it only has to pass `isTooltipDataEmpty` (geometry !==\n// 'none') so that DynamicTooltipRenderer mounts the portal.\nconst buildSentinelData = (): Data => ({\n  geometry: 'rect',\n  series: [\n    {\n      name: '',\n      value: '',\n      color: '',\n    },\n  ],\n});\n\n/**\n * AnnotationsChart tooltip driven by the shared OverlayTooltip\n * (`TooltipProvider`) store. Bridges the legacy annotations store into the\n * shared store so that positioning, pinning and out-of-bounds handling are\n * identical to XYChart and MeterBar tooltips.\n *\n * The actual UI is rendered via `<OverlayTooltip legacyTemplate={...}/>` so\n * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs\n * for collided marker groups, custom user templates, etc.) while reusing the\n * shared portal / pin / dismissal behaviour.\n *\n * @internal\n */\nexport const AnnotationsOverlayTooltip = (\n  props: AnnotationsOverlayTooltipProps,\n) => {\n  const { tooltipType, truncationMode = 'end', maxLines = 1 } = props;\n  const annotationsState = useAnnotationsTooltipState();\n  const { pinned, data, visibility, position } = annotationsState;\n  const dispatch = useTooltipReducer();\n  const updateAnnotationsTooltipState = useSetStateTooltip();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const config = useAnnotationsTooltipConfig();\n  const hidden = config?.hidden === true;\n  const hasData = !!data && data.length > 0 && visibility;\n\n  // Track the previous pinned state so we can explicitly dispatch\n  // SET_PINNED(false) on a true -> false transition (the reducer's\n  // SET_POSITION/SET_OUT_BOUNDS branches short-circuit while pinned is true).\n  const prevPinnedRef = useRef(false);\n\n  // Sync annotations store into the OverlayTooltip store on changes so that\n  // the shared tooltip portal reflects the current hover/pin state.\n  useEffect(() => {\n    const wasPinned = prevPinnedRef.current;\n    prevPinnedRef.current = pinned;\n\n    if (wasPinned && !pinned) {\n      // Explicit unpin first \u2014 otherwise SET_POSITION / SET_OUT_BOUNDS below\n      // will no-op because the reducer treats `pinned=true` as sticky.\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    }\n\n    if (hidden || !hasData || !position) {\n      dispatch({ type: 'SET_OUT_BOUNDS' })();\n      return;\n    }\n\n    if (pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: true,\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    } else {\n      dispatch({\n        type: 'SET_POSITION',\n        payload: {\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hidden, hasData, pinned, position?.x, position?.y]);\n\n  // Reset both the OverlayTooltip and annotations stores on unmount.\n  useEffect(() => {\n    return () => {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    window.addEventListener('keyup', handleEscape);\n    return () => {\n      window.removeEventListener('keyup', handleEscape);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (hidden || !hasData) {\n    return null;\n  }\n\n  const legacyTemplate = config?.template ? (\n    <AnnotationsCustomizedTooltip\n      tooltipTemplate={config.template}\n      data={data}\n    />\n  ) : (\n    <AnnotationsDefaultTooltipContent\n      data={data}\n      tooltipType={tooltipType}\n      truncationMode={truncationMode}\n      maxLines={maxLines}\n    />\n  );\n\n  return <OverlayTooltip legacyTemplate={legacyTemplate} />;\n};\n\nAnnotationsOverlayTooltip.displayName = 'AnnotationsOverlayTooltip';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { AnnotationsCustomizedTooltip } from './AnnotationsCustomizedTooltip.js';\nimport { AnnotationsDefaultTooltipContent } from './AnnotationsDefaultTooltipContent.js';\nimport { useAnnotationsTooltipConfig } from './hooks/useAnnotationsTooltipConfig.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayTooltip } from '../../../overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../overlay-tooltip/types.js';\nimport { useTooltipReducer } from '../../../overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../overlay-tooltip/utils.js';\nimport { useAnnotationsTooltipState } from '../../hooks/store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from '../../hooks/store/state-setters.js';\nimport { useMarkersInteractions } from '../../hooks/useMarkersInteractions.js';\nimport { initialState } from '../../providers/AnnotationsDataInitialState.js';\n\ninterface AnnotationsOverlayTooltipProps {\n  tooltipType: 'time' | 'numerical';\n  truncationMode?: TruncationMode;\n  maxLines?: number;\n}\n\n// Sentinel payload used to keep the OverlayTooltip store data non-empty while\n// the annotations tooltip is visible. The actual content is rendered through\n// `template`, so this value is never read by the default tooltip\n// rendering pipeline \u2014 it only has to pass `isTooltipDataEmpty` (geometry !==\n// 'none') so that DynamicTooltipRenderer mounts the portal.\nconst buildSentinelData = (): Data => ({\n  geometry: 'rect',\n  series: [\n    {\n      name: '',\n      value: '',\n      color: '',\n    },\n  ],\n});\n\n/**\n * AnnotationsChart tooltip driven by the shared OverlayTooltip\n * (`TooltipProvider`) store. Bridges the legacy annotations store into the\n * shared store so that positioning, pinning and out-of-bounds handling are\n * identical to XYChart and MeterBar tooltips.\n *\n * The actual UI is rendered via `<OverlayTooltip template={...}/>` so\n * we can keep AnnotationsChart's bespoke layout (multiple Header+Series pairs\n * for collided marker groups, custom user templates, etc.) while reusing the\n * shared portal / pin / dismissal behaviour.\n *\n * @internal\n */\nexport const AnnotationsOverlayTooltip = (\n  props: AnnotationsOverlayTooltipProps,\n) => {\n  const { tooltipType, truncationMode = 'end', maxLines = 1 } = props;\n  const annotationsState = useAnnotationsTooltipState();\n  const { pinned, data, visibility, position } = annotationsState;\n  const dispatch = useTooltipReducer();\n  const updateAnnotationsTooltipState = useSetStateTooltip();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const config = useAnnotationsTooltipConfig();\n  const hidden = config?.hidden === true;\n  const hasData = !!data && data.length > 0 && visibility;\n\n  // Track the previous pinned state so we can explicitly dispatch\n  // SET_PINNED(false) on a true -> false transition (the reducer's\n  // SET_POSITION/SET_OUT_BOUNDS branches short-circuit while pinned is true).\n  const prevPinnedRef = useRef(false);\n\n  // Sync annotations store into the OverlayTooltip store on changes so that\n  // the shared tooltip portal reflects the current hover/pin state.\n  useEffect(() => {\n    const wasPinned = prevPinnedRef.current;\n    prevPinnedRef.current = pinned;\n\n    if (wasPinned && !pinned) {\n      // Explicit unpin first \u2014 otherwise SET_POSITION / SET_OUT_BOUNDS below\n      // will no-op because the reducer treats `pinned=true` as sticky.\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    }\n\n    if (hidden || !hasData || !position) {\n      dispatch({ type: 'SET_OUT_BOUNDS' })();\n      return;\n    }\n\n    if (pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: true,\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    } else {\n      dispatch({\n        type: 'SET_POSITION',\n        payload: {\n          absoluteX: position.x,\n          absoluteY: position.y,\n          data: buildSentinelData(),\n        },\n      })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hidden, hasData, pinned, position?.x, position?.y]);\n\n  // Reset both the OverlayTooltip and annotations stores on unmount.\n  useEffect(() => {\n    return () => {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      updateAnnotationsTooltipState(initialState.tooltip);\n      updateAnnotationsSelectionState(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    };\n    window.addEventListener('keyup', handleEscape);\n    return () => {\n      window.removeEventListener('keyup', handleEscape);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (hidden || !hasData) {\n    return null;\n  }\n\n  const legacyTemplate = config?.template ? (\n    <AnnotationsCustomizedTooltip\n      tooltipTemplate={config.template}\n      data={data}\n    />\n  ) : (\n    <AnnotationsDefaultTooltipContent\n      data={data}\n      tooltipType={tooltipType}\n      truncationMode={truncationMode}\n      maxLines={maxLines}\n    />\n  );\n\n  return <OverlayTooltip template={legacyTemplate} />;\n};\n\nAnnotationsOverlayTooltip.displayName = 'AnnotationsOverlayTooltip';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,7 +3,6 @@ const DEFAULT_LABELS_WIDTH = 60;
 const DEFAULT_LABELS_OFFSET = 20;
 const TRACK_HEIGHT = 24;
 const TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Default;
-const EMPHASIZED_TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Accent;
 const TRACK_SEPARATOR_STROKE_WIDTH = 1;
 const TRACK_PADDING_Y = 1;
 const LABEL_OFFSET = 12;
@@ -60,7 +59,6 @@ export {
   DEFAULT_TOOLTIP_Y_OFFSET,
   DEFAULT_TRACK_HIDDEN,
   DEFAULT_TRUNCATION_MODE,
-  EMPHASIZED_TRACK_SEPARATOR_COLOR,
   FOREIGN_OBJECT_THRESHOLD,
   LABEL_OFFSET,
   MARGIN_TOP_STROKE,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport const DEFAULT_LABELS_WIDTH = 60;\nexport const DEFAULT_LABELS_OFFSET = 20;\nexport const TRACK_HEIGHT = 24;\nexport const TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Default;\nexport const EMPHASIZED_TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Accent;\nexport const TRACK_SEPARATOR_STROKE_WIDTH = 1;\nexport const TRACK_PADDING_Y = 1;\n\nexport const LABEL_OFFSET = 12;\nexport const PILL_MARKER_HEIGHT = 20;\nexport const OUTLINE_STROKE_WIDTH = 2;\n\nexport const DEFAULT_MARKER_COLOR = Colors.Charts.Categorical.Color01.Default;\n\nexport const MARKER_RADIUS = 10;\nexport const MINIMUM_MARKER_WIDTH = 3;\nexport const MARKER_OPACITY = 0.85;\nexport const MARKER_STROKE_WIDTH = 1;\nexport const MARKER_STROKE_COLOR = Colors.Background.Base.Default;\nexport const OUTER_CIRCLE_RADIUS = MARKER_RADIUS + OUTLINE_STROKE_WIDTH;\n\nexport const SCROLLBAR_THRESHOLD = 15;\nexport const SCROLLBAR_WIDTH = 8;\nexport const DEFAULT_ICON_COLOR = Colors.Text.Neutral.OnAccent.Default;\n\nexport const MARKER_PROPS = {\n  opacity: MARKER_OPACITY,\n  stroke: MARKER_STROKE_COLOR,\n  strokeWidth: MARKER_STROKE_WIDTH,\n};\n\nexport const DEFAULT_TRACK_HIDDEN = false;\nexport const DEFAULT_MARKER_PRIORITY = 0;\nexport const DEFAULT_MARKER_HIDDEN = false;\nexport const DEFAULT_TOOLTIP_Y_OFFSET = 40;\nexport const DEFAULT_SHOW_LABELS = true;\nexport const DEFAULT_TEXT_OVERFLOW = 'truncate';\nexport const DEFAULT_TRUNCATION_MODE = 'middle';\nexport const DEFAULT_TOOLTIP_MAX_LINES = 1;\nexport const DEFAULT_INTEGRATION_TEXT_OVERFLOW = 'expand';\n\nexport const enum TestIds {\n  Marker = 'marker',\n  Track = 'track',\n  MarkerGroup = 'marker-group',\n  AnnotationIndicator = 'annotation-indicator',\n}\n\nexport const MARKER_ICON_OFFSET = 2;\nexport const MARKER_LABEL_PADDING = 6;\nexport const FOREIGN_OBJECT_THRESHOLD = 8;\nexport const MARKER_BORDER_RADIUS = 2;\nexport const MARKER_CONTENT_TO_BORDER_PADDING = 4;\nexport const MARGIN_TOP_STROKE = 1;\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEZ,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AACpD,MAAM,mCAAmC,OAAO,OAAO,QAAQ;AAC/D,MAAM,+BAA+B;AACrC,MAAM,kBAAkB;AAExB,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAE7B,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAE/D,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB,OAAO,WAAW,KAAK;AACnD,MAAM,sBAAsB,gBAAgB;AAE5C,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,OAAO,KAAK,QAAQ,SAAS;AAExD,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEO,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAChC,MAAM,4BAA4B;AAClC,MAAM,oCAAoC;AAE1C,IAAW,UAAX,kBAAWA,aAAX;AACL,EAAAA,SAAA,YAAS;AACT,EAAAA,SAAA,WAAQ;AACR,EAAAA,SAAA,iBAAc;AACd,EAAAA,SAAA,yBAAsB;AAJN,SAAAA;AAAA,GAAA;AAOX,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,mCAAmC;AACzC,MAAM,oBAAoB;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport const DEFAULT_LABELS_WIDTH = 60;\nexport const DEFAULT_LABELS_OFFSET = 20;\nexport const TRACK_HEIGHT = 24;\nexport const TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Default;\nexport const TRACK_SEPARATOR_STROKE_WIDTH = 1;\nexport const TRACK_PADDING_Y = 1;\n\nexport const LABEL_OFFSET = 12;\nexport const PILL_MARKER_HEIGHT = 20;\nexport const OUTLINE_STROKE_WIDTH = 2;\n\nexport const DEFAULT_MARKER_COLOR = Colors.Charts.Categorical.Color01.Default;\n\nexport const MARKER_RADIUS = 10;\nexport const MINIMUM_MARKER_WIDTH = 3;\nexport const MARKER_OPACITY = 0.85;\nexport const MARKER_STROKE_WIDTH = 1;\nexport const MARKER_STROKE_COLOR = Colors.Background.Base.Default;\nexport const OUTER_CIRCLE_RADIUS = MARKER_RADIUS + OUTLINE_STROKE_WIDTH;\n\nexport const SCROLLBAR_THRESHOLD = 15;\nexport const SCROLLBAR_WIDTH = 8;\nexport const DEFAULT_ICON_COLOR = Colors.Text.Neutral.OnAccent.Default;\n\nexport const MARKER_PROPS = {\n  opacity: MARKER_OPACITY,\n  stroke: MARKER_STROKE_COLOR,\n  strokeWidth: MARKER_STROKE_WIDTH,\n};\n\nexport const DEFAULT_TRACK_HIDDEN = false;\nexport const DEFAULT_MARKER_PRIORITY = 0;\nexport const DEFAULT_MARKER_HIDDEN = false;\nexport const DEFAULT_TOOLTIP_Y_OFFSET = 40;\nexport const DEFAULT_SHOW_LABELS = true;\nexport const DEFAULT_TEXT_OVERFLOW = 'truncate';\nexport const DEFAULT_TRUNCATION_MODE = 'middle';\nexport const DEFAULT_TOOLTIP_MAX_LINES = 1;\nexport const DEFAULT_INTEGRATION_TEXT_OVERFLOW = 'expand';\n\nexport const enum TestIds {\n  Marker = 'marker',\n  Track = 'track',\n  MarkerGroup = 'marker-group',\n  AnnotationIndicator = 'annotation-indicator',\n}\n\nexport const MARKER_ICON_OFFSET = 2;\nexport const MARKER_LABEL_PADDING = 6;\nexport const FOREIGN_OBJECT_THRESHOLD = 8;\nexport const MARKER_BORDER_RADIUS = 2;\nexport const MARKER_CONTENT_TO_BORDER_PADDING = 4;\nexport const MARGIN_TOP_STROKE = 1;\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAEZ,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AACpD,MAAM,+BAA+B;AACrC,MAAM,kBAAkB;AAExB,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAE7B,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAE/D,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB,OAAO,WAAW,KAAK;AACnD,MAAM,sBAAsB,gBAAgB;AAE5C,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,OAAO,KAAK,QAAQ,SAAS;AAExD,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEO,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAChC,MAAM,4BAA4B;AAClC,MAAM,oCAAoC;AAE1C,IAAW,UAAX,kBAAWA,aAAX;AACL,EAAAA,SAAA,YAAS;AACT,EAAAA,SAAA,WAAQ;AACR,EAAAA,SAAA,iBAAc;AACd,EAAAA,SAAA,yBAAsB;AAJN,SAAAA;AAAA,GAAA;AAOX,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,mCAAmC;AACzC,MAAM,oBAAoB;",
   "names": ["TestIds"]
 }

package/esm/charts/core/components/annotations/contexts/AnnotationsConfig.context.js

@@ -3,7 +3,8 @@ import { DEFAULT_LABELS_OFFSET, DEFAULT_LABELS_WIDTH } from "../constants.js";
 const AnnotationsConfigContext = createContext({
   showLabels: true,
   labelsWidth: DEFAULT_LABELS_OFFSET + DEFAULT_LABELS_WIDTH,
-  trackWidth: 0
+  trackWidth: 0,
+  outerBottomLine: false
 });
 AnnotationsConfigContext["displayName"] = "AnnotationsConfig.Context";
 export {

package/esm/charts/core/components/annotations/contexts/AnnotationsConfig.context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/contexts/AnnotationsConfig.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport { DEFAULT_LABELS_OFFSET, DEFAULT_LABELS_WIDTH } from '../constants.js';\n\ninterface AnnotationsContextProps {\n  showLabels: boolean;\n  labelsWidth: number;\n  trackWidth: number;\n}\n\nexport const AnnotationsConfigContext = createContext<AnnotationsContextProps>({\n  showLabels: true,\n  labelsWidth: DEFAULT_LABELS_OFFSET + DEFAULT_LABELS_WIDTH,\n  trackWidth: 0,\n});\n\nAnnotationsConfigContext['displayName'] = 'AnnotationsConfig.Context';\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB,4BAA4B;AAQrD,MAAM,2BAA2B,cAAuC;AAAA,EAC7E,YAAY;AAAA,EACZ,aAAa,wBAAwB;AAAA,EACrC,YAAY;AACd,CAAC;AAED,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport { DEFAULT_LABELS_OFFSET, DEFAULT_LABELS_WIDTH } from '../constants.js';\n\ninterface AnnotationsContextProps {\n  showLabels: boolean;\n  labelsWidth: number;\n  trackWidth: number;\n  /**\n   * Draws a separator line below the last (bottom-most) track, closing off the\n   * markers band. Used by charts where the annotations area is not directly\n   * adjacent to the plot (e.g. an XY chart with a top axis), so the plot border\n   * cannot serve as the separator.\n   */\n  outerBottomLine?: boolean;\n}\n\nexport const AnnotationsConfigContext = createContext<AnnotationsContextProps>({\n  showLabels: true,\n  labelsWidth: DEFAULT_LABELS_OFFSET + DEFAULT_LABELS_WIDTH,\n  trackWidth: 0,\n  outerBottomLine: false,\n});\n\nAnnotationsConfigContext['displayName'] = 'AnnotationsConfig.Context';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB,4BAA4B;AAerD,MAAM,2BAA2B,cAAuC;AAAA,EAC7E,YAAY;AAAA,EACZ,aAAa,wBAAwB;AAAA,EACrC,YAAY;AAAA,EACZ,iBAAiB;AACnB,CAAC;AAED,yBAAyB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useAnnotationsHandlers.js

@@ -15,8 +15,8 @@ const useAnnotationsHandlers = () => {
       markerEventHandlers?.[markerId].onMouseMove?.(e);
     }
   };
-  const blurMarker = (e, markerId) => {
-    markerEventHandlers?.[markerId]?.onMouseLeave?.(e);
+  const blurMarker = (markerId) => {
+    markerEventHandlers?.[markerId]?.onMouseLeave?.();
     currentHoveredMarker.current = void 0;
   };
   const clickMarker = (e, markerId) => {
@@ -29,12 +29,17 @@ const useAnnotationsHandlers = () => {
   const blurTrack = () => {
     currentHoveredTrack.current = void 0;
   };
+  const clearHovered = () => {
+    currentHoveredMarker.current = void 0;
+    currentHoveredTrack.current = void 0;
+  };
   return {
     hoverTrack,
     blurTrack,
     hoverMarker,
     blurMarker,
     clickMarker,
+    clearHovered,
     currentHoveredTrack,
     currentHoveredMarker
   };

package/esm/charts/core/components/annotations/hooks/useAnnotationsHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useAnnotationsHandlers.ts"],
-  "sourcesContent": ["import { useContext, useRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { MarkerEventHandlersContext } from '../contexts/MarkerEventHandlers.context.js';\nimport { TrackEventHandlersContext } from '../contexts/TrackEventHandlers.context.js';\n\nexport const useAnnotationsHandlers = () => {\n  const markerEventHandlers = useContext(MarkerEventHandlersContext);\n  const trackEventHandlers = useContext(TrackEventHandlersContext);\n\n  const currentHoveredTrack = useRef<number | undefined>(undefined);\n  const currentHoveredMarker = useRef<string | undefined>(undefined);\n\n  /**\n   * Hovers a marker, which will trigger:\n   * - onMouseEnter if it's the first time\n   * - onMouseMove if it was already hovered\n   *\n   * As a side effect the track will blur.\n   * If there was a marker previously hovered, it won't trigger mouseLeave and\n   * will trigger directly mouseEnter of the new marker\n   *\n   * @param e -\n   * @param markerId -\n   */\n  const hoverMarker = (e: ReactMouseEvent, markerId: string) => {\n    // if it's the first time that the marker is hovered\n    if (markerId !== currentHoveredMarker.current) {\n      currentHoveredMarker.current = markerId;\n      markerEventHandlers?.[markerId]?.onMouseEnter?.(e);\n\n      // when hovering a marker, the track is not hovered\n      blurTrack();\n    } else {\n      markerEventHandlers?.[markerId].onMouseMove?.(e);\n    }\n  };\n\n  /**\n   * Blurs a marker, which will trigger:\n   * - onMouseLeave\n   *\n   * @param e -\n   * @param markerId -\n   */\n  const blurMarker = (e: ReactMouseEvent, markerId: string) => {\n    markerEventHandlers?.[markerId]?.onMouseLeave?.(e);\n\n    currentHoveredMarker.current = undefined;\n  };\n\n  /**\n   * Clicks a marker, which will trigger:\n   * - onClick\n   *\n   * @param e -\n   * @param markerId -\n   */\n  const clickMarker = (e: ReactMouseEvent, markerId: string) => {\n    markerEventHandlers?.[markerId]?.onClick?.(e);\n  };\n\n  /**\n   * Hovers a track, which will trigger:\n   * - onMouseEnter\n   *\n   * @param e -\n   * @param trackIndex -\n   */\n  const hoverTrack = (e: ReactMouseEvent, trackIndex: number) => {\n    currentHoveredTrack.current = trackIndex;\n\n    trackEventHandlers?.[trackIndex]?.onMouseEnter?.(e);\n  };\n\n  /**\n   * Blurs a track, which won't trigger any event\n   */\n  const blurTrack = () => {\n    currentHoveredTrack.current = undefined;\n  };\n\n  return {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,YAAY,cAAkD;AAEvE,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAEnC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,sBAAsB,WAAW,0BAA0B;AACjE,QAAM,qBAAqB,WAAW,yBAAyB;AAE/D,QAAM,sBAAsB,OAA2B,MAAS;AAChE,QAAM,uBAAuB,OAA2B,MAAS;AAcjE,QAAM,cAAc,CAAC,GAAoB,aAAqB;AAE5D,QAAI,aAAa,qBAAqB,SAAS;AAC7C,2BAAqB,UAAU;AAC/B,4BAAsB,QAAQ,GAAG,eAAe,CAAC;AAGjD,gBAAU;AAAA,IACZ,OAAO;AACL,4BAAsB,QAAQ,EAAE,cAAc,CAAC;AAAA,IACjD;AAAA,EACF;AASA,QAAM,aAAa,CAAC,GAAoB,aAAqB;AAC3D,0BAAsB,QAAQ,GAAG,eAAe,CAAC;AAEjD,yBAAqB,UAAU;AAAA,EACjC;AASA,QAAM,cAAc,CAAC,GAAoB,aAAqB;AAC5D,0BAAsB,QAAQ,GAAG,UAAU,CAAC;AAAA,EAC9C;AASA,QAAM,aAAa,CAAC,GAAoB,eAAuB;AAC7D,wBAAoB,UAAU;AAE9B,yBAAqB,UAAU,GAAG,eAAe,CAAC;AAAA,EACpD;AAKA,QAAM,YAAY,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAChC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useContext, useRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { MarkerEventHandlersContext } from '../contexts/MarkerEventHandlers.context.js';\nimport { TrackEventHandlersContext } from '../contexts/TrackEventHandlers.context.js';\nimport type { MarkerClickCoords } from '../types/marker.js';\n\nexport const useAnnotationsHandlers = () => {\n  const markerEventHandlers = useContext(MarkerEventHandlersContext);\n  const trackEventHandlers = useContext(TrackEventHandlersContext);\n\n  const currentHoveredTrack = useRef<number | undefined>(undefined);\n  const currentHoveredMarker = useRef<string | undefined>(undefined);\n\n  /**\n   * Hovers a marker, which will trigger:\n   * - onMouseEnter if it's the first time\n   * - onMouseMove if it was already hovered\n   *\n   * As a side effect the track will blur.\n   * If there was a marker previously hovered, it won't trigger mouseLeave and\n   * will trigger directly mouseEnter of the new marker\n   *\n   * @param e -\n   * @param markerId -\n   */\n  const hoverMarker = (e: ReactMouseEvent, markerId: string) => {\n    // if it's the first time that the marker is hovered\n    if (markerId !== currentHoveredMarker.current) {\n      currentHoveredMarker.current = markerId;\n      markerEventHandlers?.[markerId]?.onMouseEnter?.(e);\n\n      // when hovering a marker, the track is not hovered\n      blurTrack();\n    } else {\n      markerEventHandlers?.[markerId].onMouseMove?.(e);\n    }\n  };\n\n  /**\n   * Blurs a marker, which will trigger:\n   * - onMouseLeave\n   *\n   * @param markerId -\n   */\n  const blurMarker = (markerId: string) => {\n    markerEventHandlers?.[markerId]?.onMouseLeave?.();\n\n    currentHoveredMarker.current = undefined;\n  };\n\n  /**\n   * Clicks a marker, which will trigger:\n   * - onClick\n   *\n   * @param e -\n   * @param markerId -\n   */\n  const clickMarker = (e: MarkerClickCoords, markerId: string) => {\n    markerEventHandlers?.[markerId]?.onClick?.(e);\n  };\n\n  /**\n   * Hovers a track, which will trigger:\n   * - onMouseEnter\n   *\n   * @param e -\n   * @param trackIndex -\n   */\n  const hoverTrack = (e: ReactMouseEvent, trackIndex: number) => {\n    currentHoveredTrack.current = trackIndex;\n\n    trackEventHandlers?.[trackIndex]?.onMouseEnter?.(e);\n  };\n\n  /**\n   * Blurs a track, which won't trigger any event\n   */\n  const blurTrack = () => {\n    currentHoveredTrack.current = undefined;\n  };\n\n  /**\n   * Clears the hovered marker and track refs without triggering any callbacks.\n   * Use when a pointer interaction ends without a corresponding blur (e.g. touch lift).\n   */\n  const clearHovered = () => {\n    currentHoveredMarker.current = undefined;\n    currentHoveredTrack.current = undefined;\n  };\n\n  return {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    clearHovered,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,YAAY,cAAkD;AAEvE,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAGnC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,sBAAsB,WAAW,0BAA0B;AACjE,QAAM,qBAAqB,WAAW,yBAAyB;AAE/D,QAAM,sBAAsB,OAA2B,MAAS;AAChE,QAAM,uBAAuB,OAA2B,MAAS;AAcjE,QAAM,cAAc,CAAC,GAAoB,aAAqB;AAE5D,QAAI,aAAa,qBAAqB,SAAS;AAC7C,2BAAqB,UAAU;AAC/B,4BAAsB,QAAQ,GAAG,eAAe,CAAC;AAGjD,gBAAU;AAAA,IACZ,OAAO;AACL,4BAAsB,QAAQ,EAAE,cAAc,CAAC;AAAA,IACjD;AAAA,EACF;AAQA,QAAM,aAAa,CAAC,aAAqB;AACvC,0BAAsB,QAAQ,GAAG,eAAe;AAEhD,yBAAqB,UAAU;AAAA,EACjC;AASA,QAAM,cAAc,CAAC,GAAsB,aAAqB;AAC9D,0BAAsB,QAAQ,GAAG,UAAU,CAAC;AAAA,EAC9C;AASA,QAAM,aAAa,CAAC,GAAoB,eAAuB;AAC7D,wBAAoB,UAAU;AAE9B,yBAAqB,UAAU,GAAG,eAAe,CAAC;AAAA,EACpD;AAKA,QAAM,YAAY,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAChC;AAMA,QAAM,eAAe,MAAM;AACzB,yBAAqB,UAAU;AAC/B,wBAAoB,UAAU;AAAA,EAChC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useGroupedAnnotationsData.js

@@ -1,12 +1,19 @@
 import { useMemo } from "react";
 import { processAnnotationTracksData } from "../utils/process-annotation-tracks-data.js";
-const useGroupedAnnotationsData = (tracks, domain) => useMemo(() => {
+const useGroupedAnnotationsData = (tracks, scale, textOverflow) => useMemo(() => {
+  const domain = scale?.domain();
   return tracks.map((track, index) => ({
-    markers: processAnnotationTracksData(track, index, domain),
+    markers: processAnnotationTracksData(
+      track,
+      index,
+      domain,
+      scale,
+      textOverflow
+    ),
     label: track.label,
     hidden: track.hidden
   }));
-}, [tracks]);
+}, [tracks, scale, textOverflow]);
 export {
   useGroupedAnnotationsData
 };

package/esm/charts/core/components/annotations/hooks/useGroupedAnnotationsData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useGroupedAnnotationsData.ts"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport { processAnnotationTracksData } from '../utils/process-annotation-tracks-data.js';\n\n/**\n *\n * @param tracks -\n * @param domain -\n * @returns\n */\nexport const useGroupedAnnotationsData = (\n  tracks: AnnotationsTrackConfig[],\n  domain?: Date[] | number[],\n) =>\n  useMemo(() => {\n    return tracks.map((track, index) => ({\n      markers: processAnnotationTracksData(track, index, domain),\n      label: track.label,\n      hidden: track.hidden,\n    }));\n  }, [tracks]);\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAGxB,SAAS,mCAAmC;AAQrC,MAAM,4BAA4B,CACvC,QACA,WAEA,QAAQ,MAAM;AACZ,SAAO,OAAO,IAAI,CAAC,OAAO,WAAW;AAAA,IACnC,SAAS,4BAA4B,OAAO,OAAO,MAAM;AAAA,IACzD,OAAO,MAAM;AAAA,IACb,QAAQ,MAAM;AAAA,EAChB,EAAE;AACJ,GAAG,CAAC,MAAM,CAAC;",
+  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { type AnnotationsScale } from '../utils/calculate-marker-dimension.js';\nimport { processAnnotationTracksData } from '../utils/process-annotation-tracks-data.js';\n\n/**\n *\n * @param tracks -\n * @param scale - used to derive the visible domain and to detect markers that\n * visually collide on canvas so they can be grouped into a shared tooltip\n * @param textOverflow - how range marker labels behave when they overflow\n * used together with `scale`\n * @returns\n */\nexport const useGroupedAnnotationsData = (\n  tracks: AnnotationsTrackConfig[],\n  scale?: AnnotationsScale,\n  textOverflow?: TextOverflowOptions,\n) =>\n  useMemo(() => {\n    const domain = scale?.domain();\n    return tracks.map((track, index) => ({\n      markers: processAnnotationTracksData(\n        track,\n        index,\n        domain,\n        scale,\n        textOverflow,\n      ),\n      label: track.label,\n      hidden: track.hidden,\n    }));\n  }, [tracks, scale, textOverflow]);\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAKxB,SAAS,mCAAmC;AAWrC,MAAM,4BAA4B,CACvC,QACA,OACA,iBAEA,QAAQ,MAAM;AACZ,QAAM,SAAS,OAAO,OAAO;AAC7B,SAAO,OAAO,IAAI,CAAC,OAAO,WAAW;AAAA,IACnC,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO,MAAM;AAAA,IACb,QAAQ,MAAM;AAAA,EAChB,EAAE;AACJ,GAAG,CAAC,QAAQ,OAAO,YAAY,CAAC;",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useMarkerEventHandlers.js

@@ -5,6 +5,7 @@ import {
   useSetStateTooltip
 } from "./store/state-setters.js";
 import { useMarkersInteractions } from "./useMarkersInteractions.js";
+import { isTouchableDevice } from "../../../utils/is-touchable-device.js";
 import { initialState } from "../providers/AnnotationsDataInitialState.js";
 import { calculateTooltipPosition } from "../utils/calculate-tooltip-position.js";
 const useMarkerEventHandlers = (annotationsContainerRef) => {
@@ -52,25 +53,31 @@ const useMarkerEventHandlers = (annotationsContainerRef) => {
     updateTooltipSelection(selectionState);
     onMarkersInteraction?.(selectionState);
   };
-  const handleClick = (groupId, annotationsGroup) => (event) => {
-    event.stopPropagation();
-    const { clientX, clientY } = event;
+  const applyPinToggle = (clientX, clientY, groupId, annotationsGroup) => {
+    if (isTooltipPinned && isTouchableDevice()) {
+      updateTooltipState(initialState.tooltip);
+      updateTooltipSelection(initialState.selection);
+      onMarkersInteraction?.(initialState.selection);
+      return;
+    }
     const newSelection = {
       hoveredGroup: groupId,
       data: annotationsGroup,
       pinnedGroup: isTooltipPinned ? void 0 : groupId
-      // if tooltip was already pinned, unpin
     };
     updateTooltipState({
       position: calculateTooltipPosition(clientX, clientY),
       data: annotationsGroup,
       visibility: true,
       pinned: !isTooltipPinned
-      // if tooltip was already pinned, show updated info but unpin
     });
     updateTooltipSelection(newSelection);
     onMarkersInteraction?.(newSelection);
   };
+  const handleClick = (groupId, annotationsGroup) => (event) => {
+    event.stopPropagation();
+    applyPinToggle(event.clientX, event.clientY, groupId, annotationsGroup);
+  };
   const handleMouseLeave = () => {
     if (isTooltipPinned) {
       return;