@dynatrace/strato-components 3.7.1 → 3.8.0

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-7-1';\nexport var progressCircle = '_bs5vaz1-3-7-1';"],
+  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-8-0';\nexport var progressCircle = '_bs5vaz1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -12,6 +12,7 @@ import { throttleRaf } from "../../../utils/throttleRaf.js";
 import { useOverlay } from "../contexts/OverlayContext.js";
 import { useTooltip } from "../contexts/TooltipContext.js";
 import { useTooltipReducer } from "../useTooltipReducer.js";
+import { isScrollIgnored } from "../utils/is-scroll-ignored.js";
 const DynamicTooltip = (props) => {
   const { absoluteX, absoluteY, pinned } = props;
   const overlay = useOverlay();
@@ -29,10 +30,13 @@ const DynamicTooltip = (props) => {
       window.removeEventListener("keyup", onEscapeKeyPressedHandler);
     };
   }, []);
-  useThrottledCallbackOnScroll(false, () => {
+  useThrottledCallbackOnScroll(false, (event) => {
     if (!overlay.overlayRef.current) {
       return;
     }
+    if (overlay.overlayRef.current.contains(event.target) || isScrollIgnored(event)) {
+      return;
+    }
     if (tooltip.getState().pinned) {
       dispatch({
         type: "UPDATE_POSITION",
@@ -53,7 +57,7 @@ const DynamicTooltip = (props) => {
         suppressNextMoveRef.current = false;
         return;
       }
-      if (event.pressure && tooltip.getState().pinned) {
+      if ((event.pressure || event.pointerType === "touch") && tooltip.getState().pinned) {
         if (!overlay.overlayRef.current || overlay.overlayRef.current.contains(event.target)) {
           return;
         }
@@ -102,7 +106,7 @@ const DynamicTooltip = (props) => {
       absoluteX,
       absoluteY,
       onMouseLeave: dispatch({ type: "TOOLTIP_MOUSE_LEAVE" }),
-      onScrollCapture: () => dispatch({ type: "TOOLTIP_MOUSE_LEAVE" }),
+      onScrollCapture: () => dispatch({ type: "TOOLTIP_MOUSE_LEAVE" })(),
       children: props.children
     }
   );

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 {\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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",
+  "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';\nimport { isScrollIgnored } from '../utils/is-scroll-ignored.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, (event) => {\n    if (!overlay.overlayRef.current) {\n      return;\n    }\n\n    if (\n      overlay.overlayRef.current.contains(event.target as Node | null) ||\n      isScrollIgnored(event)\n    ) {\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\n        if (\n          (event.pressure || event.pointerType === 'touch') &&\n          tooltip.getState().pinned\n        ) {\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": "AA4II;AA5IJ;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAEzB,MAAM,iBAAiB,CAC5B,UAKG;AACH,QAAM,EAAE,WAAW,WAAW,OAAO,IAAI;AACzC,QAAM,UAAU,WAAW;AAC3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,UAAU,WAAW;AAC3B,QAAM,sBAAsB,OAAO,KAAK;AAExC,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,CAAC,UAAU;AAC7C,QAAI,CAAC,QAAQ,WAAW,SAAS;AAC/B;AAAA,IACF;AAEA,QACE,QAAQ,WAAW,QAAQ,SAAS,MAAM,MAAqB,KAC/D,gBAAgB,KAAK,GACrB;AACA;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,oBAAoB,SAAS;AAC/B,4BAAoB,UAAU;AAC9B;AAAA,MACF;AAEA,WACG,MAAM,YAAY,MAAM,gBAAgB,YACzC,QAAQ,SAAS,EAAE,QACnB;AACA,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,wBAAoB,UAAU;AAC9B,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,EAAE;AAAA,MAEhE,gBAAM;AAAA;AAAA,EACT;AAEJ;",
   "names": []
 }

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

@@ -5,6 +5,7 @@ import { OverlayStackingProvider } from "../../../../../core/providers/OverlaySt
 import { useDynamicTooltip } from "../hooks/useDynamicTooltip.js";
 import { TooltipContainerDimensionProvider } from "../providers/tooltip-container-dimensions.Provider.js";
 import { wrapper } from "../tooltip.sty.js";
+import { CHART_SCROLL_IGNORE_ATTR } from "../utils/is-scroll-ignored.js";
 const TooltipPortal = (props) => {
   const { absoluteX, absoluteY, isInteractive, onMouseLeave, onScrollCapture } = props;
   const [tooltipWrapper, setTooltipWrapper] = useState(
@@ -22,9 +23,14 @@ const TooltipPortal = (props) => {
         role: "tooltip",
         "aria-label": "OverlayTooltip",
         ref: setTooltipWrapper,
+        ...{ [CHART_SCROLL_IGNORE_ATTR]: "" },
         className: wrapper({ isInteractive }),
         onMouseLeave,
-        onScrollCapture,
+        onScrollCapture: (event) => {
+          if (tooltipWrapper?.contains(event.target)) {
+            onScrollCapture?.(event);
+          }
+        },
         ...dynamicTooltip,
         children: /* @__PURE__ */ jsx(OverlayStackingProvider, { children: /* @__PURE__ */ jsx(TooltipContainerDimensionProvider, { container: tooltipWrapper, children: props.children }) })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/components/TooltipPortal.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type UIEventHandler, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { OverlayStackingProvider } from '../../../../../core/providers/OverlayStackingProvider.js';\nimport { useDynamicTooltip } from '../hooks/useDynamicTooltip.js';\nimport { TooltipContainerDimensionProvider } from '../providers/tooltip-container-dimensions.Provider.js';\nimport { wrapper } from '../tooltip.sty.js';\n\nexport type TooltipPortalProps = PropsWithChildren<{\n  isInteractive: boolean;\n  absoluteX: number;\n  absoluteY: number;\n  onMouseLeave?: () => void;\n  onScrollCapture?: UIEventHandler<HTMLDivElement>;\n}>;\n\nexport const TooltipPortal = (props: TooltipPortalProps) => {\n  const { absoluteX, absoluteY, isInteractive, onMouseLeave, onScrollCapture } =\n    props;\n  const [tooltipWrapper, setTooltipWrapper] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const dynamicTooltip = useDynamicTooltip({\n    template: tooltipWrapper,\n    x: absoluteX,\n    y: absoluteY,\n  });\n\n  return createPortal(\n    <div\n      role=\"tooltip\"\n      aria-label=\"OverlayTooltip\"\n      ref={setTooltipWrapper}\n      className={wrapper({ isInteractive })}\n      onMouseLeave={onMouseLeave}\n      onScrollCapture={onScrollCapture}\n      {...dynamicTooltip}\n    >\n      <OverlayStackingProvider>\n        <TooltipContainerDimensionProvider container={tooltipWrapper}>\n          {props.children}\n        </TooltipContainerDimensionProvider>\n      </OverlayStackingProvider>\n    </div>,\n    document.body,\n  );\n};\n"],
-  "mappings": "AAuCQ;AAvCR,SAAsD,gBAAgB;AACtE,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,yCAAyC;AAClD,SAAS,eAAe;AAUjB,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,EAAE,WAAW,WAAW,eAAe,cAAc,gBAAgB,IACzE;AACF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AACA,QAAM,iBAAiB,kBAAkB;AAAA,IACvC,UAAU;AAAA,IACV,GAAG;AAAA,IACH,GAAG;AAAA,EACL,CAAC;AAED,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,WAAW,QAAQ,EAAE,cAAc,CAAC;AAAA,QACpC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,2BACC,8BAAC,qCAAkC,WAAW,gBAC3C,gBAAM,UACT,GACF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { type PropsWithChildren, type UIEventHandler, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { OverlayStackingProvider } from '../../../../../core/providers/OverlayStackingProvider.js';\nimport { useDynamicTooltip } from '../hooks/useDynamicTooltip.js';\nimport { TooltipContainerDimensionProvider } from '../providers/tooltip-container-dimensions.Provider.js';\nimport { wrapper } from '../tooltip.sty.js';\nimport { CHART_SCROLL_IGNORE_ATTR } from '../utils/is-scroll-ignored.js';\n\nexport type TooltipPortalProps = PropsWithChildren<{\n  isInteractive: boolean;\n  absoluteX: number;\n  absoluteY: number;\n  onMouseLeave?: () => void;\n  onScrollCapture?: UIEventHandler<HTMLDivElement>;\n}>;\n\nexport const TooltipPortal = (props: TooltipPortalProps) => {\n  const { absoluteX, absoluteY, isInteractive, onMouseLeave, onScrollCapture } =\n    props;\n  const [tooltipWrapper, setTooltipWrapper] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const dynamicTooltip = useDynamicTooltip({\n    template: tooltipWrapper,\n    x: absoluteX,\n    y: absoluteY,\n  });\n\n  return createPortal(\n    <div\n      role=\"tooltip\"\n      aria-label=\"OverlayTooltip\"\n      ref={setTooltipWrapper}\n      {...{ [CHART_SCROLL_IGNORE_ATTR]: '' }}\n      className={wrapper({ isInteractive })}\n      onMouseLeave={onMouseLeave}\n      onScrollCapture={(event) => {\n        if (tooltipWrapper?.contains(event.target as Node)) {\n          onScrollCapture?.(event);\n        }\n      }}\n      {...dynamicTooltip}\n    >\n      <OverlayStackingProvider>\n        <TooltipContainerDimensionProvider container={tooltipWrapper}>\n          {props.children}\n        </TooltipContainerDimensionProvider>\n      </OverlayStackingProvider>\n    </div>,\n    document.body,\n  );\n};\n"],
+  "mappings": "AA6CQ;AA7CR,SAAsD,gBAAgB;AACtE,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,yCAAyC;AAClD,SAAS,eAAe;AACxB,SAAS,gCAAgC;AAUlC,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,EAAE,WAAW,WAAW,eAAe,cAAc,gBAAgB,IACzE;AACF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AACA,QAAM,iBAAiB,kBAAkB;AAAA,IACvC,UAAU;AAAA,IACV,GAAG;AAAA,IACH,GAAG;AAAA,EACL,CAAC;AAED,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACJ,GAAG,EAAE,CAAC,wBAAwB,GAAG,GAAG;AAAA,QACrC,WAAW,QAAQ,EAAE,cAAc,CAAC;AAAA,QACpC;AAAA,QACA,iBAAiB,CAAC,UAAU;AAC1B,cAAI,gBAAgB,SAAS,MAAM,MAAc,GAAG;AAClD,8BAAkB,KAAK;AAAA,UACzB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,2BACC,8BAAC,qCAAkC,WAAW,gBAC3C,gBAAM,UACT,GACF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-@keyframes _15am2yg1-3-7-1 {
+@keyframes _15am2yg1-3-8-0 {
   from {
     opacity: 0;
     max-height: 0;
@@ -12,7 +12,7 @@
     margin-top: var(--dt-spacings-size-4, 4px);
   }
 }
-._15am2yg0-3-7-1 {
+._15am2yg0-3-8-0 {
   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-7-1 {
+._15am2yg2-3-8-0 {
   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-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: _15am2yg1-3-8-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-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-7-1";
-var actionsPlaceholderTextAnimated = "_15am2yg2-3-7-1";
+var actionButton = "_15am2yg0-3-8-0";
+var actionsPlaceholderTextAnimated = "_15am2yg2-3-8-0";
 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-7-1';\nexport var actionsPlaceholderTextAnimated = '_15am2yg2-3-7-1';"],
+  "sourcesContent": ["import './actions.css';\nexport var actionButton = '_15am2yg0-3-8-0';\nexport var actionsPlaceholderTextAnimated = '_15am2yg2-3-8-0';"],
   "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-7-1 {
+._1ldhlar2-3-8-0 {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
-  width: var(--_1ldhlar1-3-7-1, calc(100% - 8px));
+  width: var(--_1ldhlar1-3-8-0, calc(100% - 8px));
   height: 100%;
   display: inline-block;
 }
-._1ldhlar3-3-7-1 {
+._1ldhlar3-3-8-0 {
   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-7-1 {
+._1ldhlar4-3-8-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1ldhlar0-3-7-1);
+  -webkit-line-clamp: var(--_1ldhlar0-3-8-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1ldhlar5-3-7-1 {
+._1ldhlar5-3-8-0 {
   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-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)";
+var headerContainer = "_1ldhlar2-3-8-0";
+var headerSubText = "_1ldhlar5-3-8-0";
+var headerText = "_1ldhlar3-3-8-0";
+var headerTextMultiLine = "_1ldhlar4-3-8-0";
+var headerWidthVar = "var(--_1ldhlar1-3-8-0)";
+var maxLinesVar = "var(--_1ldhlar0-3-8-0)";
 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-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)';"],
+  "sourcesContent": ["import './Header.css';\nexport var headerContainer = '_1ldhlar2-3-8-0';\nexport var headerSubText = '_1ldhlar5-3-8-0';\nexport var headerText = '_1ldhlar3-3-8-0';\nexport var headerTextMultiLine = '_1ldhlar4-3-8-0';\nexport var headerWidthVar = 'var(--_1ldhlar1-3-8-0)';\nexport var maxLinesVar = 'var(--_1ldhlar0-3-8-0)';"],
   "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/seriesSymbol.css

@@ -1,4 +1,4 @@
-._1ydozsr0-3-7-1 {
+._1ydozsr0-3-8-0 {
   height: var(--dt-spacings-size-16, 16px);
   width: var(--dt-spacings-size-16, 16px);
   font-size: var(--dt-spacings-size-16, 16px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-7-1 {
+._1ydozsr1-3-8-0 {
   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-7-1";
-var customSymbolLarge = "_1ydozsr1-3-7-1 _1ydozsr0-3-7-1";
+var customSymbol = "_1ydozsr0-3-8-0";
+var customSymbolLarge = "_1ydozsr1-3-8-0 _1ydozsr0-3-8-0";
 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-7-1';\nexport var customSymbolLarge = '_1ydozsr1-3-7-1 _1ydozsr0-3-7-1';"],
+  "sourcesContent": ["import './seriesSymbol.css';\nexport var customSymbol = '_1ydozsr0-3-8-0';\nexport var customSymbolLarge = '_1ydozsr1-3-8-0 _1ydozsr0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,oBAAoB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1j1seex4-3-7-1 {
+._1j1seex4-3-8-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -12,24 +12,24 @@
   min-width: 200px;
   max-width: 480px;
 }
-._1j1seex4-3-7-1[data-placement="right"] {
+._1j1seex4-3-8-0[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._1j1seex4-3-7-1[data-placement="left"] {
+._1j1seex4-3-8-0[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._1j1seex5-3-7-1 {
+._1j1seex5-3-8-0 {
   pointer-events: all;
 }
-._1j1seex5-3-7-1[data-popper-reference-hidden=true] {
+._1j1seex5-3-8-0[data-popper-reference-hidden=true] {
   visibility: hidden;
   pointer-events: none;
 }
-._1j1seex6-3-7-1 {
+._1j1seex6-3-8-0 {
   pointer-events: none;
   user-select: none;
 }
-._1j1seex7-3-7-1 {
+._1j1seex7-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -42,38 +42,38 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seex8-3-7-1 {
+._1j1seex8-3-8-0 {
   min-width: 0;
 }
-._1j1seex9-3-7-1 {
+._1j1seex9-3-8-0 {
   min-width: 0;
   text-align: right;
 }
-._1j1seexa-3-7-1 {
+._1j1seexa-3-8-0 {
   min-height: 24px;
   max-height: 240px;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._1j1seexb-3-7-1 {
+._1j1seexb-3-8-0 {
   width: 100%;
 }
-._1j1seexc-3-7-1 {
+._1j1seexc-3-8-0 {
   max-height: 240px;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._1j1seexd-3-7-1 {
+._1j1seexd-3-8-0 {
   display: grid;
   width: 100%;
   position: relative;
   gap: 2px 16px;
 }
-._1j1seexe-3-7-1 {
+._1j1seexe-3-8-0 {
   width: 100%;
   position: relative;
 }
-._1j1seexf-3-7-1 {
+._1j1seexf-3-8-0 {
   display: grid;
   align-items: flex-start;
   box-sizing: border-box;
@@ -85,20 +85,20 @@
   width: 100%;
   min-width: fit-content;
 }
-._1j1seexg-3-7-1 {
+._1j1seexg-3-8-0 {
   grid-template-areas: "symbol name value";
-  grid-template-columns: var(--_1j1seex3-3-7-1) 1fr auto;
+  grid-template-columns: var(--_1j1seex3-3-8-0) 1fr auto;
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexh-3-7-1 {
+._1j1seexh-3-8-0 {
   grid-template-areas: "name value symbol";
-  grid-template-columns: 1fr auto var(--_1j1seex3-3-7-1);
+  grid-template-columns: 1fr auto var(--_1j1seex3-3-8-0);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexi-3-7-1 {
+._1j1seexi-3-8-0 {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._1j1seexj-3-7-1 {
+._1j1seexj-3-8-0 {
   all: unset;
   display: block;
   width: 100%;
@@ -109,12 +109,12 @@
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
   cursor: pointer;
 }
-._1j1seexk-3-7-1 {
+._1j1seexk-3-8-0 {
   display: flex;
   align-items: flex-start;
   width: 100%;
 }
-._1j1seexl-3-7-1 {
+._1j1seexl-3-8-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -127,38 +127,38 @@
   color: currentColor;
   align-self: center;
 }
-._1j1seexm-3-7-1 {
+._1j1seexm-3-8-0 {
   margin-left: calc(var(--dt-spacings-size-2, 2px) - var(--dt-spacings-size-6, 6px));
 }
-._1j1seexn-3-7-1 {
+._1j1seexn-3-8-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1j1seexo-3-7-1 {
+._1j1seexo-3-8-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexp-3-7-1 {
+._1j1seexp-3-8-0 {
   display: -webkit-box;
-  -webkit-line-clamp: var(--_1j1seex0-3-7-1);
+  -webkit-line-clamp: var(--_1j1seex0-3-8-0);
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word;
 }
-._1j1seexq-3-7-1 {
+._1j1seexq-3-8-0 {
   display: block;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
   overflow: hidden;
-  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-7-1));
+  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-8-0));
 }
-._1j1seexr-3-7-1 {
+._1j1seexr-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexs-3-7-1 {
+._1j1seexs-3-8-0 {
   height: var(--dt-spacings-size-24, 24px);
   line-height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
@@ -167,14 +167,14 @@
   min-width: var(--dt-spacings-size-24, 24px);
   align-items: center;
 }
-._1j1seext-3-7-1 {
+._1j1seext-3-8-0 {
   margin-right: -6px;
 }
-._1j1seexs-3-7-1 > span {
+._1j1seexs-3-8-0 > span {
   margin-top: 0;
   margin-bottom: 0;
 }
-._1j1seexu-3-7-1 {
+._1j1seexu-3-8-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -183,25 +183,25 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seexv-3-7-1 {
+._1j1seexv-3-8-0 {
   min-width: 0;
   flex: 1;
 }
-._1j1seexw-3-7-1 {
+._1j1seexw-3-8-0 {
   flex-shrink: 0;
   text-align: right;
 }
-._1j1seexx-3-7-1 {
+._1j1seexx-3-8-0 {
   display: flex;
   align-items: flex-start;
   min-width: 0;
 }
-._1j1seexy-3-7-1 {
+._1j1seexy-3-8-0 {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-._1j1seexz-3-7-1 {
+._1j1seexz-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -212,19 +212,19 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._1j1seex10-3-7-1 {
+._1j1seex10-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   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);
   display: -webkit-box;
-  -webkit-line-clamp: var(--_1j1seex0-3-7-1);
+  -webkit-line-clamp: var(--_1j1seex0-3-8-0);
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word;
   white-space: normal;
 }
-._1j1seex11-3-7-1 {
+._1j1seex11-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -234,9 +234,9 @@
   overflow-wrap: anywhere;
   word-break: break-word;
   overflow: hidden;
-  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-7-1));
+  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-8-0));
 }
-._1j1seex12-3-7-1 {
+._1j1seex12-3-8-0 {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -244,15 +244,15 @@
   margin-block: var(--dt-spacings-size-0, 0);
   padding-block: var(--dt-spacings-size-4, 4px);
 }
-._1j1seex13-3-7-1 {
+._1j1seex13-3-8-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seex14-3-7-1 {
+._1j1seex14-3-8-0 {
   margin-left: -6px;
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex15-3-7-1 {
+._1j1seex15-3-8-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -262,19 +262,19 @@
   max-width: 480px;
   box-sizing: border-box;
 }
-._1j1seex16-3-7-1 {
+._1j1seex16-3-8-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1j1seex2-3-7-1);
+  -webkit-line-clamp: var(--_1j1seex2-3-8-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1j1seex17-3-7-1 {
+._1j1seex17-3-8-0 {
   display: flex;
   flex-direction: column;
 }
-._1j1seex4-3-7-1:not(:has(._1j1seex17-3-7-1:hover)) ._1j1seex18-3-7-1 {
+._1j1seex4-3-8-0:not(:has(._1j1seex17-3-8-0:hover)) ._1j1seex18-3-8-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }