@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } 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 { 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";
+import { ExternalConfigContext } from "../../../overlay-tooltip/contexts/ExternalConfigContext.js";
+import { OVERLAY_TOOLTIP_MESSAGES } from "../../../overlay-tooltip/messages.js";
+import { useSelector } from "../../../overlay-tooltip/selectors.js";
+import {
+  annotationsGroupsScrollContainer,
+  divider,
+  seriesGridContainer
+} from "../../../overlay-tooltip/tooltip.sty.js";
+import { useAnnotationsActions } from "../../hooks/useAnnotationsActions.js";
+import { deserializeMarkerRange } from "../../utils/serialize-marker-range.js";
+const BASE_ACTIONS_CONFIG = /* @__PURE__ */ new Map([
+  ["name", { field: "valueLabel" }]
+]);
+const buildExternalConfig = (truncationMode) => ({
+  seriesHeader: null,
+  displayHeaderDivider: false,
+  symbolPosition: "left",
+  symbolVerticalAlignment: "start",
+  truncationMode,
+  defaultActionsConfig: BASE_ACTIONS_CONFIG,
+  variant: "single"
+});
+const X_VALUE_LABEL = "X-value";
+const AnnotationsDefaultTooltipContent = (props) => {
+  const { data, tooltipType, truncationMode, maxLines } = props;
+  const formatter = useAnnotationsTooltipFormatter();
+  const annotationsActions = useAnnotationsActions();
+  const config = buildExternalConfig(truncationMode);
+  const intl = useIntl();
+  const unpinnedPlaceholderText = intl.formatMessage(
+    OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage
+  );
+  const pinned = useSelector((state) => state.pinned);
+  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: 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);
+    }) }),
+    !pinned && /* @__PURE__ */ jsx(
+      Footer,
+      {
+        actions: [],
+        unpinnedPlaceholderText
+      }
+    )
+  ] });
+};
+AnnotationsDefaultTooltipContent.displayName = "AnnotationsDefaultTooltipContent";
+export {
+  AnnotationsDefaultTooltipContent
+};
+//# sourceMappingURL=AnnotationsDefaultTooltipContent.js.map

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

