@dynatrace/strato-components 3.5.2 → 3.6.0

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js

@@ -1,6 +1,6 @@
 import "./RangeLegendMarkers.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendMarkersSvg = _7a468({ defaultClassName: "_u32l830-3-5-2", variantClassNames: { isHorizontal: { true: "_u32l831-3-5-2", false: "_u32l832-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarkersSvg = _7a468({ defaultClassName: "_u32l830-3-6-0", variantClassNames: { isHorizontal: { true: "_u32l831-3-6-0", false: "_u32l832-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendMarkersSvg
 };

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css.ts"],
-  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-5-2',variantClassNames:{isHorizontal:{true:'_u32l831-3-5-2',false:'_u32l832-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-6-0',variantClassNames:{isHorizontal:{true:'_u32l831-3-6-0',false:'_u32l832-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css

@@ -1,21 +1,21 @@
-._6z9t250-3-5-2 {
+._6z9t250-3-6-0 {
   display: block;
   border-radius: 2px;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._6z9t250-3-5-2:focus {
+._6z9t250-3-6-0:focus {
   outline: none;
 }
-._6z9t251-3-5-2 {
+._6z9t251-3-6-0 {
   margin: 0 auto;
   width: 100%;
   height: 10px;
 }
-._6z9t252-3-5-2 {
+._6z9t252-3-6-0 {
   height: 100%;
   width: 10px;
 }
-._6z9t250-3-5-2 rect:focus {
+._6z9t250-3-6-0 rect:focus {
   outline: none;
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js

@@ -1,6 +1,6 @@
 import "./RangeLegendSegments.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-5-2", variantClassNames: { isHorizontal: { true: "_6z9t251-3-5-2", false: "_6z9t252-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-6-0", variantClassNames: { isHorizontal: { true: "_6z9t251-3-6-0", false: "_6z9t252-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendSvg
 };

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css.ts"],
-  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-5-2',variantClassNames:{isHorizontal:{true:'_6z9t251-3-5-2',false:'_6z9t252-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-6-0',variantClassNames:{isHorizontal:{true:'_6z9t251-3-6-0',false:'_6z9t252-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._bs5vaz0-3-5-2 {
+._bs5vaz0-3-6-0 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-5-2 {
+._bs5vaz1-3-6-0 {
   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-5-2";
-var progressCircle = "_bs5vaz1-3-5-2";
+var loaderOverlay = "_bs5vaz0-3-6-0";
+var progressCircle = "_bs5vaz1-3-6-0";
 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-5-2';\nexport var progressCircle = '_bs5vaz1-3-5-2';"],
+  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-6-0';\nexport var progressCircle = '_bs5vaz1-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { DynamicTooltipRenderer } from "./components/DynamicTooltipRenderer.js";
+import { Footer } from "./components/Footer.js";
 import { Action } from "./components/global-actions/Action.js";
 import { ActionsPlaceholder } from "./components/global-actions/ActionsPlaceholder.js";
 import { Header } from "./components/header/Header.js";
@@ -24,6 +25,7 @@ const TooltipRoot = (props) => {
 const OverlayTooltip = Object.assign(TooltipRoot, {
   Action,
   ActionsPlaceholder,
+  Footer,
   Header,
   Series,
   SeriesHeader,
@@ -34,6 +36,8 @@ Tooltip.displayName = "ChartTooltip";
 const ChartTooltip = Object.assign(Tooltip, {
   Action,
   ActionsPlaceholder,
+  Footer,
+  Header,
   Series,
   SeriesHeader,
   SeriesItem

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/overlay-tooltip/OverlayTooltip.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n\nexport const Tooltip = () => null;\nTooltip.displayName = 'ChartTooltip';\n/**\n * ChartTooltip Component\n * @public\n */\nexport const ChartTooltip = Object.assign(Tooltip, {\n  Action,\n  ActionsPlaceholder,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
-  "mappings": "AAmBM;AAjBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,MAAM,UAAU,MAAM;AAC7B,QAAQ,cAAc;AAKf,MAAM,eAAe,OAAO,OAAO,SAAS;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Footer } from './components/Footer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Footer,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n\nexport const Tooltip = () => null;\nTooltip.displayName = 'ChartTooltip';\n/**\n * ChartTooltip Component\n * @public\n */\nexport const ChartTooltip = Object.assign(Tooltip, {\n  Action,\n  ActionsPlaceholder,\n  Footer,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
+  "mappings": "AAoBM;AAlBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,MAAM,UAAU,MAAM;AAC7B,QAAQ,cAAc;AAKf,MAAM,eAAe,OAAO,OAAO,SAAS;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/DummyInteractionsOverlay.js

@@ -23,8 +23,12 @@ const DummyInteractionsOverlay = (props) => {
       className: interactionsOverlay,
       onPointerMove: (event) => isOwnEvent(event) && dispatch({
         type: "SET_POSITION",
-        payload: props.getData()
-      })(event),
+        payload: {
+          data: props.getData(),
+          absoluteX: Math.round(event.clientX),
+          absoluteY: Math.round(event.clientY)
+        }
+      })(),
       onPointerLeave: dispatch({ type: "SET_OUT_BOUNDS" }),
       onClick: (event) => {
         if (!isOwnEvent(event)) {
@@ -44,14 +48,13 @@ const DummyInteractionsOverlay = (props) => {
             }
           })();
         } else {
-          const { offsetX, offsetY } = event.nativeEvent;
           dispatch({
             type: "SET_PINNED",
             payload: {
               pinned: true,
               data: props.getData(),
-              relativeX: offsetX,
-              relativeY: offsetY
+              absoluteX: Math.round(event.clientX),
+              absoluteY: Math.round(event.clientY)
             }
           })();
         }

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/DummyInteractionsOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/_to-be-removed/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\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: props.getData(),\n        })(event)\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          const { offsetX, offsetY } = event.nativeEvent;\n          dispatch({\n            type: 'SET_PINNED',\n            payload: {\n              pinned: true,\n              data: props.getData(),\n              relativeX: offsetX,\n              relativeY: offsetY,\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": "AA0BI,SAmDE,KAnDF;AA1BJ,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;AAEpB,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,MAAM,QAAQ;AAAA,MACzB,CAAC,EAAE,KAAK;AAAA,MAEV,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,gBAAM,EAAE,SAAS,QAAQ,IAAI,MAAM;AACnC,mBAAS;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,MAAM,MAAM,QAAQ;AAAA,cACpB,WAAW;AAAA,cACX,WAAW;AAAA,YACb;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;",
+  "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\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": "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",
   "names": ["pinned"]
 }

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js

@@ -94,8 +94,8 @@ const TogglePinned = (props) => {
           type: "SET_PINNED",
           payload: {
             pinned: true,
-            relativeX: 10,
-            relativeY: 30,
+            absoluteX: 10,
+            absoluteY: 30,
             data: props.getData ? props.getData() : TooltipData[0].data()
           }
         })();

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.tsx"],
-  "sourcesContent": ["import {\n  type JSX,\n  cloneElement,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DummyInteractionsOverlay } from './DummyInteractionsOverlay.js';\nimport { HeaderTestData } from './HeaderTestTooltip.js';\nimport { TooltipData } from './MyTooltip.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Select } from '../../../../../forms/select/Select.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { ToastContainer } from '../../../../../notifications/toast/ToastContainer.js';\nimport { OverlayProvider } from '../contexts/OverlayContext.js';\nimport { TooltipProvider, useTooltip } from '../contexts/TooltipContext.js';\nimport type { Data } from '../types.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\nimport { TruncationStory } from './_TruncationStory.js';\n\nexport const TooltipProgrammaticActions = () => {\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  let snapshot = tooltip.getState();\n\n  const reset = () => {\n    snapshot = tooltip.getState();\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n  const restore = () => {\n    snapshot.pinned && tooltip.setState(snapshot);\n  };\n\n  return (\n    <Flex gap={4}>\n      <Button variant=\"emphasized\" onClick={reset}>\n        Reset Tooltip\n      </Button>\n      <Button variant=\"emphasized\" onClick={restore}>\n        Restore tooltip\n      </Button>\n    </Flex>\n  );\n};\n\ntype Sub = Set<() => void>;\n\nconst createPinAllHandler = (sub: Sub) => () => {\n  sub.forEach((action) => {\n    action();\n  });\n};\n\nconst usePinAllSetup = () => {\n  const sub: Sub = new Set();\n  const onClick = createPinAllHandler(sub);\n  return { sub, onClick };\n};\n\ninterface TestDataItem {\n  description: JSX.Element;\n  data: () => Data;\n  template: JSX.Element;\n  testId?: string;\n}\n\nconst chunkArray = <T,>(array: T[], size: number): T[][] => {\n  const rows: T[][] = [];\n  for (let i = 0; i < array.length; i += size) {\n    rows.push(array.slice(i, i + size));\n  }\n  return rows;\n};\n\nconst TooltipGrid = (props: {\n  sub: Sub;\n  items: TestDataItem[];\n  itemsPerRow?: number;\n  width?: string;\n  minHeight?: string;\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const {\n    sub,\n    items,\n    itemsPerRow = 3,\n    width = '350px',\n    minHeight = '200px',\n    symbolAlignment,\n  } = props;\n  const rows = chunkArray(items, itemsPerRow);\n\n  return (\n    <>\n      {rows.map((row, rowIndex) => (\n        <Flex flexDirection=\"row\" key={rowIndex}>\n          {row.map((item, itemIndex) => {\n            const key = rowIndex * itemsPerRow + itemIndex;\n            return (\n              <Flex flexDirection=\"column\" key={key} data-testid={item.testId}>\n                {item.description}\n                <Content\n                  sub={sub}\n                  width={width}\n                  minHeight={minHeight}\n                  getData={item.data}\n                >\n                  {symbolAlignment && isValidElement(item.template)\n                    ? cloneElement(\n                        item.template as ReactElement<{\n                          symbolAlignment?: 'left' | 'right';\n                        }>,\n                        { symbolAlignment },\n                      )\n                    : item.template}\n                </Content>\n              </Flex>\n            );\n          })}\n        </Flex>\n      ))}\n    </>\n  );\n};\nconst TogglePinned = (props: { sub: Sub; getData?: () => Data }) => {\n  const dispatch = useTooltipReducer();\n  const isPinned = useRef(false);\n  useEffect(() => {\n    const cb = () => {\n      if (isPinned.current) {\n        dispatch({\n          type: 'RESET_TOOLTIP',\n        })();\n      } else {\n        dispatch({\n          type: 'SET_PINNED',\n          payload: {\n            pinned: true,\n            relativeX: 10,\n            relativeY: 30,\n            data: props.getData ? props.getData() : TooltipData[0].data(),\n          },\n        })();\n      }\n      isPinned.current = !isPinned.current;\n    };\n    props.sub.add(cb);\n    return () => {\n      props.sub.delete(cb);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return null;\n};\nconst Content = (\n  props: PropsWithChildren<{\n    sub: Sub;\n    actions?: boolean;\n    width?: string;\n    minHeight?: string;\n    getData?: () => Data;\n  }>,\n) => {\n  return (\n    <OverlayProvider>\n      <TooltipProvider>\n        {props.actions && <TooltipProgrammaticActions />}\n        <TogglePinned sub={props.sub} getData={props.getData} />\n        <div\n          style={{\n            width: props.width || '200px',\n            height: '100%',\n            maxWidth: '100%',\n            maxHeight: '100%',\n            resize: 'both',\n            minHeight: props.minHeight || '50px',\n            borderRight: '1px dashed #DDA0DD',\n            overflow: 'hidden',\n            position: 'relative',\n          }}\n        >\n          <DummyInteractionsOverlay\n            getData={props.getData || TooltipData[0].data}\n          >\n            {props.children}\n          </DummyInteractionsOverlay>\n        </div>\n      </TooltipProvider>\n    </OverlayProvider>\n  );\n};\n\nconst Selector = function <T>(props: {\n  options: T[];\n  value: T;\n  update: (n: T) => void;\n}) {\n  return (\n    <Select\n      value={props.value}\n      onChange={(newValue) => {\n        props.update(newValue as T);\n      }}\n    >\n      <Select.Content>\n        {props.options.map((option) => (\n          <Select.Option key={String(option)} value={option}>\n            {`${option}`}\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipCustomStory = () => {\n  const [nTooltips, setNTooltips] = useState(5);\n  const { sub, onClick } = usePinAllSetup();\n  const Shared = () => {\n    return (\n      <>\n        <Selector\n          options={[5, 50, 100, 150, 300]}\n          value={nTooltips}\n          update={setNTooltips}\n        />\n        <Button onClick={onClick}>Pin all</Button>\n      </>\n    );\n  };\n\n  if (nTooltips === 5) {\n    return (\n      <Flex\n        flexWrap=\"nowrap\"\n        gap={6}\n        style={{ marginTop: '10px' }}\n        flexDirection=\"column\"\n      >\n        <Shared />\n        {Array.from({ length: 5 }).map((_, index) => {\n          return (\n            <Content\n              sub={sub}\n              actions\n              width=\"100%\"\n              minHeight=\"400px\"\n              key={index}\n            >\n              {TooltipData[0].template}\n            </Content>\n          );\n        })}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Shared />\n      {Array.from({ length: nTooltips / 10 }).map((_, index) => {\n        return (\n          <Flex\n            gap={6}\n            style={{ marginTop: '10px' }}\n            flexDirection=\"row\"\n            key={index}\n          >\n            {Array.from({ length: 10 }).map((_, index) => {\n              return (\n                <Content sub={sub} key={index}>\n                  {TooltipData[0].template}\n                </Content>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipWIPStory = (props?: {\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <ToastContainer />\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid\n        sub={sub}\n        items={TooltipData}\n        symbolAlignment={props?.symbolAlignment}\n      />\n    </>\n  );\n};\n\n/**\n * WIP story to test different header variations\n * @internal\n */\nexport const OverlayTooltipHeaderStory = () => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid sub={sub} items={HeaderTestData} />\n    </>\n  );\n};\n\n/**\n * WIP story to test different truncation variations\n * @internal\n */\nexport const OverlayTooltipTruncationStory = () => {\n  return <TruncationStory />;\n};\n"],
+  "sourcesContent": ["import {\n  type JSX,\n  cloneElement,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DummyInteractionsOverlay } from './DummyInteractionsOverlay.js';\nimport { HeaderTestData } from './HeaderTestTooltip.js';\nimport { TooltipData } from './MyTooltip.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Select } from '../../../../../forms/select/Select.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { ToastContainer } from '../../../../../notifications/toast/ToastContainer.js';\nimport { OverlayProvider } from '../contexts/OverlayContext.js';\nimport { TooltipProvider, useTooltip } from '../contexts/TooltipContext.js';\nimport type { Data } from '../types.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\nimport { TruncationStory } from './_TruncationStory.js';\n\nexport const TooltipProgrammaticActions = () => {\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  let snapshot = tooltip.getState();\n\n  const reset = () => {\n    snapshot = tooltip.getState();\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n  const restore = () => {\n    snapshot.pinned && tooltip.setState(snapshot);\n  };\n\n  return (\n    <Flex gap={4}>\n      <Button variant=\"emphasized\" onClick={reset}>\n        Reset Tooltip\n      </Button>\n      <Button variant=\"emphasized\" onClick={restore}>\n        Restore tooltip\n      </Button>\n    </Flex>\n  );\n};\n\ntype Sub = Set<() => void>;\n\nconst createPinAllHandler = (sub: Sub) => () => {\n  sub.forEach((action) => {\n    action();\n  });\n};\n\nconst usePinAllSetup = () => {\n  const sub: Sub = new Set();\n  const onClick = createPinAllHandler(sub);\n  return { sub, onClick };\n};\n\ninterface TestDataItem {\n  description: JSX.Element;\n  data: () => Data;\n  template: JSX.Element;\n  testId?: string;\n}\n\nconst chunkArray = <T,>(array: T[], size: number): T[][] => {\n  const rows: T[][] = [];\n  for (let i = 0; i < array.length; i += size) {\n    rows.push(array.slice(i, i + size));\n  }\n  return rows;\n};\n\nconst TooltipGrid = (props: {\n  sub: Sub;\n  items: TestDataItem[];\n  itemsPerRow?: number;\n  width?: string;\n  minHeight?: string;\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const {\n    sub,\n    items,\n    itemsPerRow = 3,\n    width = '350px',\n    minHeight = '200px',\n    symbolAlignment,\n  } = props;\n  const rows = chunkArray(items, itemsPerRow);\n\n  return (\n    <>\n      {rows.map((row, rowIndex) => (\n        <Flex flexDirection=\"row\" key={rowIndex}>\n          {row.map((item, itemIndex) => {\n            const key = rowIndex * itemsPerRow + itemIndex;\n            return (\n              <Flex flexDirection=\"column\" key={key} data-testid={item.testId}>\n                {item.description}\n                <Content\n                  sub={sub}\n                  width={width}\n                  minHeight={minHeight}\n                  getData={item.data}\n                >\n                  {symbolAlignment && isValidElement(item.template)\n                    ? cloneElement(\n                        item.template as ReactElement<{\n                          symbolAlignment?: 'left' | 'right';\n                        }>,\n                        { symbolAlignment },\n                      )\n                    : item.template}\n                </Content>\n              </Flex>\n            );\n          })}\n        </Flex>\n      ))}\n    </>\n  );\n};\nconst TogglePinned = (props: { sub: Sub; getData?: () => Data }) => {\n  const dispatch = useTooltipReducer();\n  const isPinned = useRef(false);\n  useEffect(() => {\n    const cb = () => {\n      if (isPinned.current) {\n        dispatch({\n          type: 'RESET_TOOLTIP',\n        })();\n      } else {\n        dispatch({\n          type: 'SET_PINNED',\n          payload: {\n            pinned: true,\n            absoluteX: 10,\n            absoluteY: 30,\n            data: props.getData ? props.getData() : TooltipData[0].data(),\n          },\n        })();\n      }\n      isPinned.current = !isPinned.current;\n    };\n    props.sub.add(cb);\n    return () => {\n      props.sub.delete(cb);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return null;\n};\nconst Content = (\n  props: PropsWithChildren<{\n    sub: Sub;\n    actions?: boolean;\n    width?: string;\n    minHeight?: string;\n    getData?: () => Data;\n  }>,\n) => {\n  return (\n    <OverlayProvider>\n      <TooltipProvider>\n        {props.actions && <TooltipProgrammaticActions />}\n        <TogglePinned sub={props.sub} getData={props.getData} />\n        <div\n          style={{\n            width: props.width || '200px',\n            height: '100%',\n            maxWidth: '100%',\n            maxHeight: '100%',\n            resize: 'both',\n            minHeight: props.minHeight || '50px',\n            borderRight: '1px dashed #DDA0DD',\n            overflow: 'hidden',\n            position: 'relative',\n          }}\n        >\n          <DummyInteractionsOverlay\n            getData={props.getData || TooltipData[0].data}\n          >\n            {props.children}\n          </DummyInteractionsOverlay>\n        </div>\n      </TooltipProvider>\n    </OverlayProvider>\n  );\n};\n\nconst Selector = function <T>(props: {\n  options: T[];\n  value: T;\n  update: (n: T) => void;\n}) {\n  return (\n    <Select\n      value={props.value}\n      onChange={(newValue) => {\n        props.update(newValue as T);\n      }}\n    >\n      <Select.Content>\n        {props.options.map((option) => (\n          <Select.Option key={String(option)} value={option}>\n            {`${option}`}\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipCustomStory = () => {\n  const [nTooltips, setNTooltips] = useState(5);\n  const { sub, onClick } = usePinAllSetup();\n  const Shared = () => {\n    return (\n      <>\n        <Selector\n          options={[5, 50, 100, 150, 300]}\n          value={nTooltips}\n          update={setNTooltips}\n        />\n        <Button onClick={onClick}>Pin all</Button>\n      </>\n    );\n  };\n\n  if (nTooltips === 5) {\n    return (\n      <Flex\n        flexWrap=\"nowrap\"\n        gap={6}\n        style={{ marginTop: '10px' }}\n        flexDirection=\"column\"\n      >\n        <Shared />\n        {Array.from({ length: 5 }).map((_, index) => {\n          return (\n            <Content\n              sub={sub}\n              actions\n              width=\"100%\"\n              minHeight=\"400px\"\n              key={index}\n            >\n              {TooltipData[0].template}\n            </Content>\n          );\n        })}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Shared />\n      {Array.from({ length: nTooltips / 10 }).map((_, index) => {\n        return (\n          <Flex\n            gap={6}\n            style={{ marginTop: '10px' }}\n            flexDirection=\"row\"\n            key={index}\n          >\n            {Array.from({ length: 10 }).map((_, index) => {\n              return (\n                <Content sub={sub} key={index}>\n                  {TooltipData[0].template}\n                </Content>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipWIPStory = (props?: {\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <ToastContainer />\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid\n        sub={sub}\n        items={TooltipData}\n        symbolAlignment={props?.symbolAlignment}\n      />\n    </>\n  );\n};\n\n/**\n * WIP story to test different header variations\n * @internal\n */\nexport const OverlayTooltipHeaderStory = () => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid sub={sub} items={HeaderTestData} />\n    </>\n  );\n};\n\n/**\n * WIP story to test different truncation variations\n * @internal\n */\nexport const OverlayTooltipTruncationStory = () => {\n  return <TruncationStory />;\n};\n"],
   "mappings": "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",
   "names": ["_", "index"]
 }

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

@@ -17,8 +17,13 @@ const DynamicTooltipRenderer = (props) => {
   if (!inBounds || isNull(absoluteX) || isNull(absoluteY) || isTooltipDataEmpty(data)) {
     return;
   }
+  const { config, content } = buildContent(props.children, defaultConfig, {
+    userSymbolPosition: props.symbolAlignment,
+    userTruncationMode: props.truncation ?? DEFAULT_TRUNCATION_MODE,
+    customTooltip: !!props.legacyTemplate
+  });
   if (props.legacyTemplate) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ExternalConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
       LegacyTemplateTooltip,
       {
         pinned,
@@ -26,12 +31,8 @@ const DynamicTooltipRenderer = (props) => {
         absoluteY,
         children: props.legacyTemplate
       }
-    );
+    ) });
   }
-  const { config, content } = buildContent(props.children, defaultConfig, {
-    userSymbolPosition: props.symbolAlignment,
-    userTruncationMode: props.truncation ?? DEFAULT_TRUNCATION_MODE
-  });
   return /* @__PURE__ */ jsx(DynamicTooltip, { pinned, absoluteX, absoluteY, children: /* @__PURE__ */ jsx(ExternalConfigContext.Provider, { value: config, children: content }) });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/components/DynamicTooltipRenderer.tsx"],
-  "sourcesContent": ["import { isNull } from 'lodash-es';\nimport { type PropsWithChildren } from 'react';\n\nimport { DynamicTooltip } from './DynamicTooltip.js';\nimport { LegacyTemplateTooltip } from '../components/LegacyTemplateTooltip.js';\nimport { DEFAULT_TRUNCATION_MODE } from '../constants.js';\nimport { ExternalConfigContext } from '../contexts/ExternalConfigContext.js';\nimport { useDefaultConfig } from '../hooks/useDefaultConfig.js';\nimport { useSelector, useTooltipSnapshot } from '../selectors.js';\nimport type { OverlayTooltipProps } from '../types.js';\nimport { buildContent } from '../utils/build-content.js';\nimport { isTooltipDataEmpty } from '../utils.js';\n\nexport const DynamicTooltipRenderer = (\n  props: PropsWithChildren<OverlayTooltipProps>,\n) => {\n  useSelector(\n    ({ absoluteX, absoluteY, inBounds, pinned }) =>\n      `${absoluteX}-${absoluteY}-${inBounds}-${pinned}`,\n  );\n  const { absoluteX, absoluteY, inBounds, pinned, data } = useTooltipSnapshot();\n  const defaultConfig = useDefaultConfig();\n\n  if (\n    !inBounds ||\n    isNull(absoluteX) ||\n    isNull(absoluteY) ||\n    isTooltipDataEmpty(data)\n  ) {\n    return;\n  }\n  if (props.legacyTemplate) {\n    return (\n      <LegacyTemplateTooltip\n        pinned={pinned}\n        absoluteX={absoluteX}\n        absoluteY={absoluteY}\n      >\n        {props.legacyTemplate}\n      </LegacyTemplateTooltip>\n    );\n  }\n  const { config, content } = buildContent(props.children, defaultConfig, {\n    userSymbolPosition: props.symbolAlignment,\n    userTruncationMode: props.truncation ?? DEFAULT_TRUNCATION_MODE,\n  });\n  return (\n    <DynamicTooltip pinned={pinned} absoluteX={absoluteX} absoluteY={absoluteY}>\n      <ExternalConfigContext.Provider value={config}>\n        {content}\n      </ExternalConfigContext.Provider>\n    </DynamicTooltip>\n  );\n};\n"],
-  "mappings": "AAiCM;AAjCN,SAAS,cAAc;AAGvB,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,aAAa,0BAA0B;AAEhD,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,yBAAyB,CACpC,UACG;AACH;AAAA,IACE,CAAC,EAAE,WAAAA,YAAW,WAAAC,YAAW,UAAAC,WAAU,QAAAC,QAAO,MACxC,GAAGH,UAAS,IAAIC,UAAS,IAAIC,SAAQ,IAAIC,OAAM;AAAA,EACnD;AACA,QAAM,EAAE,WAAW,WAAW,UAAU,QAAQ,KAAK,IAAI,mBAAmB;AAC5E,QAAM,gBAAgB,iBAAiB;AAEvC,MACE,CAAC,YACD,OAAO,SAAS,KAChB,OAAO,SAAS,KAChB,mBAAmB,IAAI,GACvB;AACA;AAAA,EACF;AACA,MAAI,MAAM,gBAAgB;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AACA,QAAM,EAAE,QAAQ,QAAQ,IAAI,aAAa,MAAM,UAAU,eAAe;AAAA,IACtE,oBAAoB,MAAM;AAAA,IAC1B,oBAAoB,MAAM,cAAc;AAAA,EAC1C,CAAC;AACD,SACE,oBAAC,kBAAe,QAAgB,WAAsB,WACpD,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,QACpC,mBACH,GACF;AAEJ;",
+  "sourcesContent": ["import { isNull } from 'lodash-es';\nimport { type PropsWithChildren } from 'react';\n\nimport { DynamicTooltip } from './DynamicTooltip.js';\nimport { LegacyTemplateTooltip } from '../components/LegacyTemplateTooltip.js';\nimport { DEFAULT_TRUNCATION_MODE } from '../constants.js';\nimport { ExternalConfigContext } from '../contexts/ExternalConfigContext.js';\nimport { useDefaultConfig } from '../hooks/useDefaultConfig.js';\nimport { useSelector, useTooltipSnapshot } from '../selectors.js';\nimport type { OverlayTooltipProps } from '../types.js';\nimport { buildContent } from '../utils/build-content.js';\nimport { isTooltipDataEmpty } from '../utils.js';\n\nexport const DynamicTooltipRenderer = (\n  props: PropsWithChildren<OverlayTooltipProps>,\n) => {\n  useSelector(\n    ({ absoluteX, absoluteY, inBounds, pinned }) =>\n      `${absoluteX}-${absoluteY}-${inBounds}-${pinned}`,\n  );\n  const { absoluteX, absoluteY, inBounds, pinned, data } = useTooltipSnapshot();\n  const defaultConfig = useDefaultConfig();\n\n  if (\n    !inBounds ||\n    isNull(absoluteX) ||\n    isNull(absoluteY) ||\n    isTooltipDataEmpty(data)\n  ) {\n    return;\n  }\n  const { config, content } = buildContent(props.children, defaultConfig, {\n    userSymbolPosition: props.symbolAlignment,\n    userTruncationMode: props.truncation ?? DEFAULT_TRUNCATION_MODE,\n    customTooltip: !!props.legacyTemplate,\n  });\n\n  if (props.legacyTemplate) {\n    return (\n      <ExternalConfigContext.Provider value={config}>\n        <LegacyTemplateTooltip\n          pinned={pinned}\n          absoluteX={absoluteX}\n          absoluteY={absoluteY}\n        >\n          {props.legacyTemplate}\n        </LegacyTemplateTooltip>\n      </ExternalConfigContext.Provider>\n    );\n  }\n  return (\n    <DynamicTooltip pinned={pinned} absoluteX={absoluteX} absoluteY={absoluteY}>\n      <ExternalConfigContext.Provider value={config}>\n        {content}\n      </ExternalConfigContext.Provider>\n    </DynamicTooltip>\n  );\n};\n"],
+  "mappings": "AAwCQ;AAxCR,SAAS,cAAc;AAGvB,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,aAAa,0BAA0B;AAEhD,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,yBAAyB,CACpC,UACG;AACH;AAAA,IACE,CAAC,EAAE,WAAAA,YAAW,WAAAC,YAAW,UAAAC,WAAU,QAAAC,QAAO,MACxC,GAAGH,UAAS,IAAIC,UAAS,IAAIC,SAAQ,IAAIC,OAAM;AAAA,EACnD;AACA,QAAM,EAAE,WAAW,WAAW,UAAU,QAAQ,KAAK,IAAI,mBAAmB;AAC5E,QAAM,gBAAgB,iBAAiB;AAEvC,MACE,CAAC,YACD,OAAO,SAAS,KAChB,OAAO,SAAS,KAChB,mBAAmB,IAAI,GACvB;AACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,QAAQ,IAAI,aAAa,MAAM,UAAU,eAAe;AAAA,IACtE,oBAAoB,MAAM;AAAA,IAC1B,oBAAoB,MAAM,cAAc;AAAA,IACxC,eAAe,CAAC,CAAC,MAAM;AAAA,EACzB,CAAC;AAED,MAAI,MAAM,gBAAgB;AACxB,WACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,QACrC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC,gBAAM;AAAA;AAAA,IACT,GACF;AAAA,EAEJ;AACA,SACE,oBAAC,kBAAe,QAAgB,WAAsB,WACpD,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,QACpC,mBACH,GACF;AAEJ;",
   "names": ["absoluteX", "absoluteY", "inBounds", "pinned"]
 }

package/esm/charts/core/components/overlay-tooltip/components/{TooltipFooter.js → Footer.js}

@@ -4,10 +4,7 @@ import { OVERLAY_TOOLTIP_MESSAGES } from "../messages.js";
 import { useTooltipSnapshot } from "../selectors.js";
 import { actionsPlaceholderTextAnimated } from "./global-actions/actions.sty.js";
 import { GlobalActions } from "./global-actions/GlobalActions.js";
-const TooltipFooter = ({
-  actions,
-  unpinnedPlaceholderText
-}) => {
+const Footer = ({ actions, unpinnedPlaceholderText }) => {
   const intl = useIntl();
   const { pinned } = useTooltipSnapshot();
   if (pinned) {
@@ -17,6 +14,6 @@ const TooltipFooter = ({
   return /* @__PURE__ */ jsx("div", { className: actionsPlaceholderTextAnimated, children: placeholderText });
 };
 export {
-  TooltipFooter
+  Footer
 };
-//# sourceMappingURL=TooltipFooter.js.map
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/components/Footer.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport useIntl from 'react-intl/src/components/useIntl.js';\n\nimport { OVERLAY_TOOLTIP_MESSAGES } from '../messages.js';\nimport { useTooltipSnapshot } from '../selectors.js';\nimport { actionsPlaceholderTextAnimated } from './global-actions/actions.sty.js';\nimport { GlobalActions } from './global-actions/GlobalActions.js';\n\n/**\n * Props for the `ChartTooltip.Footer` slot.\n * @public\n */\nexport interface FooterProps {\n  /** Global actions rendered in the footer when the tooltip is pinned. */\n  actions: ReactNode[];\n  /** Text shown in the footer when the tooltip is not yet pinned. Defaults to a built-in pin prompt message. */\n  unpinnedPlaceholderText: string | undefined;\n}\n\n/** @public */\nexport const Footer = ({ actions, unpinnedPlaceholderText }: FooterProps) => {\n  const intl = useIntl();\n  const { pinned } = useTooltipSnapshot();\n\n  if (pinned) {\n    return actions.length > 0 ? <GlobalActions actions={actions} /> : null;\n  }\n\n  const placeholderText =\n    unpinnedPlaceholderText ??\n    intl.formatMessage(OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage);\n\n  return (\n    <div className={actionsPlaceholderTextAnimated}>{placeholderText}</div>\n  );\n};\n"],
+  "mappings": "AAyBgC;AAxBhC,OAAO,aAAa;AAEpB,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,qBAAqB;AAcvB,MAAM,SAAS,CAAC,EAAE,SAAS,wBAAwB,MAAmB;AAC3E,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,IAAI,oBAAC,iBAAc,SAAkB,IAAK;AAAA,EACpE;AAEA,QAAM,kBACJ,2BACA,KAAK,cAAc,yBAAyB,0BAA0B;AAExE,SACE,oBAAC,SAAI,WAAW,gCAAiC,2BAAgB;AAErE;",
+  "names": []
+}

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

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { actionButton } from "./actions.sty.js";
 import { Button } from "../../../../../../buttons/button/Button.js";
+import { useTooltipReducer } from "../../useTooltipReducer.js";
 const Action = (props) => {
   const { label, icon, trailingIcon, onSelect, disabled } = props;
+  const dispatch = useTooltipReducer();
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -18,6 +20,10 @@ const Action = (props) => {
       className: actionButton,
       onClick: onSelect,
       onKeyDown: handleKeyDown,
+      onPointerEnter: dispatch({
+        type: "SET_ACTIVE_SERIES",
+        payload: { activeSeries: "global-action" }
+      }),
       width: "full",
       textAlign: "start",
       children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/global-actions/Action.tsx"],
-  "sourcesContent": ["import type { KeyboardEvent, ReactEventHandler, ReactNode } from 'react';\n\nimport { actionButton } from './actions.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\n\n/**\n * Props for `ChartTooltip.Action`, defining a global action item rendered in the tooltip footer.\n * @public\n */\nexport interface ActionProps {\n  /** Label text displayed for the action */\n  label: ReactNode;\n  /** Optional icon displayed to the left of the label */\n  icon?: ReactNode;\n  /** Optional icon displayed to the right of the label */\n  trailingIcon?: ReactNode;\n  /** Callback executed when the action is selected */\n  onSelect: ReactEventHandler;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n}\n\n/**\n * A global tooltip action component.\n * Used as a child of OverlayTooltip to provide actions that apply to the entire tooltip content.\n * The tooltip internally manages visibility based on pinned state.\n * @public\n */\nexport const Action = (props: ActionProps) => {\n  const { label, icon, trailingIcon, onSelect, disabled } = props;\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      onSelect(event);\n    }\n  };\n\n  return (\n    <Button\n      disabled={disabled}\n      variant=\"default\"\n      className={actionButton}\n      onClick={onSelect}\n      onKeyDown={handleKeyDown}\n      width=\"full\"\n      textAlign=\"start\"\n    >\n      {icon && <Button.Prefix>{icon}</Button.Prefix>}\n      <Button.Label>{label}</Button.Label>\n      {trailingIcon && <Button.Suffix>{trailingIcon}</Button.Suffix>}\n    </Button>\n  );\n};\n"],
-  "mappings": "AAwCI,SASW,KATX;AAtCJ,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AAyBhB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,EAAE,OAAO,MAAM,cAAc,UAAU,SAAS,IAAI;AAE1D,QAAM,gBAAgB,CAAC,UAAyB;AAC9C,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAM;AAAA,MACN,WAAU;AAAA,MAET;AAAA,gBAAQ,oBAAC,OAAO,QAAP,EAAe,gBAAK;AAAA,QAC9B,oBAAC,OAAO,OAAP,EAAc,iBAAM;AAAA,QACpB,gBAAgB,oBAAC,OAAO,QAAP,EAAe,wBAAa;AAAA;AAAA;AAAA,EAChD;AAEJ;",
+  "sourcesContent": ["import type { KeyboardEvent, ReactEventHandler, ReactNode } from 'react';\n\nimport { actionButton } from './actions.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\n\n/**\n * Props for `ChartTooltip.Action`, defining a global action item rendered in the tooltip footer.\n * @public\n */\nexport interface ActionProps {\n  /** Label text displayed for the action */\n  label: ReactNode;\n  /** Optional icon displayed to the left of the label */\n  icon?: ReactNode;\n  /** Optional icon displayed to the right of the label */\n  trailingIcon?: ReactNode;\n  /** Callback executed when the action is selected */\n  onSelect: ReactEventHandler;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n}\n\n/**\n * A global tooltip action component.\n * Used as a child of OverlayTooltip to provide actions that apply to the entire tooltip content.\n * The tooltip internally manages visibility based on pinned state.\n * @public\n */\nexport const Action = (props: ActionProps) => {\n  const { label, icon, trailingIcon, onSelect, disabled } = props;\n  const dispatch = useTooltipReducer();\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      onSelect(event);\n    }\n  };\n\n  return (\n    <Button\n      disabled={disabled}\n      variant=\"default\"\n      className={actionButton}\n      onClick={onSelect}\n      onKeyDown={handleKeyDown}\n      onPointerEnter={dispatch({\n        type: 'SET_ACTIVE_SERIES',\n        payload: { activeSeries: 'global-action' },\n      })}\n      width=\"full\"\n      textAlign=\"start\"\n    >\n      {icon && <Button.Prefix>{icon}</Button.Prefix>}\n      <Button.Label>{label}</Button.Label>\n      {trailingIcon && <Button.Suffix>{trailingIcon}</Button.Suffix>}\n    </Button>\n  );\n};\n"],
+  "mappings": "AA0CI,SAaW,KAbX;AAxCJ,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,yBAAyB;AAyB3B,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,EAAE,OAAO,MAAM,cAAc,UAAU,SAAS,IAAI;AAC1D,QAAM,WAAW,kBAAkB;AAEnC,QAAM,gBAAgB,CAAC,UAAyB;AAC9C,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,gBAAgB,SAAS;AAAA,QACvB,MAAM;AAAA,QACN,SAAS,EAAE,cAAc,gBAAgB;AAAA,MAC3C,CAAC;AAAA,MACD,OAAM;AAAA,MACN,WAAU;AAAA,MAET;AAAA,gBAAQ,oBAAC,OAAO,QAAP,EAAe,gBAAK;AAAA,QAC9B,oBAAC,OAAO,OAAP,EAAc,iBAAM;AAAA,QACpB,gBAAgB,oBAAC,OAAO,QAAP,EAAe,wBAAa;AAAA;AAAA;AAAA,EAChD;AAEJ;",
   "names": []
 }

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

@@ -1,21 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Divider } from "../../../../../../layouts/divider/Divider.js";
 import { divider, actionsContainer } from "../../tooltip.sty.js";
-import { useTooltipReducer } from "../../useTooltipReducer.js";
 const GlobalActions = ({ actions }) => {
-  const dispatch = useTooltipReducer();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: actionsContainer,
-      "aria-label": "Tooltip actions",
-      onPointerMove: dispatch({ type: "TOOLTIP_MOUSE_LEAVE" }),
-      children: [
-        /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: divider }, "divider"),
-        actions
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: actionsContainer, "aria-label": "Tooltip actions", children: [
+    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: divider }, "divider"),
+    actions
+  ] });
 };
 export {
   GlobalActions

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/global-actions/GlobalActions.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\n\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { divider, actionsContainer } from '../../tooltip.sty.js';\nimport { useTooltipReducer } from '../../useTooltipReducer.js';\n\ninterface GlobalActionsProps {\n  actions: JSX.Element[];\n}\n\nexport const GlobalActions = ({ actions }: GlobalActionsProps) => {\n  const dispatch = useTooltipReducer();\n  return (\n    <div\n      className={actionsContainer}\n      aria-label=\"Tooltip actions\"\n      onPointerMove={dispatch({ type: 'TOOLTIP_MOUSE_LEAVE' })}\n    >\n      <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      {actions}\n    </div>\n  );\n};\n"],
-  "mappings": "AAaI,SAKE,KALF;AAXJ,SAAS,eAAe;AACxB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,yBAAyB;AAM3B,MAAM,gBAAgB,CAAC,EAAE,QAAQ,MAA0B;AAChE,QAAM,WAAW,kBAAkB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAW;AAAA,MACX,eAAe,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAAA,MAEvD;AAAA,4BAAC,WAAQ,aAAY,cAA2B,WAAW,WAArB,SAA8B;AAAA,QACnE;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { divider, actionsContainer } from '../../tooltip.sty.js';\n\ninterface GlobalActionsProps {\n  actions: ReactNode[];\n}\n\nexport const GlobalActions = ({ actions }: GlobalActionsProps) => {\n  return (\n    <div className={actionsContainer} aria-label=\"Tooltip actions\">\n      <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      {actions}\n    </div>\n  );\n};\n"],
+  "mappings": "AAWI,SACE,KADF;AATJ,SAAS,eAAe;AACxB,SAAS,SAAS,wBAAwB;AAMnC,MAAM,gBAAgB,CAAC,EAAE,QAAQ,MAA0B;AAChE,SACE,qBAAC,SAAI,WAAW,kBAAkB,cAAW,mBAC3C;AAAA,wBAAC,WAAQ,aAAY,cAA2B,WAAW,WAArB,SAA8B;AAAA,IACnE;AAAA,KACH;AAEJ;",
   "names": []
 }

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/Header.tsx"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\n\nimport {\n  headerContainer,\n  headerSubText,\n  headerText,\n  headerTextMultiLine,\n  headerWidthVar,\n  maxLinesVar,\n} from './Header.sty.js';\nimport { HeaderProps, HeaderValueFormatter } from './types/header.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport { isHeaderEmpty } from './utils/type-guards.js';\nimport { defaultLabelFormatterStrategy } from './utils/value-formatters.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  DEFAULT_HEADER_LINES,\n  DEFAULT_TRUNCATION_MODE,\n  MAX_HEADER_LINES,\n  TOOLTIP_WRAPPER_PADDING,\n} from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useTooltipDimensions } from '../../contexts/TooltipDimensionsContext.js';\nimport { useDefaultConfig } from '../../hooks/useDefaultConfig.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { divider, TOOLTIP_MAX_WIDTH } from '../../tooltip.sty.js';\nimport { computeHeaderDisplay } from './utils/compute-header-display.js';\nimport { computeSubheaderDisplay } from './utils/compute-subheader-display.js';\nimport { getNonGeometryHeader } from './utils/get-non-geometry-header.js';\n\nexport const Header = (props: HeaderProps) => {\n  const {\n    header1,\n    header2,\n    subheader,\n    label,\n    label2,\n    maxLines,\n    duration1,\n    duration2,\n    showRangeDuration2,\n  } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy = (defaultConfig?.headerFormatStrategy ??\n    defaultLabelFormatterStrategy) as HeaderValueFormatter;\n  const { displayHeaderDivider, truncationMode = DEFAULT_TRUNCATION_MODE } =\n    useExternalConfig();\n  const containerWidth = useTooltipDimensions()?.width || TOOLTIP_MAX_WIDTH;\n  const showedLines = Math.min(\n    maxLines ?? DEFAULT_HEADER_LINES,\n    MAX_HEADER_LINES,\n  );\n  const isSingleLine = showedLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const showRangeDuration1 = getShowRangeDuration(\n    defaultConfig,\n    props.showRangeDuration1,\n  );\n  const computedShowDuration2 = showRangeDuration2 ?? false;\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n  const header2FormatStrategy = getNonGeometryHeader(header2);\n  const availableWidth = containerWidth - TOOLTIP_WRAPPER_PADDING * 2;\n\n  if (isHeaderEmpty(header1, header2, subheader)) {\n    return null;\n  }\n\n  const sharedDisplayParams = {\n    labelFor,\n    isSingleLine,\n    isTruncationEnd,\n    availableWidth,\n    showedLines,\n    truncationMode,\n    showRangeDuration: showRangeDuration1,\n  };\n\n  const {\n    content: headerContent,\n    totalTextWidth,\n    shownText,\n    isTruncated,\n    durationContent,\n    durationSuffix,\n  } = computeHeaderDisplay({\n    header: header1,\n    label,\n    duration: duration1,\n    formatStrategy,\n    ...sharedDisplayParams,\n  });\n\n  const {\n    content: header2Content,\n    totalTextWidth: header2TotalTextWidth,\n    shownText: shownHeader2Text,\n    isTruncated: isHeader2Truncated,\n    durationContent: duration2Content,\n    durationSuffix: duration2Suffix,\n  } = computeHeaderDisplay({\n    header: header2,\n    label: label2,\n    duration: duration2,\n    formatStrategy: header2FormatStrategy,\n    ...sharedDisplayParams,\n    showRangeDuration: computedShowDuration2,\n  });\n\n  const { subheaderContent, shownSubheaderText, isSubheaderTruncated } =\n    computeSubheaderDisplay({\n      subheader,\n      formatStrategy,\n      availableWidth,\n      truncationMode,\n    });\n\n  const headerClassName =\n    !isSingleLine && isTruncationEnd\n      ? clsx(headerText, headerTextMultiLine)\n      : headerText;\n\n  const shouldConstrainWidth =\n    totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;\n  const headerContainerStyle = shouldConstrainWidth\n    ? assignInlineVars({ [headerWidthVar]: `${availableWidth}px` })\n    : {};\n  const isHeader2Unique =\n    header2Content + duration2Suffix !== headerContent + durationSuffix;\n\n  return (\n    <>\n      <div className={headerContainer} style={headerContainerStyle}>\n        <Tooltip text={headerContent} disabled={!isTruncated}>\n          <p\n            className={headerClassName}\n            style={assignInlineVars({ [maxLinesVar]: String(showedLines) })}\n          >\n            {shownText}\n            {durationContent && durationContent !== '0' && (\n              <span className={headerSubText}>{durationSuffix}</span>\n            )}\n          </p>\n        </Tooltip>\n        {shownHeader2Text && isHeader2Unique && (\n          <div>\n            <Tooltip text={header2Content} disabled={!isHeader2Truncated}>\n              <p\n                className={headerClassName}\n                style={assignInlineVars({\n                  [maxLinesVar]: String(showedLines),\n                })}\n              >\n                {shownHeader2Text}\n                {duration2Content && duration2Content !== '0' && (\n                  <span className={headerSubText}>{duration2Suffix}</span>\n                )}\n              </p>\n            </Tooltip>\n          </div>\n        )}\n        {shownSubheaderText && (\n          <div>\n            <Tooltip text={subheaderContent} disabled={!isSubheaderTruncated}>\n              <p className={headerSubText}>{shownSubheaderText}</p>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      {displayHeaderDivider && (\n        <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\n\nimport {\n  headerContainer,\n  headerSubText,\n  headerText,\n  headerTextMultiLine,\n  headerWidthVar,\n  maxLinesVar,\n} from './Header.sty.js';\nimport { HeaderProps, HeaderValueFormatter } from './types/header.js';\nimport { getShowRangeDuration } from './utils/get-show-range-duration.js';\nimport { isHeaderEmpty } from './utils/type-guards.js';\nimport { defaultLabelFormatterStrategy } from './utils/value-formatters.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport { Tooltip } from '../../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  DEFAULT_HEADER_LINES,\n  DEFAULT_TRUNCATION_MODE,\n  MAX_HEADER_LINES,\n  TOOLTIP_WRAPPER_PADDING,\n} from '../../constants.js';\nimport { useExternalConfig } from '../../contexts/ExternalConfigContext.js';\nimport { useTooltipDimensions } from '../../contexts/TooltipDimensionsContext.js';\nimport { useDefaultConfig } from '../../hooks/useDefaultConfig.js';\nimport { useDefaultLabels } from '../../hooks/useDefaultLabels.js';\nimport { divider, TOOLTIP_MAX_WIDTH } from '../../tooltip.sty.js';\nimport { computeHeaderDisplay } from './utils/compute-header-display.js';\nimport { computeSubheaderDisplay } from './utils/compute-subheader-display.js';\nimport { getNonGeometryHeader } from './utils/get-non-geometry-header.js';\n\n/** @public */\nexport const Header = (props: HeaderProps) => {\n  const {\n    header1,\n    header2,\n    subheader,\n    label,\n    label2,\n    maxLines,\n    duration1,\n    duration2,\n    showRangeDuration2,\n  } = props;\n  const labelFor = useDefaultLabels();\n  const defaultConfig = useDefaultConfig();\n  const defaultStrategy = (defaultConfig?.headerFormatStrategy ??\n    defaultLabelFormatterStrategy) as HeaderValueFormatter;\n  const { displayHeaderDivider, truncationMode = DEFAULT_TRUNCATION_MODE } =\n    useExternalConfig();\n  const containerWidth = useTooltipDimensions()?.width || TOOLTIP_MAX_WIDTH;\n  const showedLines = Math.min(\n    maxLines ?? DEFAULT_HEADER_LINES,\n    MAX_HEADER_LINES,\n  );\n  const isSingleLine = showedLines === 1;\n  const isTruncationEnd = truncationMode === 'end';\n\n  const showRangeDuration1 = getShowRangeDuration(\n    defaultConfig,\n    props.showRangeDuration1,\n  );\n  const computedShowDuration2 = showRangeDuration2 ?? false;\n  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);\n  const header2FormatStrategy = getNonGeometryHeader(header2);\n  const availableWidth = containerWidth - TOOLTIP_WRAPPER_PADDING * 2;\n\n  if (isHeaderEmpty(header1, header2, subheader)) {\n    return null;\n  }\n\n  const sharedDisplayParams = {\n    labelFor,\n    isSingleLine,\n    isTruncationEnd,\n    availableWidth,\n    showedLines,\n    truncationMode,\n    showRangeDuration: showRangeDuration1,\n  };\n\n  const {\n    content: headerContent,\n    totalTextWidth,\n    shownText,\n    isTruncated,\n    durationContent,\n    durationSuffix,\n  } = computeHeaderDisplay({\n    header: header1,\n    label,\n    duration: duration1,\n    formatStrategy,\n    ...sharedDisplayParams,\n  });\n\n  const {\n    content: header2Content,\n    totalTextWidth: header2TotalTextWidth,\n    shownText: shownHeader2Text,\n    isTruncated: isHeader2Truncated,\n    durationContent: duration2Content,\n    durationSuffix: duration2Suffix,\n  } = computeHeaderDisplay({\n    header: header2,\n    label: label2,\n    duration: duration2,\n    formatStrategy: header2FormatStrategy,\n    ...sharedDisplayParams,\n    showRangeDuration: computedShowDuration2,\n  });\n\n  const { subheaderContent, shownSubheaderText, isSubheaderTruncated } =\n    computeSubheaderDisplay({\n      subheader,\n      formatStrategy,\n      availableWidth,\n      truncationMode,\n    });\n\n  const headerClassName =\n    !isSingleLine && isTruncationEnd\n      ? clsx(headerText, headerTextMultiLine)\n      : headerText;\n\n  const shouldConstrainWidth =\n    totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;\n  const headerContainerStyle = shouldConstrainWidth\n    ? assignInlineVars({ [headerWidthVar]: `${availableWidth}px` })\n    : {};\n  const isHeader2Unique =\n    header2Content + duration2Suffix !== headerContent + durationSuffix;\n\n  return (\n    <>\n      <div className={headerContainer} style={headerContainerStyle}>\n        <Tooltip text={headerContent} disabled={!isTruncated}>\n          <p\n            className={headerClassName}\n            style={assignInlineVars({ [maxLinesVar]: String(showedLines) })}\n          >\n            {shownText}\n            {durationContent && durationContent !== '0' && (\n              <span className={headerSubText}>{durationSuffix}</span>\n            )}\n          </p>\n        </Tooltip>\n        {shownHeader2Text && isHeader2Unique && (\n          <div>\n            <Tooltip text={header2Content} disabled={!isHeader2Truncated}>\n              <p\n                className={headerClassName}\n                style={assignInlineVars({\n                  [maxLinesVar]: String(showedLines),\n                })}\n              >\n                {shownHeader2Text}\n                {duration2Content && duration2Content !== '0' && (\n                  <span className={headerSubText}>{duration2Suffix}</span>\n                )}\n              </p>\n            </Tooltip>\n          </div>\n        )}\n        {shownSubheaderText && (\n          <div>\n            <Tooltip text={subheaderContent} disabled={!isSubheaderTruncated}>\n              <p className={headerSubText}>{shownSubheaderText}</p>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      {displayHeaderDivider && (\n        <Divider orientation=\"horizontal\" key=\"divider\" className={divider} />\n      )}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }