@dynatrace/strato-components 3.8.0 → 3.9.0

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

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

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

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

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

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

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

@@ -6,11 +6,13 @@ import { AnnotationsConfigContext } from "../../contexts/AnnotationsConfig.conte
 import { useOverlayEvents } from "../../hooks/useOverlayEvents.js";
 const AnnotationsOverlays = ({ height }) => {
   const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);
-  const { handleMouseMove, handleMouseLeave, handleClick } = useOverlayEvents();
+  const { handleMouseMove, handlePointerLeave, handleTouchEnd, handleClick } = useOverlayEvents();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseLeave: handleMouseLeave,
+      "aria-hidden": "true",
+      onPointerLeave: handlePointerLeave,
+      onTouchEnd: handleTouchEnd,
       onMouseMove: handleMouseMove,
       onClick: handleClick,
       className: annotationsOverlay,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\n\nimport { annotationsOverlay } from './AnnotationsOverlays.sty.js';\nimport { MARGIN_TOP_STROKE } from '../../constants.js';\nimport { AnnotationsConfigContext } from '../../contexts/AnnotationsConfig.context.js';\nimport { useOverlayEvents } from '../../hooks/useOverlayEvents.js';\n\nexport type AnnotationsOverlaysProps = {\n  height: number;\n};\n\nexport const AnnotationsOverlays = ({ height }: AnnotationsOverlaysProps) => {\n  const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);\n\n  const { handleMouseMove, handleMouseLeave, handleClick } = useOverlayEvents();\n\n  return (\n    <div\n      onMouseLeave={handleMouseLeave}\n      onMouseMove={handleMouseMove}\n      onClick={handleClick}\n      className={annotationsOverlay}\n      style={{\n        height,\n        width: trackWidth,\n        left: labelsWidth,\n        top: MARGIN_TOP_STROKE,\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAiBI;AAjBJ,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAM1B,MAAM,sBAAsB,CAAC,EAAE,OAAO,MAAgC;AAC3E,QAAM,EAAE,aAAa,WAAW,IAAI,WAAW,wBAAwB;AAEvE,QAAM,EAAE,iBAAiB,kBAAkB,YAAY,IAAI,iBAAiB;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { annotationsOverlay } from './AnnotationsOverlays.sty.js';\nimport { MARGIN_TOP_STROKE } from '../../constants.js';\nimport { AnnotationsConfigContext } from '../../contexts/AnnotationsConfig.context.js';\nimport { useOverlayEvents } from '../../hooks/useOverlayEvents.js';\n\nexport type AnnotationsOverlaysProps = {\n  height: number;\n};\n\nexport const AnnotationsOverlays = ({ height }: AnnotationsOverlaysProps) => {\n  const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);\n\n  const { handleMouseMove, handlePointerLeave, handleTouchEnd, handleClick } =\n    useOverlayEvents();\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      onPointerLeave={handlePointerLeave}\n      onTouchEnd={handleTouchEnd}\n      onMouseMove={handleMouseMove}\n      onClick={handleClick}\n      className={annotationsOverlay}\n      style={{\n        height,\n        width: trackWidth,\n        left: labelsWidth,\n        top: MARGIN_TOP_STROKE,\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAkBI;AAlBJ,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAM1B,MAAM,sBAAsB,CAAC,EAAE,OAAO,MAAgC;AAC3E,QAAM,EAAE,aAAa,WAAW,IAAI,WAAW,wBAAwB;AAEvE,QAAM,EAAE,iBAAiB,oBAAoB,gBAAgB,YAAY,IACvE,iBAAiB;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

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

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

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

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

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

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

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

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

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

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": []
 }