@dynatrace/strato-components 3.6.0 → 3.7.1

package/esm/charts/core/components/loader-overlay/LoaderOverlay.css

@@ -1,4 +1,4 @@
-._bs5vaz0-3-6-0 {
+._bs5vaz0-3-7-1 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-6-0 {
+._bs5vaz1-3-7-1 {
   position: absolute;
   top: 0;
   width: 100%;

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js

@@ -1,6 +1,6 @@
 import "./LoaderOverlay.css";
-var loaderOverlay = "_bs5vaz0-3-6-0";
-var progressCircle = "_bs5vaz1-3-6-0";
+var loaderOverlay = "_bs5vaz0-3-7-1";
+var progressCircle = "_bs5vaz1-3-7-1";
 export {
   loaderOverlay,
   progressCircle

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/loader-overlay/LoaderOverlay.css.ts"],
-  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-6-0';\nexport var progressCircle = '_bs5vaz1-3-6-0';"],
+  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-7-1';\nexport var progressCircle = '_bs5vaz1-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/DynamicTooltip.js

@@ -1,5 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
 import { TooltipPortal } from "./TooltipPortal.js";
 import { useThrottledCallbackOnResize } from "../../../hooks/useThrottledCallbackOnResize.js";
 import { useThrottledCallbackOnScroll } from "../../../hooks/useThrottledCallbackOnScroll.js";
@@ -12,6 +17,7 @@ const DynamicTooltip = (props) => {
   const overlay = useOverlay();
   const dispatch = useTooltipReducer();
   const tooltip = useTooltip();
+  const suppressNextMoveRef = useRef(false);
   const onEscapeKeyPressedHandler = useCallback((event) => {
     if (event.key === "Escape") {
       dispatch({ type: "RESET_TOOLTIP" })();
@@ -43,6 +49,10 @@ const DynamicTooltip = (props) => {
   );
   const pointerMoveCallback = useMemo(
     () => throttleRaf((event) => {
+      if (suppressNextMoveRef.current) {
+        suppressNextMoveRef.current = false;
+        return;
+      }
       if (event.pressure && tooltip.getState().pinned) {
         if (!overlay.overlayRef.current || overlay.overlayRef.current.contains(event.target)) {
           return;
@@ -77,6 +87,7 @@ const DynamicTooltip = (props) => {
     if (!pinned || !overlay.overlayRef.current) {
       return;
     }
+    suppressNextMoveRef.current = true;
     window.addEventListener("pointermove", pointerMoveCallback);
     window.addEventListener("pointerup", pointerUpCallback);
     return () => {

package/esm/charts/core/components/overlay-tooltip/components/DynamicTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/components/DynamicTooltip.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';\n\nimport { TooltipPortal } from './TooltipPortal.js';\nimport { useThrottledCallbackOnResize } from '../../../hooks/useThrottledCallbackOnResize.js';\nimport { useThrottledCallbackOnScroll } from '../../../hooks/useThrottledCallbackOnScroll.js';\nimport { throttleRaf } from '../../../utils/throttleRaf.js';\nimport { useOverlay } from '../contexts/OverlayContext.js';\nimport { useTooltip } from '../contexts/TooltipContext.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\n\nexport const DynamicTooltip = (\n  props: PropsWithChildren<{\n    pinned: boolean;\n    absoluteX: number;\n    absoluteY: number;\n  }>,\n) => {\n  const { absoluteX, absoluteY, pinned } = props;\n  const overlay = useOverlay();\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n\n  const onEscapeKeyPressedHandler = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener('keyup', onEscapeKeyPressedHandler);\n    return () => {\n      window.removeEventListener('keyup', onEscapeKeyPressedHandler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useThrottledCallbackOnScroll(false, () => {\n    if (!overlay.overlayRef.current) {\n      return;\n    }\n\n    if (tooltip.getState().pinned) {\n      dispatch({\n        type: 'UPDATE_POSITION',\n        payload: { type: 'non-resize', scroll: true },\n      })();\n      return;\n    }\n\n    dispatch({ type: 'SET_OUT_BOUNDS' })();\n  });\n\n  useThrottledCallbackOnResize(\n    overlay.overlayRef,\n    dispatch({ type: 'UPDATE_POSITION', payload: { type: 'resize' } }),\n    !pinned,\n  );\n\n  const pointerMoveCallback = useMemo(\n    () =>\n      throttleRaf((event: PointerEvent) => {\n        if (event.pressure && tooltip.getState().pinned) {\n          if (\n            !overlay.overlayRef.current ||\n            overlay.overlayRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n          dispatch({\n            type: 'UPDATE_POSITION',\n            payload: { type: 'non-resize' },\n          })();\n          return;\n        }\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  const pointerUpCallback = useMemo(\n    () =>\n      throttleRaf((event: PointerEvent) => {\n        if (tooltip.getState().pinned) {\n          if (\n            !overlay.overlayRef.current ||\n            overlay.overlayRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n          dispatch({\n            type: 'UPDATE_POSITION',\n            payload: { type: 'non-resize' },\n          })();\n          return;\n        }\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  useEffect(() => {\n    if (!pinned || !overlay.overlayRef.current) {\n      return;\n    }\n    window.addEventListener('pointermove', pointerMoveCallback);\n    window.addEventListener('pointerup', pointerUpCallback);\n\n    return () => {\n      window.removeEventListener('pointermove', pointerMoveCallback);\n      window.removeEventListener('pointerup', pointerUpCallback);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pinned]);\n\n  return (\n    <TooltipPortal\n      isInteractive={pinned}\n      absoluteX={absoluteX}\n      absoluteY={absoluteY}\n      onMouseLeave={dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })}\n      onScrollCapture={() => dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })}\n    >\n      {props.children}\n    </TooltipPortal>\n  );\n};\n"],
-  "mappings": "AAoHI;AApHJ,SAAiC,aAAa,WAAW,eAAe;AAExE,SAAS,qBAAqB;AAC9B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,iBAAiB,CAC5B,UAKG;AACH,QAAM,EAAE,WAAW,WAAW,OAAO,IAAI;AACzC,QAAM,UAAU,WAAW;AAC3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,UAAU,WAAW;AAE3B,QAAM,4BAA4B,YAAY,CAAC,UAAyB;AACtE,QAAI,MAAM,QAAQ,UAAU;AAC1B,eAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,IACtC;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,WAAO,iBAAiB,SAAS,yBAAyB;AAC1D,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,yBAAyB;AAAA,IAC/D;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,+BAA6B,OAAO,MAAM;AACxC,QAAI,CAAC,QAAQ,WAAW,SAAS;AAC/B;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS,EAAE,QAAQ;AAC7B,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,EAAE,MAAM,cAAc,QAAQ,KAAK;AAAA,MAC9C,CAAC,EAAE;AACH;AAAA,IACF;AAEA,aAAS,EAAE,MAAM,iBAAiB,CAAC,EAAE;AAAA,EACvC,CAAC;AAED;AAAA,IACE,QAAQ;AAAA,IACR,SAAS,EAAE,MAAM,mBAAmB,SAAS,EAAE,MAAM,SAAS,EAAE,CAAC;AAAA,IACjE,CAAC;AAAA,EACH;AAEA,QAAM,sBAAsB;AAAA,IAC1B,MACE,YAAY,CAAC,UAAwB;AACnC,UAAI,MAAM,YAAY,QAAQ,SAAS,EAAE,QAAQ;AAC/C,YACE,CAAC,QAAQ,WAAW,WACpB,QAAQ,WAAW,QAAQ,SAAS,MAAM,MAAc,GACxD;AACA;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,MAAM,aAAa;AAAA,QAChC,CAAC,EAAE;AACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA;AAAA,IAEH,CAAC;AAAA,EACH;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,YAAY,CAAC,UAAwB;AACnC,UAAI,QAAQ,SAAS,EAAE,QAAQ;AAC7B,YACE,CAAC,QAAQ,WAAW,WACpB,QAAQ,WAAW,QAAQ,SAAS,MAAM,MAAc,GACxD;AACA;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,MAAM,aAAa;AAAA,QAChC,CAAC,EAAE;AACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA;AAAA,IAEH,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,QAAQ,WAAW,SAAS;AAC1C;AAAA,IACF;AACA,WAAO,iBAAiB,eAAe,mBAAmB;AAC1D,WAAO,iBAAiB,aAAa,iBAAiB;AAEtD,WAAO,MAAM;AACX,aAAO,oBAAoB,eAAe,mBAAmB;AAC7D,aAAO,oBAAoB,aAAa,iBAAiB;AAAA,IAC3D;AAAA,EAEF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAAA,MACtD,iBAAiB,MAAM,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAAA,MAE9D,gBAAM;AAAA;AAAA,EACT;AAEJ;",
+  "sourcesContent": ["import {\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { TooltipPortal } from './TooltipPortal.js';\nimport { useThrottledCallbackOnResize } from '../../../hooks/useThrottledCallbackOnResize.js';\nimport { useThrottledCallbackOnScroll } from '../../../hooks/useThrottledCallbackOnScroll.js';\nimport { throttleRaf } from '../../../utils/throttleRaf.js';\nimport { useOverlay } from '../contexts/OverlayContext.js';\nimport { useTooltip } from '../contexts/TooltipContext.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\n\nexport const DynamicTooltip = (\n  props: PropsWithChildren<{\n    pinned: boolean;\n    absoluteX: number;\n    absoluteY: number;\n  }>,\n) => {\n  const { absoluteX, absoluteY, pinned } = props;\n  const overlay = useOverlay();\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  const suppressNextMoveRef = useRef(false);\n\n  const onEscapeKeyPressedHandler = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      dispatch({ type: 'RESET_TOOLTIP' })();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener('keyup', onEscapeKeyPressedHandler);\n    return () => {\n      window.removeEventListener('keyup', onEscapeKeyPressedHandler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useThrottledCallbackOnScroll(false, () => {\n    if (!overlay.overlayRef.current) {\n      return;\n    }\n\n    if (tooltip.getState().pinned) {\n      dispatch({\n        type: 'UPDATE_POSITION',\n        payload: { type: 'non-resize', scroll: true },\n      })();\n      return;\n    }\n\n    dispatch({ type: 'SET_OUT_BOUNDS' })();\n  });\n\n  useThrottledCallbackOnResize(\n    overlay.overlayRef,\n    dispatch({ type: 'UPDATE_POSITION', payload: { type: 'resize' } }),\n    !pinned,\n  );\n\n  const pointerMoveCallback = useMemo(\n    () =>\n      throttleRaf((event: PointerEvent) => {\n        if (suppressNextMoveRef.current) {\n          suppressNextMoveRef.current = false;\n          return;\n        }\n        if (event.pressure && tooltip.getState().pinned) {\n          if (\n            !overlay.overlayRef.current ||\n            overlay.overlayRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n          dispatch({\n            type: 'UPDATE_POSITION',\n            payload: { type: 'non-resize' },\n          })();\n          return;\n        }\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  const pointerUpCallback = useMemo(\n    () =>\n      throttleRaf((event: PointerEvent) => {\n        if (tooltip.getState().pinned) {\n          if (\n            !overlay.overlayRef.current ||\n            overlay.overlayRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n          dispatch({\n            type: 'UPDATE_POSITION',\n            payload: { type: 'non-resize' },\n          })();\n          return;\n        }\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  useEffect(() => {\n    if (!pinned || !overlay.overlayRef.current) {\n      return;\n    }\n    suppressNextMoveRef.current = true;\n    window.addEventListener('pointermove', pointerMoveCallback);\n    window.addEventListener('pointerup', pointerUpCallback);\n\n    return () => {\n      window.removeEventListener('pointermove', pointerMoveCallback);\n      window.removeEventListener('pointerup', pointerUpCallback);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pinned]);\n\n  return (\n    <TooltipPortal\n      isInteractive={pinned}\n      absoluteX={absoluteX}\n      absoluteY={absoluteY}\n      onMouseLeave={dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })}\n      onScrollCapture={() => dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })}\n    >\n      {props.children}\n    </TooltipPortal>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/global-actions/actions.css

@@ -1,4 +1,4 @@
-@keyframes _15am2yg1-3-6-0 {
+@keyframes _15am2yg1-3-7-1 {
   from {
     opacity: 0;
     max-height: 0;
@@ -12,7 +12,7 @@
     margin-top: var(--dt-spacings-size-4, 4px);
   }
 }
-._15am2yg0-3-6-0 {
+._15am2yg0-3-7-1 {
   display: block;
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   width: 100%;
@@ -24,7 +24,7 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._15am2yg2-3-6-0 {
+._15am2yg2-3-7-1 {
   box-sizing: border-box;
   border-top: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
@@ -36,6 +36,6 @@
   padding: 0;
   margin-top: 0;
   overflow: hidden;
-  animation: _15am2yg1-3-6-0 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+  animation: _15am2yg1-3-7-1 var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
   animation-delay: 1200ms;
 }

package/esm/charts/core/components/overlay-tooltip/components/global-actions/actions.sty.js

@@ -1,6 +1,6 @@
 import "./actions.css";
-var actionButton = "_15am2yg0-3-6-0";
-var actionsPlaceholderTextAnimated = "_15am2yg2-3-6-0";
+var actionButton = "_15am2yg0-3-7-1";
+var actionsPlaceholderTextAnimated = "_15am2yg2-3-7-1";
 export {
   actionButton,
   actionsPlaceholderTextAnimated

package/esm/charts/core/components/overlay-tooltip/components/global-actions/actions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/global-actions/actions.css.ts"],
-  "sourcesContent": ["import './actions.css';\nexport var actionButton = '_15am2yg0-3-6-0';\nexport var actionsPlaceholderTextAnimated = '_15am2yg2-3-6-0';"],
+  "sourcesContent": ["import './actions.css';\nexport var actionButton = '_15am2yg0-3-7-1';\nexport var actionsPlaceholderTextAnimated = '_15am2yg2-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,iCAAiC;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/header/Header.css

@@ -1,10 +1,10 @@
-._1ldhlar2-3-6-0 {
+._1ldhlar2-3-7-1 {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
-  width: var(--_1ldhlar1-3-6-0, calc(100% - 8px));
+  width: var(--_1ldhlar1-3-7-1, calc(100% - 8px));
   height: 100%;
   display: inline-block;
 }
-._1ldhlar3-3-6-0 {
+._1ldhlar3-3-7-1 {
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
@@ -13,15 +13,15 @@
   margin: 0;
   padding: 0;
 }
-._1ldhlar4-3-6-0 {
+._1ldhlar4-3-7-1 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1ldhlar0-3-6-0);
+  -webkit-line-clamp: var(--_1ldhlar0-3-7-1);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1ldhlar5-3-6-0 {
+._1ldhlar5-3-7-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/esm/charts/core/components/overlay-tooltip/components/header/Header.sty.js

@@ -1,10 +1,10 @@
 import "./Header.css";
-var headerContainer = "_1ldhlar2-3-6-0";
-var headerSubText = "_1ldhlar5-3-6-0";
-var headerText = "_1ldhlar3-3-6-0";
-var headerTextMultiLine = "_1ldhlar4-3-6-0";
-var headerWidthVar = "var(--_1ldhlar1-3-6-0)";
-var maxLinesVar = "var(--_1ldhlar0-3-6-0)";
+var headerContainer = "_1ldhlar2-3-7-1";
+var headerSubText = "_1ldhlar5-3-7-1";
+var headerText = "_1ldhlar3-3-7-1";
+var headerTextMultiLine = "_1ldhlar4-3-7-1";
+var headerWidthVar = "var(--_1ldhlar1-3-7-1)";
+var maxLinesVar = "var(--_1ldhlar0-3-7-1)";
 export {
   headerContainer,
   headerSubText,

package/esm/charts/core/components/overlay-tooltip/components/header/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/Header.css.ts"],
-  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-6-0';\nexport var headerSubText = '_1ldhlar5-3-6-0';\nexport var headerText = '_1ldhlar3-3-6-0';\nexport var headerTextMultiLine = '_1ldhlar4-3-6-0';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-6-0)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-6-0)';"],
+  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-7-1';\nexport var headerSubText = '_1ldhlar5-3-7-1';\nexport var headerText = '_1ldhlar3-3-7-1';\nexport var headerTextMultiLine = '_1ldhlar4-3-7-1';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-7-1)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-7-1)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;AACrB,IAAI,cAAc;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItem.js

@@ -24,7 +24,7 @@ import {
 } from "../../tooltip.sty.js";
 import { useTooltipReducer } from "../../useTooltipReducer.js";
 import { getDefaultAction } from "../../utils/get-copy-action.js";
-const ACTIVE_SERIES_HOVER_DELAY = 300;
+const ACTIVE_SERIES_HOVER_DELAY = 150;
 const CHEVRON_SLOT_WIDTH = 20;
 const SeriesItem = (props) => {
   const intl = useIntl();

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useRef, type MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useSeriesItemDisplayState } from './hooks/use-series-item-display-state.js';\nimport { SeriesActionsHeader } from './SeriesActionsHeader.js';\nimport { SeriesItemContent } from './SeriesItemContent.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../copy-to-clipboard/copy-to-clipboard-messages.js';\nimport { ChartActionsMenuAsync } from '../../../series-action/ChartActionsMenuAsync.js';\nimport { TOOLTIP_CONTENT_PADDING } from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { useSelector, useTooltipSnapshot } from '../../selectors.js';\nimport {\n  chevron,\n  chevronRightAligned,\n  seriesItemActive,\n  seriesItemWithChevron,\n  seriesItemWrapper,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport type { SeriesItemProps } from '../../types/series.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\nimport { getDefaultAction } from '../../utils/get-copy-action.js';\n\nconst ACTIVE_SERIES_HOVER_DELAY = 300;\nconst CHEVRON_SLOT_WIDTH = 20;\n\nexport const SeriesItem = (props: SeriesItemProps) => {\n  const intl = useIntl();\n  const { pinned } = useTooltipSnapshot();\n  const labelFor = useDefaultLabels();\n  const { actions, ...restProps } = props as InternalSeriesItemProps;\n  const { symbolPosition = 'left', defaultActionsConfig } = useExternalConfig();\n  const hasActions = actions !== undefined || defaultActionsConfig.size > 0;\n  const dispatch = useTooltipReducer();\n  const rowId = useId();\n  const isOpen = useSelector(({ activeSeries }) => activeSeries === rowId);\n  const { activeSeries } = useTooltipSnapshot();\n  const menuDelayRef = useRef(0);\n  const asyncActions = actions ? async () => actions() : undefined;\n\n  const triggerLeftTooltip: MouseEventHandler<HTMLDivElement> = (event) => {\n    event.stopPropagation();\n    dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })();\n  };\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.stopPropagation();\n    menuDelayRef.current = 0;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const handlePointerMove = () => {\n    menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const defaultActions = !pinned\n    ? null\n    : [...defaultActionsConfig.entries()].map(([accessor, config]) => {\n        const message = intl.formatMessage(\n          config.messageLabel ?? COPY_TO_CLIPBOARD_MESSAGES.copyField,\n          {\n            field: labelFor?.(\n              config.field,\n              config.customLabel,\n            )?.toLocaleLowerCase(),\n          },\n        );\n        return getDefaultAction(props, accessor, message);\n      });\n\n  return (\n    <button\n      className={clsx(\n        activeSeries === rowId && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\n      data-testid=\"menu-trigger\"\n    >\n      <ChartActionsMenuAsync\n        hasActions={hasActions}\n        defaultActions={defaultActions}\n        actions={asyncActions}\n        isOpen={isOpen}\n        header={<SeriesActionsHeader text={props.name} />}\n        onActionSelected={triggerLeftTooltip}\n        delay={menuDelayRef.current}\n      >\n        <WithSymbol\n          symbolPosition={symbolPosition}\n          hasActions={hasActions}\n          {...restProps}\n        />\n      </ChartActionsMenuAsync>\n    </button>\n  );\n};\n\ntype SeriesWithSymbolProps = Omit<InternalSeriesItemProps, 'actions'> & {\n  symbolPosition: 'left' | 'right';\n  hasActions: boolean;\n};\n\nconst WithSymbol = forwardRef<HTMLDivElement, SeriesWithSymbolProps>(\n  (props, ref) => {\n    const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;\n    const {\n      color,\n      multiLine = false,\n      name,\n      description,\n      shape,\n      iconStyle,\n      icon,\n      symbol,\n    } = props;\n    const { symbolPosition, hasActions } = props;\n    const seriesContentMaxWidth = hasActions\n      ? containerWidth - CHEVRON_SLOT_WIDTH\n      : containerWidth;\n    const {\n      nameText,\n      descriptionText,\n      fullDescriptionText,\n      isDescriptionTruncated,\n      descriptionShouldUseMultiLineCss,\n      descriptionMultiLineMode,\n      displayValueText,\n      displayRelativeValueText,\n      fullValueText,\n      fullRelativeValueText,\n      nameTextStyle,\n      nameStyle,\n    } = useSeriesItemDisplayState({\n      ...props,\n      maxWidth: seriesContentMaxWidth,\n    });\n    return (\n      <div ref={ref} className={seriesItemWithChevron}>\n        <SeriesItemContent\n          color={color}\n          name={name}\n          description={description}\n          nameText={nameText}\n          descriptionText={descriptionText}\n          fullDescriptionText={fullDescriptionText}\n          isDescriptionTruncated={isDescriptionTruncated}\n          descriptionShouldUseMultiLineCss={descriptionShouldUseMultiLineCss}\n          descriptionMultiLineMode={descriptionMultiLineMode}\n          displayValueText={displayValueText}\n          displayRelativeValueText={displayRelativeValueText}\n          fullValueText={fullValueText}\n          fullRelativeValueText={fullRelativeValueText}\n          nameTextStyle={nameTextStyle}\n          nameStyle={nameStyle}\n          multiLine={multiLine}\n          symbolPosition={symbolPosition}\n          shape={shape}\n          symbol={symbol}\n          iconStyle={iconStyle}\n          icon={icon}\n          hasChevron={hasActions}\n          maxWidth={seriesContentMaxWidth}\n        />\n        {hasActions && (\n          <span\n            className={clsx(\n              chevron,\n              symbolPosition === 'right' && chevronRightAligned,\n            )}\n            aria-hidden\n          >\n            <ChevronRightSmallIcon size={16} />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useRef, type MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useSeriesItemDisplayState } from './hooks/use-series-item-display-state.js';\nimport { SeriesActionsHeader } from './SeriesActionsHeader.js';\nimport { SeriesItemContent } from './SeriesItemContent.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../copy-to-clipboard/copy-to-clipboard-messages.js';\nimport { ChartActionsMenuAsync } from '../../../series-action/ChartActionsMenuAsync.js';\nimport { TOOLTIP_CONTENT_PADDING } from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { useSelector, useTooltipSnapshot } from '../../selectors.js';\nimport {\n  chevron,\n  chevronRightAligned,\n  seriesItemActive,\n  seriesItemWithChevron,\n  seriesItemWrapper,\n  TOOLTIP_MAX_WIDTH,\n} from '../../tooltip.sty.js';\nimport type { SeriesItemProps } from '../../types/series.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\nimport { getDefaultAction } from '../../utils/get-copy-action.js';\n\nconst ACTIVE_SERIES_HOVER_DELAY = 150;\nconst CHEVRON_SLOT_WIDTH = 20;\n\nexport const SeriesItem = (props: SeriesItemProps) => {\n  const intl = useIntl();\n  const { pinned } = useTooltipSnapshot();\n  const labelFor = useDefaultLabels();\n  const { actions, ...restProps } = props as InternalSeriesItemProps;\n  const { symbolPosition = 'left', defaultActionsConfig } = useExternalConfig();\n  const hasActions = actions !== undefined || defaultActionsConfig.size > 0;\n  const dispatch = useTooltipReducer();\n  const rowId = useId();\n  const isOpen = useSelector(({ activeSeries }) => activeSeries === rowId);\n  const { activeSeries } = useTooltipSnapshot();\n  const menuDelayRef = useRef(0);\n  const asyncActions = actions ? async () => actions() : undefined;\n\n  const triggerLeftTooltip: MouseEventHandler<HTMLDivElement> = (event) => {\n    event.stopPropagation();\n    dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })();\n  };\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.stopPropagation();\n    menuDelayRef.current = 0;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const handlePointerMove = () => {\n    menuDelayRef.current = ACTIVE_SERIES_HOVER_DELAY;\n    dispatch({\n      type: 'SET_ACTIVE_SERIES',\n      payload: { activeSeries: rowId },\n    })();\n  };\n  const defaultActions = !pinned\n    ? null\n    : [...defaultActionsConfig.entries()].map(([accessor, config]) => {\n        const message = intl.formatMessage(\n          config.messageLabel ?? COPY_TO_CLIPBOARD_MESSAGES.copyField,\n          {\n            field: labelFor?.(\n              config.field,\n              config.customLabel,\n            )?.toLocaleLowerCase(),\n          },\n        );\n        return getDefaultAction(props, accessor, message);\n      });\n\n  return (\n    <button\n      className={clsx(\n        activeSeries === rowId && seriesItemActive,\n        seriesItemWrapper,\n      )}\n      onClick={handleClick}\n      onPointerMove={handlePointerMove}\n      onKeyDown={noop}\n      data-testid=\"menu-trigger\"\n    >\n      <ChartActionsMenuAsync\n        hasActions={hasActions}\n        defaultActions={defaultActions}\n        actions={asyncActions}\n        isOpen={isOpen}\n        header={<SeriesActionsHeader text={props.name} />}\n        onActionSelected={triggerLeftTooltip}\n        delay={menuDelayRef.current}\n      >\n        <WithSymbol\n          symbolPosition={symbolPosition}\n          hasActions={hasActions}\n          {...restProps}\n        />\n      </ChartActionsMenuAsync>\n    </button>\n  );\n};\n\ntype SeriesWithSymbolProps = Omit<InternalSeriesItemProps, 'actions'> & {\n  symbolPosition: 'left' | 'right';\n  hasActions: boolean;\n};\n\nconst WithSymbol = forwardRef<HTMLDivElement, SeriesWithSymbolProps>(\n  (props, ref) => {\n    const containerWidth = TOOLTIP_MAX_WIDTH - TOOLTIP_CONTENT_PADDING;\n    const {\n      color,\n      multiLine = false,\n      name,\n      description,\n      shape,\n      iconStyle,\n      icon,\n      symbol,\n    } = props;\n    const { symbolPosition, hasActions } = props;\n    const seriesContentMaxWidth = hasActions\n      ? containerWidth - CHEVRON_SLOT_WIDTH\n      : containerWidth;\n    const {\n      nameText,\n      descriptionText,\n      fullDescriptionText,\n      isDescriptionTruncated,\n      descriptionShouldUseMultiLineCss,\n      descriptionMultiLineMode,\n      displayValueText,\n      displayRelativeValueText,\n      fullValueText,\n      fullRelativeValueText,\n      nameTextStyle,\n      nameStyle,\n    } = useSeriesItemDisplayState({\n      ...props,\n      maxWidth: seriesContentMaxWidth,\n    });\n    return (\n      <div ref={ref} className={seriesItemWithChevron}>\n        <SeriesItemContent\n          color={color}\n          name={name}\n          description={description}\n          nameText={nameText}\n          descriptionText={descriptionText}\n          fullDescriptionText={fullDescriptionText}\n          isDescriptionTruncated={isDescriptionTruncated}\n          descriptionShouldUseMultiLineCss={descriptionShouldUseMultiLineCss}\n          descriptionMultiLineMode={descriptionMultiLineMode}\n          displayValueText={displayValueText}\n          displayRelativeValueText={displayRelativeValueText}\n          fullValueText={fullValueText}\n          fullRelativeValueText={fullRelativeValueText}\n          nameTextStyle={nameTextStyle}\n          nameStyle={nameStyle}\n          multiLine={multiLine}\n          symbolPosition={symbolPosition}\n          shape={shape}\n          symbol={symbol}\n          iconStyle={iconStyle}\n          icon={icon}\n          hasChevron={hasActions}\n          maxWidth={seriesContentMaxWidth}\n        />\n        {hasActions && (\n          <span\n            className={clsx(\n              chevron,\n              symbolPosition === 'right' && chevronRightAligned,\n            )}\n            aria-hidden\n          >\n            <ChevronRightSmallIcon size={16} />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],
   "mappings": "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",
   "names": ["activeSeries"]
 }

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItemContent.js

@@ -6,6 +6,7 @@ import { forwardRef } from "react";
 import { SeriesSymbol } from "./SeriesSymbol.js";
 import { Tooltip } from "../../../../../../overlays/tooltip/Tooltip.js";
 import { GAP_BETWEEN_COLUMNS } from "../../constants.js";
+import { useExternalConfig } from "../../contexts/ExternalConfigContext.js";
 import {
   multiLineName,
   relativeValueStyle,
@@ -45,6 +46,7 @@ const SeriesItemContent = forwardRef((props, ref) => {
     maxWidth,
     hasChevron = false
   } = props;
+  const { symbolVerticalAlignment = "center" } = useExternalConfig();
   const isRightPosition = symbolPosition === "right";
   const hasSymbol = color !== void 0 && !isEmpty(color) || icon !== void 0 || symbol !== void 0;
   const renderNameContent = () => {
@@ -106,7 +108,7 @@ const SeriesItemContent = forwardRef((props, ref) => {
         [spaceSavedForSymbolVar]: hasSymbol ? "24px" : "6px"
       }),
       children: [
-        /* @__PURE__ */ jsx("div", { style: { gridArea: "symbol" }, children: hasSymbol ? renderSymbol() : null }),
+        /* @__PURE__ */ jsx("div", { style: { gridArea: "symbol", alignSelf: symbolVerticalAlignment }, children: hasSymbol ? renderSymbol() : null }),
         /* @__PURE__ */ jsxs(
           "div",
           {

package/esm/charts/core/components/overlay-tooltip/components/series/SeriesItemContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/SeriesItemContent.tsx"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { SeriesSymbol } from './SeriesSymbol.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { GAP_BETWEEN_COLUMNS } from '../../constants.js';\nimport {\n  multiLineName,\n  relativeValueStyle,\n  seriesDescriptionText,\n  seriesDescriptionTextMultiLine,\n  seriesDescriptionTextMultiLineWrap,\n  seriesItem,\n  seriesItemMaxWidthVar,\n  seriesItemText,\n  seriesNameCell,\n  seriesNameText,\n  seriesValueCell,\n  spaceSavedForSymbolVar,\n  symbolWrapper,\n} from '../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\n\ninterface SeriesItemContentProps\n  extends Omit<InternalSeriesItemProps, 'value'> {\n  nameText: string | string[];\n  descriptionText?: string;\n  fullDescriptionText?: string;\n  isDescriptionTruncated?: boolean;\n  descriptionShouldUseMultiLineCss?: boolean;\n  descriptionMultiLineMode?: 'clamp' | 'wrap';\n  displayValueText: string;\n  displayRelativeValueText?: string;\n  fullValueText: string;\n  fullRelativeValueText?: string;\n  nameTextStyle: string;\n  nameStyle: CSSProperties;\n  multiLine: boolean;\n  symbolPosition: 'left' | 'right';\n  hasChevron?: boolean;\n  maxWidth?: number;\n}\n\nexport const SeriesItemContent = forwardRef<\n  HTMLDivElement,\n  SeriesItemContentProps\n>((props, ref) => {\n  const {\n    color,\n    nameText,\n    descriptionText,\n    fullDescriptionText,\n    isDescriptionTruncated,\n    descriptionShouldUseMultiLineCss,\n    descriptionMultiLineMode = 'clamp',\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    nameTextStyle,\n    nameStyle,\n    multiLine = false,\n    symbolPosition,\n    shape,\n    symbol,\n    icon,\n    iconStyle,\n    maxWidth,\n    hasChevron = false,\n  } = props;\n  const isRightPosition = symbolPosition === 'right';\n  const hasSymbol =\n    (color !== undefined && !isEmpty(color)) ||\n    icon !== undefined ||\n    symbol !== undefined;\n  const renderNameContent = () => {\n    if (Array.isArray(nameText) && multiLine) {\n      return (\n        <ul className={multiLineName}>\n          {nameText.map((line) => {\n            return (\n              <li\n                key={`${line}`}\n                className={nameTextStyle}\n                style={{ ...nameStyle, padding: 0 }}\n              >\n                <span className={seriesNameText}>{line}</span>\n              </li>\n            );\n          })}\n        </ul>\n      );\n    }\n\n    return (\n      <span className={nameTextStyle} style={nameStyle}>\n        <span className={seriesNameText}>{nameText}</span>\n      </span>\n    );\n  };\n\n  const renderSymbol = () => {\n    return (\n      <span className={symbolWrapper({ isRight: isRightPosition })}>\n        <SeriesSymbol\n          color={color}\n          shape={shape}\n          symbol={symbol}\n          icon={icon}\n          iconStyle={iconStyle}\n        />\n      </span>\n    );\n  };\n\n  const getDescriptionClassName = () => {\n    if (!descriptionShouldUseMultiLineCss) {\n      return seriesDescriptionText;\n    }\n    return descriptionMultiLineMode === 'wrap'\n      ? seriesDescriptionTextMultiLineWrap\n      : seriesDescriptionTextMultiLine;\n  };\n\n  const renderValue = () => {\n    const isValueTruncated = displayValueText !== fullValueText;\n    const isRelativeValueTruncated =\n      displayRelativeValueText !== fullRelativeValueText;\n\n    return (\n      <>\n        <Tooltip text={fullValueText} disabled={!isValueTruncated}>\n          <span className={seriesItemText}>{displayValueText}</span>\n        </Tooltip>\n        {displayRelativeValueText && (\n          <Tooltip\n            text={fullRelativeValueText}\n            disabled={!isRelativeValueTruncated}\n          >\n            <span className={clsx(relativeValueStyle, seriesItemText)}>\n              {displayRelativeValueText}\n            </span>\n          </Tooltip>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={seriesItem({ symbolPosition, hasChevron })}\n      style={assignInlineVars({\n        [seriesItemMaxWidthVar]: `${maxWidth}px`,\n        [spaceSavedForSymbolVar]: hasSymbol ? '24px' : '6px',\n      })}\n    >\n      <div style={{ gridArea: 'symbol' }}>\n        {hasSymbol ? renderSymbol() : null}\n      </div>\n      <div\n        className={seriesNameCell}\n        style={{\n          gridArea: 'name',\n          marginRight: `${GAP_BETWEEN_COLUMNS}px`,\n          flexDirection: 'column',\n        }}\n      >\n        {renderNameContent()}\n        {descriptionText !== undefined && (\n          <Tooltip\n            text={fullDescriptionText ?? ''}\n            disabled={!isDescriptionTruncated}\n          >\n            <span\n              className={getDescriptionClassName()}\n              style={descriptionShouldUseMultiLineCss ? nameStyle : undefined}\n            >\n              {descriptionText}\n            </span>\n          </Tooltip>\n        )}\n      </div>\n      <div className={seriesValueCell} style={{ gridArea: 'value' }}>\n        {renderValue()}\n      </div>\n    </div>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { SeriesSymbol } from './SeriesSymbol.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport { GAP_BETWEEN_COLUMNS } from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport {\n  multiLineName,\n  relativeValueStyle,\n  seriesDescriptionText,\n  seriesDescriptionTextMultiLine,\n  seriesDescriptionTextMultiLineWrap,\n  seriesItem,\n  seriesItemMaxWidthVar,\n  seriesItemText,\n  seriesNameCell,\n  seriesNameText,\n  seriesValueCell,\n  spaceSavedForSymbolVar,\n  symbolWrapper,\n} from '../../tooltip.sty.js';\nimport { InternalSeriesItemProps } from '../../types/series.js';\n\ninterface SeriesItemContentProps\n  extends Omit<InternalSeriesItemProps, 'value'> {\n  nameText: string | string[];\n  descriptionText?: string;\n  fullDescriptionText?: string;\n  isDescriptionTruncated?: boolean;\n  descriptionShouldUseMultiLineCss?: boolean;\n  descriptionMultiLineMode?: 'clamp' | 'wrap';\n  displayValueText: string;\n  displayRelativeValueText?: string;\n  fullValueText: string;\n  fullRelativeValueText?: string;\n  nameTextStyle: string;\n  nameStyle: CSSProperties;\n  multiLine: boolean;\n  symbolPosition: 'left' | 'right';\n  hasChevron?: boolean;\n  maxWidth?: number;\n}\n\nexport const SeriesItemContent = forwardRef<\n  HTMLDivElement,\n  SeriesItemContentProps\n>((props, ref) => {\n  const {\n    color,\n    nameText,\n    descriptionText,\n    fullDescriptionText,\n    isDescriptionTruncated,\n    descriptionShouldUseMultiLineCss,\n    descriptionMultiLineMode = 'clamp',\n    displayValueText,\n    displayRelativeValueText,\n    fullValueText,\n    fullRelativeValueText,\n    nameTextStyle,\n    nameStyle,\n    multiLine = false,\n    symbolPosition,\n    shape,\n    symbol,\n    icon,\n    iconStyle,\n    maxWidth,\n    hasChevron = false,\n  } = props;\n  const { symbolVerticalAlignment = 'center' } = useExternalConfig();\n  const isRightPosition = symbolPosition === 'right';\n  const hasSymbol =\n    (color !== undefined && !isEmpty(color)) ||\n    icon !== undefined ||\n    symbol !== undefined;\n  const renderNameContent = () => {\n    if (Array.isArray(nameText) && multiLine) {\n      return (\n        <ul className={multiLineName}>\n          {nameText.map((line) => {\n            return (\n              <li\n                key={`${line}`}\n                className={nameTextStyle}\n                style={{ ...nameStyle, padding: 0 }}\n              >\n                <span className={seriesNameText}>{line}</span>\n              </li>\n            );\n          })}\n        </ul>\n      );\n    }\n\n    return (\n      <span className={nameTextStyle} style={nameStyle}>\n        <span className={seriesNameText}>{nameText}</span>\n      </span>\n    );\n  };\n\n  const renderSymbol = () => {\n    return (\n      <span className={symbolWrapper({ isRight: isRightPosition })}>\n        <SeriesSymbol\n          color={color}\n          shape={shape}\n          symbol={symbol}\n          icon={icon}\n          iconStyle={iconStyle}\n        />\n      </span>\n    );\n  };\n\n  const getDescriptionClassName = () => {\n    if (!descriptionShouldUseMultiLineCss) {\n      return seriesDescriptionText;\n    }\n    return descriptionMultiLineMode === 'wrap'\n      ? seriesDescriptionTextMultiLineWrap\n      : seriesDescriptionTextMultiLine;\n  };\n\n  const renderValue = () => {\n    const isValueTruncated = displayValueText !== fullValueText;\n    const isRelativeValueTruncated =\n      displayRelativeValueText !== fullRelativeValueText;\n\n    return (\n      <>\n        <Tooltip text={fullValueText} disabled={!isValueTruncated}>\n          <span className={seriesItemText}>{displayValueText}</span>\n        </Tooltip>\n        {displayRelativeValueText && (\n          <Tooltip\n            text={fullRelativeValueText}\n            disabled={!isRelativeValueTruncated}\n          >\n            <span className={clsx(relativeValueStyle, seriesItemText)}>\n              {displayRelativeValueText}\n            </span>\n          </Tooltip>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={seriesItem({ symbolPosition, hasChevron })}\n      style={assignInlineVars({\n        [seriesItemMaxWidthVar]: `${maxWidth}px`,\n        [spaceSavedForSymbolVar]: hasSymbol ? '24px' : '6px',\n      })}\n    >\n      <div style={{ gridArea: 'symbol', alignSelf: symbolVerticalAlignment }}>\n        {hasSymbol ? renderSymbol() : null}\n      </div>\n      <div\n        className={seriesNameCell}\n        style={{\n          gridArea: 'name',\n          marginRight: `${GAP_BETWEEN_COLUMNS}px`,\n          flexDirection: 'column',\n        }}\n      >\n        {renderNameContent()}\n        {descriptionText !== undefined && (\n          <Tooltip\n            text={fullDescriptionText ?? ''}\n            disabled={!isDescriptionTruncated}\n          >\n            <span\n              className={getDescriptionClassName()}\n              style={descriptionShouldUseMultiLineCss ? nameStyle : undefined}\n            >\n              {descriptionText}\n            </span>\n          </Tooltip>\n        )}\n      </div>\n      <div className={seriesValueCell} style={{ gridArea: 'value' }}>\n        {renderValue()}\n      </div>\n    </div>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css

@@ -1,8 +1,8 @@
-._1ydozsr0-3-6-0 {
-  height: var(--dt-spacings-size-12, 12px);
-  width: var(--dt-spacings-size-12, 12px);
-  font-size: var(--dt-spacings-size-12, 12px);
-  line-height: var(--dt-spacings-size-12, 12px);
+._1ydozsr0-3-7-1 {
+  height: var(--dt-spacings-size-16, 16px);
+  width: var(--dt-spacings-size-16, 16px);
+  font-size: var(--dt-spacings-size-16, 16px);
+  line-height: var(--dt-spacings-size-16, 16px);
   text-align: center;
   overflow: hidden;
   display: inline-flex;
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-6-0 {
+._1ydozsr1-3-7-1 {
   height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
   font-size: var(--dt-spacings-size-24, 24px);

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js

@@ -1,6 +1,6 @@
 import "./seriesSymbol.css";
-var customSymbol = "_1ydozsr0-3-6-0";
-var customSymbolLarge = "_1ydozsr1-3-6-0 _1ydozsr0-3-6-0";
+var customSymbol = "_1ydozsr0-3-7-1";
+var customSymbolLarge = "_1ydozsr1-3-7-1 _1ydozsr0-3-7-1";
 export {
   customSymbol,
   customSymbolLarge

package/esm/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css.ts"],
-  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-6-0';\nexport var customSymbolLarge = '_1ydozsr1-3-6-0 _1ydozsr0-3-6-0';"],
+  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-7-1';\nexport var customSymbolLarge = '_1ydozsr1-3-7-1 _1ydozsr0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,oBAAoB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/{_to-be-removed/utils.js → hooks/useTooltipData.js}

@@ -8,4 +8,4 @@ const useTooltipData = () => {
 export {
   useTooltipData
 };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=useTooltipData.js.map

package/esm/charts/core/components/overlay-tooltip/hooks/useTooltipData.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/hooks/useTooltipData.ts"],
+  "sourcesContent": ["import { useSelector, useTooltipSnapshot } from '../selectors.js';\n\n/** @internal */\nexport const useTooltipData = () => {\n  useSelector(\n    ({ pinned, relativeX, relativeY }) => `${pinned}-${relativeX}-${relativeY}`,\n  );\n  return useTooltipSnapshot();\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,0BAA0B;AAGzC,MAAM,iBAAiB,MAAM;AAClC;AAAA,IACE,CAAC,EAAE,QAAQ,WAAW,UAAU,MAAM,GAAG,MAAM,IAAI,SAAS,IAAI,SAAS;AAAA,EAC3E;AACA,SAAO,mBAAmB;AAC5B;",
+  "names": []
+}

package/esm/charts/core/components/overlay-tooltip/test-utils/DummyInteractionsOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/test-utils/DummyInteractionsOverlay.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isNil } from 'lodash-es';\nimport type { PropsWithChildren } from 'react';\n\nimport { ChartOverlaysElevation } from '../../../constants.js';\nimport { plotLayout } from '../../chart-grid/ChartGrid.sty.js';\nimport { HorizontalCrosshair } from '../../crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../crosshair/VerticalCrosshair.js';\nimport { interactionsOverlay } from '../../interactions-overlay/InteractionsOverlay.sty.js';\nimport { useOverlay } from '../contexts/OverlayContext.js';\nimport { useTooltip } from '../contexts/TooltipContext.js';\nimport { useSelector, useTooltipSnapshot } from '../selectors.js';\nimport type { Data } from '../types.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\nimport { isOwnEvent } from '../utils.js';\n\n/** @internal */\nexport const DummyInteractionsOverlay = (\n  props: PropsWithChildren<{\n    getData: () => Data;\n  }>,\n) => {\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  const overlay = useOverlay();\n\n  return (\n    <div\n      role=\"none\"\n      ref={overlay.overlayRef}\n      className={interactionsOverlay}\n      onPointerMove={(event) =>\n        isOwnEvent(event) &&\n        dispatch({\n          type: 'SET_POSITION',\n          payload: {\n            data: props.getData(),\n            absoluteX: Math.round(event.clientX),\n            absoluteY: Math.round(event.clientY),\n          },\n        })()\n      }\n      onPointerLeave={dispatch({ type: 'SET_OUT_BOUNDS' })}\n      onClick={(event) => {\n        if (!isOwnEvent(event)) {\n          return;\n        }\n        if (tooltip.getState().pinned) {\n          dispatch({\n            type: 'SET_PINNED',\n            payload: {\n              pinned: false,\n              data: {\n                geometry: 'none',\n                series: undefined,\n                header1: undefined,\n                subheader: undefined,\n              },\n            },\n          })();\n        } else {\n          dispatch({\n            type: 'SET_PINNED',\n            payload: {\n              pinned: true,\n              data: props.getData(),\n              absoluteX: Math.round(event.clientX),\n              absoluteY: Math.round(event.clientY),\n            },\n          })();\n        }\n      }}\n      style={{\n        background: '#E6E6FA',\n        position: 'absolute',\n        width: '98%',\n        height: '98%',\n        top: '1%',\n        left: '1%',\n      }}\n    >\n      <Crosshair />\n      {props.children}\n    </div>\n  );\n};\n\nconst Crosshair = () => {\n  const overlay = useOverlay();\n  useSelector(\n    ({ absoluteX, absoluteY, pinned }) => `${absoluteX}-${absoluteY}-${pinned}`,\n  );\n  const { relativeX, relativeY, pinned } = useTooltipSnapshot();\n  const bounds = overlay.getBounds();\n\n  if (isNil(bounds && relativeX && relativeY)) {\n    return null;\n  }\n\n  return (\n    <svg\n      className={clsx(\n        plotLayout,\n        {\n          overflow: 'visible',\n          cursor: 'crosshair',\n          zIndex: ChartOverlaysElevation.crosshair,\n          pointerEvents: 'none',\n        },\n        interactionsOverlay,\n      )}\n    >\n      <HorizontalCrosshair\n        dashed={!pinned}\n        y={relativeY as number}\n        width={bounds?.width as number}\n        height={bounds?.height as number}\n        chartBounds={bounds}\n        leftOffset={0}\n        rightOffset={0}\n      />\n      <VerticalCrosshair\n        dashed={!pinned}\n        x={relativeX as number}\n        height={bounds?.height as number}\n        width={bounds?.width as number}\n        chartBounds={bounds}\n      />\n    </svg>\n  );\n};\n"],
+  "mappings": "AA2BI,SAsDE,KAtDF;AA3BJ,OAAO,UAAU;AACjB,SAAS,aAAa;AAGtB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,aAAa,0BAA0B;AAEhD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAGpB,MAAM,2BAA2B,CACtC,UAGG;AACH,QAAM,WAAW,kBAAkB;AACnC,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,WAAW;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK,QAAQ;AAAA,MACb,WAAW;AAAA,MACX,eAAe,CAAC,UACd,WAAW,KAAK,KAChB,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,MAAM,MAAM,QAAQ;AAAA,UACpB,WAAW,KAAK,MAAM,MAAM,OAAO;AAAA,UACnC,WAAW,KAAK,MAAM,MAAM,OAAO;AAAA,QACrC;AAAA,MACF,CAAC,EAAE;AAAA,MAEL,gBAAgB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAAA,MACnD,SAAS,CAAC,UAAU;AAClB,YAAI,CAAC,WAAW,KAAK,GAAG;AACtB;AAAA,QACF;AACA,YAAI,QAAQ,SAAS,EAAE,QAAQ;AAC7B,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,MAAM;AAAA,gBACJ,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,WAAW;AAAA,cACb;AAAA,YACF;AAAA,UACF,CAAC,EAAE;AAAA,QACL,OAAO;AACL,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,MAAM,MAAM,QAAQ;AAAA,cACpB,WAAW,KAAK,MAAM,MAAM,OAAO;AAAA,cACnC,WAAW,KAAK,MAAM,MAAM,OAAO;AAAA,YACrC;AAAA,UACF,CAAC,EAAE;AAAA,QACL;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MAEA;AAAA,4BAAC,aAAU;AAAA,QACV,MAAM;AAAA;AAAA;AAAA,EACT;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,QAAM,UAAU,WAAW;AAC3B;AAAA,IACE,CAAC,EAAE,WAAW,WAAW,QAAAA,QAAO,MAAM,GAAG,SAAS,IAAI,SAAS,IAAIA,OAAM;AAAA,EAC3E;AACA,QAAM,EAAE,WAAW,WAAW,OAAO,IAAI,mBAAmB;AAC5D,QAAM,SAAS,QAAQ,UAAU;AAEjC,MAAI,MAAM,UAAU,aAAa,SAAS,GAAG;AAC3C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ,uBAAuB;AAAA,UAC/B,eAAe;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,CAAC;AAAA,YACT,GAAG;AAAA,YACH,OAAO,QAAQ;AAAA,YACf,QAAQ,QAAQ;AAAA,YAChB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,aAAa;AAAA;AAAA,QACf;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,CAAC;AAAA,YACT,GAAG;AAAA,YACH,QAAQ,QAAQ;AAAA,YAChB,OAAO,QAAQ;AAAA,YACf,aAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["pinned"]
+}