@@ -0,0 +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": "AA2GY,SAEI,KAFJ;AA3GZ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAE3B,SAAS,sCAAsC;AAC/C,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AAExB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,6BAA6B;AAKtC,SAAS,8BAA8B;AAEvC,MAAM,sBAA8D,oBAAI,IAAI;AAAA,EAC1E,CAAC,QAAQ,EAAE,OAAO,aAAa,CAAC;AAClC,CAAC;AAED,MAAM,sBAAsB,CAC1B,oBACoB;AAAA,EACpB,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,EACzB;AAAA,EACA,sBAAsB;AAAA,EACtB,SAAS;AACX;AASA,MAAM,gBAAgB;AASf,MAAM,mCAAmC,CAC9C,UACG;AACH,QAAM,EAAE,MAAM,aAAa,gBAAgB,SAAS,IAAI;AACxD,QAAM,YAAY,+BAA+B;AACjD,QAAM,qBAAqB,sBAAsB;AACjD,QAAM,SAAS,oBAAoB,cAAc;AACjD,QAAM,OAAO,QAAQ;AACrB,QAAM,0BAA0B,KAAK;AAAA,IACnC,yBAAyB;AAAA,EAC3B;AAEA,QAAM,SAAS,YAAY,CAAC,UAAU,MAAM,MAAM;AAElD,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAAO,QACrC;AAAA,wBAAC,SAAI,WAAW,kCACb,eAAK,IAAI,CAAC,iBAAiB,eAAe;AACzC,YAAM,CAAC,MAAM,EAAE,IAAI,uBAAuB,gBAAgB,GAAG;AAC7D,YAAM,UAAU,KAAK;AAErB,UAAI;AACJ,UAAI,oBAAoB;AACxB,UAAI;AAEJ,UAAI,gBAAgB,eAAe,SAAS;AAC1C,kBAAU,CAAC,UAAU,IAAI,GAAG,UAAU,EAAE,CAAC;AACzC,mBAAW,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC;AAAA,MACvC,WAAW,gBAAgB,aAAa;AACtC,kBAAU,UAAU,IAAI;AAAA,MAC1B,WAAW,SAAS;AAClB,kBAAU,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;AACvC,4BAAoB;AAAA,MACtB,OAAO;AACL,kBAAU,WAAW,IAAI,KAAK,IAAI,GAAG;AAAA,UACnC,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAEA,aACE,qBAAC,YACE;AAAA,qBAAa,KACZ,oBAAC,WAAQ,aAAY,cAAa,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,oBAAoB;AAAA,YACpB,WAAW;AAAA,YACX;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,SAAI,WAAW,qBACb,0BAAgB,QAAQ,IAAI,CAAC,WAAW;AACvC,gBAAM,cAAc,+BAA+B,MAAM;AACzD,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR,GAAG;AAAA,UACL,IAAI;AACJ,gBAAM,UAAqC;AAAA,YACzC,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,aAAa;AAAA,YACb;AAAA,UACF;AACA,gBAAM,UAAU,qBAAqB,OAAO;AAC5C,gBAAM,kBACJ,WAAW,IACN,EAAE,WAAW,KAAK,IAClB,EAAE,WAAW,OAAO,SAAS;AAEpC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,eAAe;AAAA,cACrB,aAAa;AAAA,cACb,OAAM;AAAA,cACL,GAAG;AAAA,cACH,GAAG;AAAA,cACJ,SAAS,UAAU,MAAM,UAAU;AAAA;AAAA,YAN9B;AAAA,UAOP;AAAA,QAEJ,CAAC,GACH;AAAA,WApDa,gBAAgB,GAqD/B;AAAA,IAEJ,CAAC,GACH;AAAA,IACC,CAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,CAAC;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEA,iCAAiC,cAC/B;",
+  "names": []
+}

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

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { AnnotationsCustomizedTooltip } from "./AnnotationsCustomizedTooltip.js";
+import { AnnotationsDefaultTooltipContent } from "./AnnotationsDefaultTooltipContent.js";
+import { useAnnotationsTooltipConfig } from "./hooks/useAnnotationsTooltipConfig.js";
+import { OverlayTooltip } from "../../../overlay-tooltip/OverlayTooltip.js";
+import { useTooltipReducer } from "../../../overlay-tooltip/useTooltipReducer.js";
+import { emptyData } from "../../../overlay-tooltip/utils.js";
+import { useAnnotationsTooltipState } from "../../hooks/store/selectors.js";
+import {
+  useSetStateSelection,
+  useSetStateTooltip
+} from "../../hooks/store/state-setters.js";
+import { useMarkersInteractions } from "../../hooks/useMarkersInteractions.js";
+import { initialState } from "../../providers/AnnotationsDataInitialState.js";
+const buildSentinelData = () => ({
+  geometry: "rect",
+  series: [
+    {
+      name: "",
+      value: "",
+      color: ""
+    }
+  ]
+});
+const AnnotationsOverlayTooltip = (props) => {
+  const { tooltipType, truncationMode = "end", maxLines = 1 } = props;
+  const annotationsState = useAnnotationsTooltipState();
+  const { pinned, data, visibility, position } = annotationsState;
+  const dispatch = useTooltipReducer();
+  const updateAnnotationsTooltipState = useSetStateTooltip();
+  const updateAnnotationsSelectionState = useSetStateSelection();
+  const onMarkersInteraction = useMarkersInteractions();
+  const config = useAnnotationsTooltipConfig();
+  const hidden = config?.hidden === true;
+  const hasData = !!data && data.length > 0 && visibility;
+  const prevPinnedRef = useRef(false);
+  useEffect(() => {
+    const wasPinned = prevPinnedRef.current;
+    prevPinnedRef.current = pinned;
+    if (wasPinned && !pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: false,
+          data: emptyData()
+        }
+      })();
+    }
+    if (hidden || !hasData || !position) {
+      dispatch({ type: "SET_OUT_BOUNDS" })();
+      return;
+    }
+    if (pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: true,
+          absoluteX: position.x,
+          absoluteY: position.y,
+          data: buildSentinelData()
+        }
+      })();
+    } else {
+      dispatch({
+        type: "SET_POSITION",
+        payload: {
+          absoluteX: position.x,
+          absoluteY: position.y,
+          data: buildSentinelData()
+        }
+      })();
+    }
+  }, [hidden, hasData, pinned, position?.x, position?.y]);
+  useEffect(() => {
+    return () => {
+      dispatch({ type: "RESET_TOOLTIP" })();
+      updateAnnotationsTooltipState(initialState.tooltip);
+      updateAnnotationsSelectionState(initialState.selection);
+      onMarkersInteraction?.(initialState.selection);
+    };
+  }, []);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      updateAnnotationsTooltipState(initialState.tooltip);
+      updateAnnotationsSelectionState(initialState.selection);
+      onMarkersInteraction?.(initialState.selection);
+    };
+    window.addEventListener("keyup", handleEscape);
+    return () => {
+      window.removeEventListener("keyup", handleEscape);
+    };
+  }, []);
+  if (hidden || !hasData) {
+    return null;
+  }
+  const legacyTemplate = config?.template ? /* @__PURE__ */ jsx(
+    AnnotationsCustomizedTooltip,
+    {
+      tooltipTemplate: config.template,
+      data
+    }
+  ) : /* @__PURE__ */ jsx(
+    AnnotationsDefaultTooltipContent,
+    {
+      data,
+      tooltipType,
+      truncationMode,
+      maxLines
+    }
+  );
+  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate });
+};
+AnnotationsOverlayTooltip.displayName = "AnnotationsOverlayTooltip";
+export {
+  AnnotationsOverlayTooltip
+};
+//# sourceMappingURL=AnnotationsOverlayTooltip.js.map

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

@@ -0,0 +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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",
+  "names": []
+}

package/esm/charts/core/components/annotations/components/tooltip/utils/get-symbol.js

@@ -14,7 +14,21 @@ function getSymbol(marker) {
   }
   return isRangeMarker(marker) ? /* @__PURE__ */ jsx(MultiDataPointShape, { color }) : /* @__PURE__ */ jsx(SingleDataPointShape, { color });
 }
+function getAnnotationSeriesSymbolProps(marker) {
+  const { color, symbol } = marker;
+  if (symbol !== void 0 && symbol !== null) {
+    if (isNumber(symbol) || isString(symbol)) {
+      return { symbol: sanitizeSymbol(`${symbol}`) };
+    }
+    return { icon: symbol };
+  }
+  return {
+    color,
+    shape: "circle"
+  };
+}
 export {
+  getAnnotationSeriesSymbolProps,
   getSymbol
 };
 //# sourceMappingURL=get-symbol.js.map

package/esm/charts/core/components/annotations/components/tooltip/utils/get-symbol.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/tooltip/utils/get-symbol.tsx"],
-  "sourcesContent": ["import { isNumber, isString } from 'lodash-es';\n\nimport { _sanitizeSymbol as sanitizeSymbol } from '../../../../../../../core/utils/sanitize-symbol.js';\nimport { MultiDataPointShape } from '../../../../shape/MultiDataPointShape.js';\nimport { SingleDataPointShape } from '../../../../shape/SingleDataPointShape.js';\nimport { AnnotationsMarkerConfig } from '../../../types/annotations-marker-props.js';\nimport { isRangeMarker } from '../../../utils/is-range-marker.js';\n\nexport function getSymbol(marker: AnnotationsMarkerConfig) {\n  const { color, symbol } = marker;\n\n  if (symbol) {\n    if (isNumber(symbol) || isString(symbol)) {\n      return sanitizeSymbol(`${symbol}`);\n    }\n\n    return symbol;\n  }\n\n  return isRangeMarker(marker) ? (\n    <MultiDataPointShape color={color} />\n  ) : (\n    <SingleDataPointShape color={color} />\n  );\n}\n"],
-  "mappings": "AAoBI;AApBJ,SAAS,UAAU,gBAAgB;AAEnC,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAEvB,SAAS,UAAU,QAAiC;AACzD,QAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,MAAI,QAAQ;AACV,QAAI,SAAS,MAAM,KAAK,SAAS,MAAM,GAAG;AACxC,aAAO,eAAe,GAAG,MAAM,EAAE;AAAA,IACnC;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,cAAc,MAAM,IACzB,oBAAC,uBAAoB,OAAc,IAEnC,oBAAC,wBAAqB,OAAc;AAExC;",
+  "sourcesContent": ["import { isNumber, isString } from 'lodash-es';\nimport type { JSX } from 'react';\n\nimport { _sanitizeSymbol as sanitizeSymbol } from '../../../../../../../core/utils/sanitize-symbol.js';\nimport { MultiDataPointShape } from '../../../../shape/MultiDataPointShape.js';\nimport { SingleDataPointShape } from '../../../../shape/SingleDataPointShape.js';\nimport type { VariantShape } from '../../../../shape/type.js';\nimport { AnnotationsMarkerConfig } from '../../../types/annotations-marker-props.js';\nimport { isRangeMarker } from '../../../utils/is-range-marker.js';\n\ntype AnnotationSeriesSymbolProps =\n  | {\n      color: string;\n      shape: VariantShape;\n      icon?: never;\n      symbol?: never;\n    }\n  | {\n      symbol: string;\n      color?: never;\n      shape?: never;\n      icon?: never;\n    }\n  | {\n      icon: JSX.Element;\n      color?: never;\n      shape?: never;\n      symbol?: never;\n    };\n\nexport function getSymbol(marker: AnnotationsMarkerConfig) {\n  const { color, symbol } = marker;\n\n  if (symbol) {\n    if (isNumber(symbol) || isString(symbol)) {\n      return sanitizeSymbol(`${symbol}`);\n    }\n\n    return symbol;\n  }\n\n  return isRangeMarker(marker) ? (\n    <MultiDataPointShape color={color} />\n  ) : (\n    <SingleDataPointShape color={color} />\n  );\n}\n\n/**\n * Returns the correct props for SeriesItem/SeriesSymbol for an annotation marker.\n *\n * Built-in markers (no custom symbol) go through the `color + shape` path in\n * SeriesSymbol so they render as a proper circle via ShapeIcon, not as a\n * customSymbol pill wrapper.\n *\n * Custom emoji/text symbols \u2192 `symbol` prop (rendered as text in customSymbol span).\n * Custom React element symbols \u2192 `icon` prop (rendered in customSymbol span).\n *\n * @internal\n */\nexport function getAnnotationSeriesSymbolProps(\n  marker: AnnotationsMarkerConfig,\n): AnnotationSeriesSymbolProps {\n  const { color, symbol } = marker;\n\n  if (symbol !== undefined && symbol !== null) {\n    if (isNumber(symbol) || isString(symbol)) {\n      return { symbol: sanitizeSymbol(`${symbol}`) };\n    }\n    // React element\n    return { icon: symbol as JSX.Element };\n  }\n\n  // Built-in: use color + circle shape so SeriesSymbol renders via ShapeIcon.\n  return {\n    color,\n    shape: 'circle',\n  };\n}\n"],
+  "mappings": "AA0CI;AA1CJ,SAAS,UAAU,gBAAgB;AAGnC,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAGrC,SAAS,qBAAqB;AAsBvB,SAAS,UAAU,QAAiC;AACzD,QAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,MAAI,QAAQ;AACV,QAAI,SAAS,MAAM,KAAK,SAAS,MAAM,GAAG;AACxC,aAAO,eAAe,GAAG,MAAM,EAAE;AAAA,IACnC;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,cAAc,MAAM,IACzB,oBAAC,uBAAoB,OAAc,IAEnC,oBAAC,wBAAqB,OAAc;AAExC;AAcO,SAAS,+BACd,QAC6B;AAC7B,QAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,MAAI,WAAW,UAAa,WAAW,MAAM;AAC3C,QAAI,SAAS,MAAM,KAAK,SAAS,MAAM,GAAG;AACxC,aAAO,EAAE,QAAQ,eAAe,GAAG,MAAM,EAAE,EAAE;AAAA,IAC/C;AAEA,WAAO,EAAE,MAAM,OAAsB;AAAA,EACvC;AAGA,SAAO;AAAA,IACL;AAAA,IACA,OAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/tooltip/utils/prepare-custom-tooltip-data.js

@@ -1,13 +1,6 @@
 const extractTooltipMarkerProps = (marker) => {
-  const { start, end, color, title, description, symbol } = marker;
-  return {
-    start,
-    end,
-    color,
-    title,
-    description,
-    symbol
-  };
+  const { id: _id, priority: _priority, hidden: _hidden, ...rest } = marker;
+  return rest;
 };
 const prepareCustomTooltipData = (data, hoveredItemKey) => {
   let hoveredMarkers = [];
@@ -15,9 +8,13 @@ const prepareCustomTooltipData = (data, hoveredItemKey) => {
   data?.forEach((annotationGroup) => {
     const { key, markers } = annotationGroup;
     if (key === hoveredItemKey) {
-      hoveredMarkers = markers.map(extractTooltipMarkerProps);
+      hoveredMarkers = markers.map(
+        (marker) => extractTooltipMarkerProps(marker)
+      );
     } else {
-      const closeMarkerGroup = markers.map(extractTooltipMarkerProps);
+      const closeMarkerGroup = markers.map(
+        (marker) => extractTooltipMarkerProps(marker)
+      );
       closeMarkers.push(closeMarkerGroup);
     }
   });

package/esm/charts/core/components/annotations/components/tooltip/utils/prepare-custom-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/tooltip/utils/prepare-custom-tooltip-data.ts"],
-  "sourcesContent": ["import type { AnnotationsMarkerConfig } from '../../../types/annotations-marker-props.js';\nimport { AnnotationsMarkerGroup } from '../../../types/annotations.js';\nimport { AnnotationsTooltipItem } from '../types/annotations-tooltip-props.js';\n\ninterface TooltipHandlerData {\n  hoveredMarkers: AnnotationsTooltipItem[];\n  closeMarkers: AnnotationsTooltipItem[][];\n}\n\n/**\n * Extracts all relevant marker props for tooltip payload\n * @param marker -\n */\nconst extractTooltipMarkerProps = (marker: AnnotationsMarkerConfig) => {\n  const { start, end, color, title, description, symbol } = marker;\n\n  return {\n    start,\n    end,\n    color,\n    title,\n    description,\n    symbol,\n  };\n};\n\nexport const prepareCustomTooltipData = (\n  data: AnnotationsMarkerGroup[],\n  hoveredItemKey: string,\n): TooltipHandlerData => {\n  let hoveredMarkers: AnnotationsTooltipItem[] = [];\n  const closeMarkers: AnnotationsTooltipItem[][] = [];\n\n  data?.forEach((annotationGroup) => {\n    const { key, markers } = annotationGroup;\n\n    if (key === hoveredItemKey) {\n      hoveredMarkers = markers.map(extractTooltipMarkerProps);\n    } else {\n      const closeMarkerGroup = markers.map(extractTooltipMarkerProps);\n\n      closeMarkers.push(closeMarkerGroup);\n    }\n  });\n\n  return {\n    hoveredMarkers,\n    closeMarkers,\n  };\n};\n"],
-  "mappings": "AAaA,MAAM,4BAA4B,CAAC,WAAoC;AACrE,QAAM,EAAE,OAAO,KAAK,OAAO,OAAO,aAAa,OAAO,IAAI;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B,CACtC,MACA,mBACuB;AACvB,MAAI,iBAA2C,CAAC;AAChD,QAAM,eAA2C,CAAC;AAElD,QAAM,QAAQ,CAAC,oBAAoB;AACjC,UAAM,EAAE,KAAK,QAAQ,IAAI;AAEzB,QAAI,QAAQ,gBAAgB;AAC1B,uBAAiB,QAAQ,IAAI,yBAAyB;AAAA,IACxD,OAAO;AACL,YAAM,mBAAmB,QAAQ,IAAI,yBAAyB;AAE9D,mBAAa,KAAK,gBAAgB;AAAA,IACpC;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { AnnotationsMarkerConfig } from '../../../types/annotations-marker-props.js';\nimport { AnnotationsMarkerGroup } from '../../../types/annotations.js';\nimport { AnnotationsTooltipItem } from '../types/annotations-tooltip-props.js';\n\ninterface TooltipHandlerData {\n  hoveredMarkers: AnnotationsTooltipItem[];\n  closeMarkers: AnnotationsTooltipItem[][];\n}\n\n/**\n * Builds a public tooltip item from a marker config by stripping the\n * internal-only fields (`id`, `priority`, `hidden`) and forwarding\n * everything else (including any user-supplied metadata) via `...rest`.\n */\nconst extractTooltipMarkerProps = (\n  marker: AnnotationsMarkerConfig,\n): AnnotationsTooltipItem => {\n  const { id: _id, priority: _priority, hidden: _hidden, ...rest } = marker;\n\n  return rest;\n};\n\nexport const prepareCustomTooltipData = (\n  data: AnnotationsMarkerGroup[],\n  hoveredItemKey: string,\n): TooltipHandlerData => {\n  let hoveredMarkers: AnnotationsTooltipItem[] = [];\n  const closeMarkers: AnnotationsTooltipItem[][] = [];\n\n  data?.forEach((annotationGroup) => {\n    const { key, markers } = annotationGroup;\n\n    if (key === hoveredItemKey) {\n      hoveredMarkers = markers.map((marker) =>\n        extractTooltipMarkerProps(marker),\n      );\n    } else {\n      const closeMarkerGroup = markers.map((marker) =>\n        extractTooltipMarkerProps(marker),\n      );\n\n      closeMarkers.push(closeMarkerGroup);\n    }\n  });\n\n  return {\n    hoveredMarkers,\n    closeMarkers,\n  };\n};\n"],
+  "mappings": "AAcA,MAAM,4BAA4B,CAChC,WAC2B;AAC3B,QAAM,EAAE,IAAI,KAAK,UAAU,WAAW,QAAQ,SAAS,GAAG,KAAK,IAAI;AAEnE,SAAO;AACT;AAEO,MAAM,2BAA2B,CACtC,MACA,mBACuB;AACvB,MAAI,iBAA2C,CAAC;AAChD,QAAM,eAA2C,CAAC;AAElD,QAAM,QAAQ,CAAC,oBAAoB;AACjC,UAAM,EAAE,KAAK,QAAQ,IAAI;AAEzB,QAAI,QAAQ,gBAAgB;AAC1B,uBAAiB,QAAQ;AAAA,QAAI,CAAC,WAC5B,0BAA0B,MAAM;AAAA,MAClC;AAAA,IACF,OAAO;AACL,YAAM,mBAAmB,QAAQ;AAAA,QAAI,CAAC,WACpC,0BAA0B,MAAM;AAAA,MAClC;AAEA,mBAAa,KAAK,gBAAgB;AAAA,IACpC;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -31,6 +31,7 @@ const DEFAULT_TOOLTIP_Y_OFFSET = 40;
 const DEFAULT_SHOW_LABELS = true;
 const DEFAULT_TEXT_OVERFLOW = "truncate";
 const DEFAULT_TRUNCATION_MODE = "middle";
+const DEFAULT_TOOLTIP_MAX_LINES = 1;
 const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 var TestIds = /* @__PURE__ */ ((TestIds2) => {
   TestIds2["Marker"] = "marker";
@@ -55,6 +56,7 @@ export {
   DEFAULT_MARKER_PRIORITY,
   DEFAULT_SHOW_LABELS,
   DEFAULT_TEXT_OVERFLOW,
+  DEFAULT_TOOLTIP_MAX_LINES,
   DEFAULT_TOOLTIP_Y_OFFSET,
   DEFAULT_TRACK_HIDDEN,
   DEFAULT_TRUNCATION_MODE,

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_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,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 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;",
   "names": ["TestIds"]
 }

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

@@ -1,7 +1,15 @@
+import { isUndefined } from "lodash-es";
 import { useContext } from "react";
+import { useAnnotationsSelectionState } from "./store/selectors.js";
+import {
+  useSetStateSelection,
+  useSetStateTooltip
+} from "./store/state-setters.js";
 import { useAnnotationsHandlers } from "./useAnnotationsHandlers.js";
+import { useMarkersInteractions } from "./useMarkersInteractions.js";
 import { TRACK_HEIGHT } from "../constants.js";
 import { MarkerCoordinatesContext } from "../contexts/MarkerCoordinates.context.js";
+import { initialState } from "../providers/AnnotationsDataInitialState.js";
 import { inMarkerBounds } from "../utils/in-marker-bounds.js";
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);
@@ -14,6 +22,10 @@ const useOverlayEvents = () => {
     currentHoveredTrack,
     currentHoveredMarker
   } = useAnnotationsHandlers();
+  const { pinnedGroup } = useAnnotationsSelectionState();
+  const updateTooltipState = useSetStateTooltip();
+  const updateTooltipSelection = useSetStateSelection();
+  const onMarkersInteraction = useMarkersInteractions();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -49,6 +61,12 @@ const useOverlayEvents = () => {
   const handleClick = (e) => {
     if (currentHoveredMarker.current !== void 0) {
       clickMarker(e, currentHoveredMarker.current);
+      return;
+    }
+    if (!isUndefined(pinnedGroup)) {
+      updateTooltipState(initialState.tooltip);
+      updateTooltipSelection(initialState.selection);
+      onMarkersInteraction?.(initialState.selection);
     }
   };
   const handleMouseLeave = (e) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useOverlayEvents.ts"],
-  "sourcesContent": ["import { useContext, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(e, currentHoveredMarker.current);\n\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  const handleMouseLeave = (e: ReactMouseEvent) => {\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleMouseLeave,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,kBAAsD;AAE/D,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,MAAM;AACpC,QAAM,uBAAuB,WAAW,wBAAwB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,kBAAkB,CAAC,MAAuB;AAC9C,UAAM,EAAE,SAAS,SAAS,cAAc,IAAI;AAC5C,UAAM,EAAE,KAAK,KAAK,IAAK,cAA0B,sBAAsB;AAEvE,UAAM,gBAAgB;AAAA,MACpB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,IACf;AAEA,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AAEvE,QAAI,eAAe,oBAAoB,SAAS;AAC9C,iBAAW,GAAG,UAAU;AAAA,IAC1B;AAEA,QAAI,yBAAyB,QAAW;AACtC,UAAI,mBAAmB;AAEvB,UAAI,cAAc,qBAAqB,QAAQ;AAC7C,qBAAa,qBAAqB,SAAS;AAAA,MAC7C;AAEA,YAAM,eAAe,qBAAqB,UAAU;AAGpD,eACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,cAAM,SAAS,aAAa,WAAW;AAEvC,YAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,gBAAM,WAAW,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAElD,sBAAY,GAAG,QAAQ;AAEvB,6BAAmB;AACnB;AAAA,QACF;AAAA,MACF;AAGA,UAAI,CAAC,oBAAoB,qBAAqB,YAAY,QAAW;AACnE,mBAAW,GAAG,qBAAqB,OAAO;AAG1C,mBAAW,GAAG,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAuB;AAC1C,QAAI,qBAAqB,YAAY,QAAW;AAC9C,kBAAY,GAAG,qBAAqB,OAAO;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,MAAuB;AAC/C,QAAI,oBAAoB,YAAY,QAAW;AAC7C,gBAAU;AAAA,IACZ;AAEA,QAAI,qBAAqB,YAAY,QAAW;AAC9C,iBAAW,GAAG,qBAAqB,OAAO;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useContext, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(e, currentHoveredMarker.current);\n\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n      return;\n    }\n\n    if (!isUndefined(pinnedGroup)) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    }\n  };\n\n  const handleMouseLeave = (e: ReactMouseEvent) => {\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleMouseLeave,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,kBAAsD;AAE/D,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,MAAM;AACpC,QAAM,uBAAuB,WAAW,wBAAwB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AACpD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,MAAuB;AAC9C,UAAM,EAAE,SAAS,SAAS,cAAc,IAAI;AAC5C,UAAM,EAAE,KAAK,KAAK,IAAK,cAA0B,sBAAsB;AAEvE,UAAM,gBAAgB;AAAA,MACpB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,IACf;AAEA,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AAEvE,QAAI,eAAe,oBAAoB,SAAS;AAC9C,iBAAW,GAAG,UAAU;AAAA,IAC1B;AAEA,QAAI,yBAAyB,QAAW;AACtC,UAAI,mBAAmB;AAEvB,UAAI,cAAc,qBAAqB,QAAQ;AAC7C,qBAAa,qBAAqB,SAAS;AAAA,MAC7C;AAEA,YAAM,eAAe,qBAAqB,UAAU;AAGpD,eACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,cAAM,SAAS,aAAa,WAAW;AAEvC,YAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,gBAAM,WAAW,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAElD,sBAAY,GAAG,QAAQ;AAEvB,6BAAmB;AACnB;AAAA,QACF;AAAA,MACF;AAGA,UAAI,CAAC,oBAAoB,qBAAqB,YAAY,QAAW;AACnE,mBAAW,GAAG,qBAAqB,OAAO;AAG1C,mBAAW,GAAG,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAuB;AAC1C,QAAI,qBAAqB,YAAY,QAAW;AAC9C,kBAAY,GAAG,qBAAqB,OAAO;AAC3C;AAAA,IACF;AAEA,QAAI,CAAC,YAAY,WAAW,GAAG;AAC7B,yBAAmB,aAAa,OAAO;AACvC,6BAAuB,aAAa,SAAS;AAC7C,6BAAuB,aAAa,SAAS;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,MAAuB;AAC/C,QAAI,oBAAoB,YAAY,QAAW;AAC7C,gBAAU;AAAA,IACZ;AAEA,QAAI,qBAAqB,YAAY,QAAW;AAC9C,iBAAW,GAAG,qBAAqB,OAAO;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-5-2 {
+._90oaxp0-3-7-0 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-5-2";
+var axis = "_90oaxp0-3-7-0";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

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

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-5-2 {
+@keyframes _3rbllj2-3-7-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-5-2 {
+@keyframes _3rbllj3-3-7-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-5-2 {
+._3rbllj4-3-7-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-5-2 {
+._3rbllj5-3-7-0 {
   left: 0;
-  animation-name: _3rbllj2-3-5-2;
+  animation-name: _3rbllj2-3-7-0;
 }
-._3rbllj6-3-5-2 {
+._3rbllj6-3-7-0 {
   right: 0;
-  animation-name: _3rbllj3-3-5-2;
+  animation-name: _3rbllj3-3-7-0;
 }
-._3rbllj7-3-5-2 {
+._3rbllj7-3-7-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-5-2:hover {
+._3rbllj7-3-7-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-5-2:active {
+._3rbllj7-3-7-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-5-2 ~ div {
-  --_3rbllj0-3-5-2: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-7-0 ~ div {
+  --_3rbllj0-3-7-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-5-2 ~ div {
-  --_3rbllj1-3-5-2: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-7-0 ~ div {
+  --_3rbllj1-3-7-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-5-2 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-5-2, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-5-2, rgba(0,0,0,1) 0%));
+._3rbllj4-3-7-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-7-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-7-0, rgba(0,0,0,1) 0%));
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -1,7 +1,7 @@
 import "./PanningControls.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var panningArrow = "_3rbllj7-3-5-2";
-var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-5-2", variantClassNames: { direction: { toLeft: "_3rbllj5-3-5-2", toRight: "_3rbllj6-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-7-0";
+var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-7-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-7-0", toRight: "_3rbllj6-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   panningArrow,
   panningButtons

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/axes/components/PanningControls/PanningControls.css.ts"],
-  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-5-2';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-5-2',variantClassNames:{direction:{toLeft:'_3rbllj5-3-5-2',toRight:'_3rbllj6-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-7-0';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-7-0',variantClassNames:{direction:{toLeft:'_3rbllj5-3-7-0',toRight:'_3rbllj6-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }