@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/charts/core/components/threshold-bar/indicators/ThresholdIndicator.js

@@ -1,58 +1,77 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Area, LinePath } from "@visx/shape";
+import { area, line } from "d3-shape";
+import { useMemo } from "react";
 import { useId } from "../../../../../core/hooks/useId.js";
 import { ThresholdBrightnessFilter } from "../ThresholdBrightnessFilter.js";
+function withFullPrecision(generator) {
+  generator.digits(null);
+  return generator;
+}
 const ThresholdIndicator = (props) => {
   const id = useId();
   const { data, color, isActive = false, strokeOnly = false } = props;
+  const linePath0 = useMemo(
+    () => withFullPrecision(
+      line().x((d) => d.x0).y((d) => d.y0)
+    ),
+    []
+  );
+  const linePath1 = useMemo(
+    () => withFullPrecision(
+      line().x((d) => d.x1).y((d) => d.y1)
+    ),
+    []
+  );
+  const areaPath = useMemo(
+    () => withFullPrecision(
+      area().x0((d) => d.x0).x1((d) => d.x1).y0((d) => d.y0).y1((d) => d.y1)
+    ),
+    []
+  );
   if (data.length === 0) {
     return null;
   }
   const opacity = isActive ? 0.2 : 0.1;
   const strokeWidth = isActive || strokeOnly ? 1 : 0;
   const strokeDasharray = !isActive && strokeOnly ? "3,2" : "0,0";
-  const lineProps = {
-    data,
-    stroke: color,
-    strokeWidth,
-    strokeDasharray
-  };
   const brightnessFilterId = `threshold-indicator-${id}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
-      LinePath,
+      "path",
       {
-        ...lineProps,
         role: "graphics-symbol",
         "aria-label": "threshold indicator line 0",
-        x: (d) => d.x0,
-        y: (d) => d.y0
+        d: linePath0(data) ?? void 0,
+        stroke: color,
+        strokeWidth,
+        strokeDasharray,
+        fill: "transparent",
+        strokeLinecap: "round"
       }
     ),
     !strokeOnly && /* @__PURE__ */ jsx(
-      Area,
+      "path",
       {
-        data,
         role: "graphics-symbol",
         "aria-label": "threshold indicator area",
-        x0: (d) => d.x0,
-        x1: (d) => d.x1,
-        y0: (d) => d.y0,
-        y1: (d) => d.y1,
+        d: areaPath(data) ?? void 0,
         fill: color,
         opacity,
         filter: isActive ? `url(#${brightnessFilterId})` : void 0
       }
     ),
     /* @__PURE__ */ jsx(
-      LinePath,
+      "path",
       {
-        ...lineProps,
         role: "graphics-symbol",
         "aria-label": "threshold indicator line 1",
-        x: (d) => d.x1,
-        y: (d) => d.y1
+        d: linePath1(data) ?? void 0,
+        stroke: color,
+        strokeWidth,
+        strokeDasharray,
+        fill: "transparent",
+        strokeLinecap: "round"
       }
     )
   ] });

package/esm/charts/core/components/threshold-bar/indicators/ThresholdIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/indicators/ThresholdIndicator.tsx"],
-  "sourcesContent": ["import { Area, LinePath } from '@visx/shape';\nimport { LinePathProps } from '@visx/shape/lib/shapes/LinePath';\nimport { AddSVGProps } from '@visx/shape/lib/types';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const lineProps: AddSVGProps<\n    LinePathProps<ThresholdIndicatorData>,\n    SVGPathElement\n  > = {\n    data,\n    stroke: color,\n    strokeWidth,\n    strokeDasharray,\n  };\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 0\"\n        x={(d) => d.x0}\n        y={(d) => d.y0}\n      />\n      {!strokeOnly && (\n        <Area<ThresholdIndicatorData>\n          data={data}\n          role=\"graphics-symbol\"\n          aria-label=\"threshold indicator area\"\n          x0={(d) => d.x0}\n          x1={(d) => d.x1}\n          y0={(d) => d.y0}\n          y1={(d) => d.y1}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 1\"\n        x={(d) => d.x1}\n        y={(d) => d.y1}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAgDI,mBACE,KADF;AAhDJ,SAAS,MAAM,gBAAgB;AAI/B,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAmBnC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,YAGF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { area, line } from 'd3-shape';\nimport { useMemo } from 'react';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n// d3-shape v3 rounds coordinates to 3 decimal places by default; disable to\n// match the full-precision output visx produced with d3-shape v1.\nfunction withFullPrecision<T>(generator: T): T {\n  (generator as unknown as { digits: (d: null) => void }).digits(null);\n  return generator;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  const linePath0 = useMemo(\n    () =>\n      withFullPrecision(\n        line<ThresholdIndicatorData>()\n          .x((d) => d.x0)\n          .y((d) => d.y0),\n      ),\n    [],\n  );\n\n  const linePath1 = useMemo(\n    () =>\n      withFullPrecision(\n        line<ThresholdIndicatorData>()\n          .x((d) => d.x1)\n          .y((d) => d.y1),\n      ),\n    [],\n  );\n\n  const areaPath = useMemo(\n    () =>\n      withFullPrecision(\n        area<ThresholdIndicatorData>()\n          .x0((d) => d.x0)\n          .x1((d) => d.x1)\n          .y0((d) => d.y0)\n          .y1((d) => d.y1),\n      ),\n    [],\n  );\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <path\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 0\"\n        d={linePath0(data) ?? undefined}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeDasharray={strokeDasharray}\n        fill=\"transparent\"\n        strokeLinecap=\"round\"\n      />\n      {!strokeOnly && (\n        <path\n          role=\"graphics-symbol\"\n          aria-label=\"threshold indicator area\"\n          d={areaPath(data) ?? undefined}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <path\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 1\"\n        d={linePath1(data) ?? undefined}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeDasharray={strokeDasharray}\n        fill=\"transparent\"\n        strokeLinecap=\"round\"\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AA6EI,mBACE,KADF;AA7EJ,SAAS,MAAM,YAAY;AAC3B,SAAS,eAAe;AAExB,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAI1C,SAAS,kBAAqB,WAAiB;AAC7C,EAAC,UAAuD,OAAO,IAAI;AACnE,SAAO;AACT;AAmBO,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,QAAM,YAAY;AAAA,IAChB,MACE;AAAA,MACE,KAA6B,EAC1B,EAAE,CAAC,MAAM,EAAE,EAAE,EACb,EAAE,CAAC,MAAM,EAAE,EAAE;AAAA,IAClB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,YAAY;AAAA,IAChB,MACE;AAAA,MACE,KAA6B,EAC1B,EAAE,CAAC,MAAM,EAAE,EAAE,EACb,EAAE,CAAC,MAAM,EAAE,EAAE;AAAA,IAClB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAW;AAAA,IACf,MACE;AAAA,MACE,KAA6B,EAC1B,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE;AAAA,IACnB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,UAAU,IAAI,KAAK;AAAA,QACtB,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAc;AAAA;AAAA,IAChB;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,SAAS,IAAI,KAAK;AAAA,QACrB,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,UAAU,IAAI,KAAK;AAAA,QACtB,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { useRef } from "react";
 import {
   MARKER_STROKE_WIDTH,
@@ -16,7 +15,7 @@ const CircleMarker = (props) => {
   const hovered = useMouseHover(circleRef);
   const id = useId();
   const brightnessFilterId = `threshold-circle-marker-filter-${id}`;
-  return /* @__PURE__ */ jsxs(Group, { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
       "circle",

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/CircleMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        role=\"graphics-symbol\"\n        aria-label=\"circle marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <g>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        role=\"graphics-symbol\"\n        aria-label=\"circle marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AA8BI,SACE,KADF;AA9BJ,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,OACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { useRef } from "react";
 import {
   MARKER_STROKE_WIDTH,
@@ -15,7 +14,7 @@ const PillMarker = (props) => {
   const hovered = useMouseHover(rectRef);
   const id = useId();
   const brightnessFilterId = `threshold-pill-marker-filter-${id}`;
-  return /* @__PURE__ */ jsxs(Group, { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
       "rect",

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/PillMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        role=\"graphics-symbol\"\n        aria-label=\"pill marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <g>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        role=\"graphics-symbol\"\n        aria-label=\"pill marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,OACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/styles.css

@@ -1,31 +1,31 @@
-._18heesa0-3-7-1 {
+._18heesa0-3-8-0 {
   border-right: unset;
   transform-origin: top left;
   width: 16px;
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa1-3-7-1 {
+._18heesa1-3-8-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-7-1 {
+._18heesa2-3-8-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-7-1 {
+._18heesa3-3-8-0 {
   border-left: none;
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa4-3-7-1 {
+._18heesa4-3-8-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-7-1 {
+._18heesa5-3-8-0 {
   transform: none;
 }
-._18heesa6-3-7-1 {
+._18heesa6-3-8-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-7-1 {
+._18heesa7-3-8-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-7-1 {
+._18heesa8-3-8-0 {
   overflow: hidden;
 }

package/esm/charts/core/components/threshold-bar/styles.sty.js

@@ -1,7 +1,7 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bodyOverflowOverwrite = "_18heesa8-3-7-1";
-var wrapper = _7a468({ defaultClassName: "_18heesa0-3-7-1", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-7-1", leftBorder: "_18heesa2-3-7-1", rightBorder: "_18heesa3-3-7-1" }, layoutType: { "vertical-flip": "_18heesa4-3-7-1", "vertical-no-flip": "_18heesa5-3-7-1", "horizontal-flip": "_18heesa6-3-7-1", "horizontal-no-flip": "_18heesa7-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesa8-3-8-0";
+var wrapper = _7a468({ defaultClassName: "_18heesa0-3-8-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-8-0", leftBorder: "_18heesa2-3-8-0", rightBorder: "_18heesa3-3-8-0" }, layoutType: { "vertical-flip": "_18heesa4-3-8-0", "vertical-no-flip": "_18heesa5-3-8-0", "horizontal-flip": "_18heesa6-3-8-0", "horizontal-no-flip": "_18heesa7-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bodyOverflowOverwrite,
   wrapper

package/esm/charts/core/components/threshold-bar/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-7-1';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-7-1',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-7-1',leftBorder:'_18heesa2-3-7-1',rightBorder:'_18heesa3-3-7-1'},layoutType:{'vertical-flip':'_18heesa4-3-7-1','vertical-no-flip':'_18heesa5-3-7-1','horizontal-flip':'_18heesa6-3-7-1','horizontal-no-flip':'_18heesa7-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-8-0';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-8-0',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-8-0',leftBorder:'_18heesa2-3-8-0',rightBorder:'_18heesa3-3-8-0'},layoutType:{'vertical-flip':'_18heesa4-3-8-0','vertical-no-flip':'_18heesa5-3-8-0','horizontal-flip':'_18heesa6-3-8-0','horizontal-no-flip':'_18heesa7-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,aAAY,mBAAkB,YAAW,mBAAkB,aAAY,kBAAiB,GAAE,YAAW,EAAC,iBAAgB,mBAAkB,oBAAmB,mBAAkB,mBAAkB,mBAAkB,sBAAqB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.css

@@ -1,4 +1,4 @@
-._1x31hou0-3-7-1 {
+._1x31hou0-3-8-0 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -6,55 +6,55 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   touch-action: none;
 }
-._1x31hou1-3-7-1 {
+._1x31hou1-3-8-0 {
   visibility: visible;
 }
-._1x31hou2-3-7-1 {
+._1x31hou2-3-8-0 {
   visibility: hidden;
 }
-._1x31hou3-3-7-1 {
+._1x31hou3-3-8-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-7-1 {
+._1x31hou4-3-8-0 {
   background-color: transparent;
   cursor: grab;
   touch-action: none;
 }
-._1x31hou5-3-7-1 {
+._1x31hou5-3-8-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-7-1 {
+._1x31hou6-3-8-0 {
   position: relative;
 }
-._1x31hou7-3-7-1 {
+._1x31hou7-3-8-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-7-1 * {
+body[data-scroll-locked] ._1x31hou8-3-8-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-7-1 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-8-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-7-1 {
+._1x31hou9-3-8-0 {
   pointer-events: none;
 }
-._1x31houa-3-7-1 {
+._1x31houa-3-8-0 {
   position: relative;
 }
-._1x31houb-3-7-1 {
+._1x31houb-3-8-0 {
   position: absolute;
 }
-._1x31houc-3-7-1 {
+._1x31houc-3-8-0 {
   width: calc(100% - var(--dt-spacings-size-16, 16px));
   height: calc(100% - var(--dt-spacings-size-16, 16px));
   top: var(--dt-spacings-size-8, 8px);
   left: var(--dt-spacings-size-8, 8px);
 }
-._1x31houd-3-7-1 {
+._1x31houd-3-8-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-7-1 {
+._1x31houe-3-8-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.js

@@ -33,7 +33,6 @@ import {
 import { useToolbar } from "./hooks/useToolbar.js";
 import { TOOLBAR_MESSAGES } from "./messages.js";
 import { doesFitInBounds } from "./utils/does-fit-in-bounds.js";
-import { estimateToolbarWidth } from "./utils/estimate-toolbar-width.js";
 import { getToolbarPlacement } from "./utils/get-toolbar-placement.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
@@ -51,7 +50,7 @@ const InternalChartToolbarRenderer = (props) => {
     behaviorTrackingProps,
     {
       children,
-      visible,
+      visible = false,
       placement,
       collapsed = false,
       draggable = true,
@@ -91,6 +90,8 @@ const InternalChartToolbarRenderer = (props) => {
   const [toolbarElement, setToolbarElement] = useState();
   const [boundSize, boundRef] = useObserveContainerSize();
   const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();
+  const childrenRef = useRef(null);
+  const lastMeasuredWidthRef = useRef(0);
   const intl = useIntl();
   const mouseInBounds = useRef(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -104,10 +105,17 @@ const InternalChartToolbarRenderer = (props) => {
     [toolbarSize, boundSize]
   );
   useEffect(() => {
-    updateFitsBounds(
-      doesFitInBounds(estimateToolbarWidth(children), boundSize)
-    );
-  }, [children, boundSize]);
+    if (!isCollapsable) {
+      return;
+    }
+    if (isExpanded && childrenRef.current) {
+      const w = childrenRef.current.scrollWidth;
+      if (w > 0) {
+        lastMeasuredWidthRef.current = w;
+      }
+    }
+    updateFitsBounds(doesFitInBounds(lastMeasuredWidthRef.current, boundSize));
+  }, [isExpanded, boundSize]);
   useEffect(() => {
     toggleExpanded(fitsBounds && !collapsed);
   }, [collapsed, fitsBounds]);
@@ -265,6 +273,7 @@ const InternalChartToolbarRenderer = (props) => {
               "data-testid": "chart-toolbar-container",
               onBlur: handleOnBlur,
               onKeyDown: handleKeyDown,
+              onPointerDown: onMouseEnterHandler,
               onMouseEnter: onMouseEnterHandler,
               onMouseLeave: onMouseLeaveHandler,
               ...behaviorTrackingProps,
@@ -276,6 +285,7 @@ const InternalChartToolbarRenderer = (props) => {
                     inline: isInlineMode
                   }),
                   "data-testid": "chart-toolbar-wrapper",
+                  ref: childrenRef,
                   children: /* @__PURE__ */ jsxs(Flex, { gap: 0, flexDirection: "row", alignItems: "center", children: [
                     draggable && !removeDragHandle && [
                       /* @__PURE__ */ jsx(

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/toolbar/ChartToolbarRenderer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronRightDoubleIcon,\n  DragAllDirectionIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  chartToolbar,\n  chartToolbarArea,\n  defaultOverlayPadding,\n  grip,\n  outerContainer,\n} from './ChartToolbarRenderer.sty.js';\nimport { ChartToolbarVisibilityOverlay } from './ChartToolbarVisibilityOverlay.js';\nimport { CollapseButton } from './CollapseButton.js';\nimport { ChartDataMenu } from './components/ChartDataMenu.js';\nimport { Control } from './components/Control.js';\nimport { HorizontalDivider, VerticalDivider } from './components/divider.js';\nimport { IntentsCollapsedAndDownloadSection } from './components/IntentsCollapsedAndDownloadSection.js';\nimport { ToolbarMenu } from './components/ToolbarMenu.js';\nimport { TOOLBAR_DRAG_BUTTON_ARIA_LABEL } from './constants.js';\nimport {\n  ChartToolbarContext,\n  type ChartToolbarContextProps,\n} from './context/ChartToolbar.context.js';\nimport { useToolbar } from './hooks/useToolbar.js';\nimport { TOOLBAR_MESSAGES } from './messages.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { doesFitInBounds } from './utils/does-fit-in-bounds.js';\nimport { estimateToolbarWidth } from './utils/estimate-toolbar-width.js';\nimport { getToolbarPlacement } from './utils/get-toolbar-placement.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { A11yToolbarTabIndexContext } from '../../context/A11yToolbarTabIndexContext.js';\nimport { useA11yToolbarControls } from '../../hooks/useA11yToolbarControls.js';\nimport { useDragElement } from '../../hooks/useDragElement.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { getDraggableBounds } from '../../utils/get-draggable-bounds.js';\nimport { INTERACTION_MODE } from '../interactions-overlay/types.js';\n\n/**\n * @internal\n */\nexport const InternalChartToolbarRenderer = (\n  props: PropsWithChildren<ChartToolbarRendererProps>,\n) => {\n  const [\n    behaviorTrackingProps,\n    {\n      children,\n      visible,\n      placement,\n      collapsed = false,\n      draggable = true,\n      removeDragHandle = false,\n      initialA11yState,\n      zIndex,\n      onToggleToolbar,\n      onToggleMenu,\n      onMouseEnter,\n      onMouseLeave,\n      menuIcon,\n      menuTriggerLabel,\n      menuDisplayMode = 'collapsed',\n      onClose,\n      isDownloadEnabled = false,\n      intents,\n      handleDownloadDataToolbar,\n      toolbarDisplayMode = 'overlay',\n      visibleWhenMouseInBounds = false,\n      overlayClassName = defaultOverlayPadding,\n      intentsAsyncTemplate,\n      handlerRef,\n    },\n  ] = _useBehavioralTrackingProps(props);\n\n  const {\n    isExpanded,\n    lastItemSelected,\n    updateLastItemSelected,\n    toggleExpanded,\n    isCollapsable,\n    fitsBounds,\n    updateFitsBounds,\n    shouldShowMenu,\n  } = useToolbar(collapsed, menuDisplayMode);\n  const isInlineMode = toolbarDisplayMode === 'inline';\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean | void>(undefined);\n  const [toolbarElement, setToolbarElement] = useState<HTMLDivElement>();\n\n  const [boundSize, boundRef] = useObserveContainerSize();\n  const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();\n  const intl = useIntl();\n  const mouseInBounds = useRef(false);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const toolbarElementRef = useCallback((toolbarElement: HTMLDivElement) => {\n    setToolbarElement(toolbarElement);\n  }, []);\n\n  const toolbarRef = useMergeRefs([toolbarRefCallback, toolbarElementRef]);\n\n  const { a11yControlsValue, setKeyEvent, setActiveControl } =\n    useA11yToolbarControls(initialA11yState);\n\n  const maxBounds = useMemo(\n    () => getDraggableBounds(toolbarSize, boundSize),\n    [toolbarSize, boundSize],\n  );\n\n  useEffect(() => {\n    updateFitsBounds(\n      doesFitInBounds(estimateToolbarWidth(children), boundSize),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, boundSize]);\n\n  useEffect(() => {\n    toggleExpanded(fitsBounds && !collapsed);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [collapsed, fitsBounds]);\n\n  const initialPosition = getToolbarPlacement(placement, maxBounds);\n\n  const { isDragging, triggerDragRef, didDrag, setDidDrag } = useDragElement(\n    toolbarElement,\n    maxBounds,\n    initialPosition,\n  );\n\n  const expandHandler = useCallback(\n    (isExpanded: boolean) => {\n      toggleExpanded(isExpanded);\n      onToggleToolbar?.(isExpanded);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onToggleToolbar],\n  );\n\n  const handleToggleMenu = (open: boolean) => {\n    if (!open) {\n      if (!mouseInBounds.current) {\n        onMouseLeave?.();\n      } else {\n        onMouseEnter?.();\n      }\n    }\n\n    setIsMenuOpen(open);\n    onToggleMenu?.(open);\n  };\n\n  const collapseButton = useMemo(\n    () =>\n      Array.isArray(children) && (\n        <CollapseButton\n          onClick={(isExpanded: boolean) => {\n            expandHandler(isExpanded);\n            setActiveControl('explore');\n          }}\n        />\n      ),\n    [children, expandHandler, setActiveControl],\n  );\n\n  const expandButton = useMemo(\n    () => (\n      <Control\n        prefixIcon={<ChevronRightDoubleIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.chartToolbarExpand)}\n        onClick={() => expandHandler(true)}\n        tabIndex={-1}\n        testId=\"toolbar-expand-button\"\n        data-dt-name=\"ToolbarExpand\"\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [expandHandler],\n  );\n\n  const onMouseEnterHandler = () => {\n    mouseInBounds.current = true;\n    onMouseEnter?.();\n  };\n\n  const onMouseLeaveHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n    mouseInBounds.current = false;\n    onMouseLeave?.();\n  };\n\n  const handleOnMenuEnter = () => {\n    mouseInBounds.current = false;\n  };\n\n  const handleOnMenuLeave = () => {\n    mouseInBounds.current = true;\n  };\n\n  const onCloseAutoFocus = (e: Event) => {\n    if (\n      ((lastItemSelected === INTERACTION_MODE.Explore && onClose) ||\n        lastItemSelected === INTERACTION_MODE.Zoom) &&\n      onClose\n    ) {\n      // Prevent the autofocus from focusing back on the menu trigger after closing the menu\n      e.preventDefault();\n      onClose();\n      updateLastItemSelected(undefined);\n    }\n  };\n\n  const handleResetDidDrag = useCallback(() => {\n    setDidDrag(false);\n  }, [setDidDrag]);\n  const showCollapsedIntentAndDownloadSubmenu =\n    (!isExpanded || !fitsBounds) && (!!intents?.length || isDownloadEnabled);\n  const showExpandButton = !isExpanded && fitsBounds;\n  const showCollapseButton = isExpanded && isCollapsable;\n  const showIntentMenu =\n    isExpanded && fitsBounds && !!(intents?.length || intentsAsyncTemplate);\n\n  const toolbarMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: true,\n      isExpanded,\n      lastItemSelected,\n      updateLastItemSelected,\n    }),\n    [isExpanded, lastItemSelected, updateLastItemSelected],\n  );\n\n  const intentsMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: false,\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      resetDidDrag: handleResetDidDrag,\n      updateLastItemSelected,\n    }),\n    [\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      handleResetDidDrag,\n      updateLastItemSelected,\n    ],\n  );\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.target === triggerDragRef.current && event.code !== 'Tab') {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      event.stopPropagation();\n      setKeyEvent(event);\n    }\n\n    if (event.code === 'Enter') {\n      event.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <ChartToolbarVisibilityOverlay\n      handlerRef={handlerRef}\n      boundSize={boundSize}\n      setIsVisible={setIsVisible}\n      visibleWhenMouseInBounds={visibleWhenMouseInBounds}\n      isVisible={isVisible}\n    >\n      <div\n        className={clsx(\n          chartToolbarArea({\n            inline: isInlineMode,\n          }),\n          overlayClassName,\n        )}\n        data-testid=\"chart-plot-overlay-toolbar\"\n        ref={boundRef}\n        style={{ zIndex }}\n      >\n        <div\n          className={chartToolbar({ inline: isInlineMode })}\n          id=\"chart-toolbar\"\n          ref={toolbarRef}\n          role=\"toolbar\"\n          data-testid=\"chart-toolbar-container\"\n          onBlur={handleOnBlur}\n          onKeyDown={handleKeyDown}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n          {...behaviorTrackingProps}\n        >\n          <A11yToolbarTabIndexContext.Provider value={a11yControlsValue}>\n            <div\n              className={outerContainer({\n                visible:\n                  visible ||\n                  isMenuOpen ||\n                  isDragging ||\n                  (visibleWhenMouseInBounds && isVisible),\n                inline: isInlineMode,\n              })}\n              data-testid=\"chart-toolbar-wrapper\"\n            >\n              <Flex gap={0} flexDirection=\"row\" alignItems=\"center\">\n                {draggable &&\n                  !removeDragHandle && [\n                    <Tooltip\n                      text={intl.formatMessage(\n                        TOOLBAR_MESSAGES.chartToolbarMove,\n                      )}\n                      disabled={isDragging}\n                      key=\"tooltip\"\n                    >\n                      <Button\n                        className={grip}\n                        ref={triggerDragRef as RefObject<HTMLButtonElement>}\n                        variant=\"default\"\n                        size=\"condensed\"\n                        data-testid=\"chart-toolbar-grip\"\n                        aria-label={TOOLBAR_DRAG_BUTTON_ARIA_LABEL}\n                      >\n                        <Button.Prefix>\n                          <DragAllDirectionIcon />\n                        </Button.Prefix>\n                      </Button>\n                    </Tooltip>,\n                    <VerticalDivider key=\"divider\" />,\n                  ]}\n                <div\n                  data-testid=\"toolbar-children\"\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    touchAction: 'none',\n                  }}\n                  ref={\n                    draggable && removeDragHandle\n                      ? (triggerDragRef as RefObject<HTMLDivElement>)\n                      : undefined\n                  }\n                >\n                  {shouldShowMenu && (\n                    <ChartToolbarContext.Provider value={toolbarMenuConfig}>\n                      <ToolbarMenu\n                        onMenuOpen={handleToggleMenu}\n                        activeModeIcon={menuIcon}\n                        triggerLabel={menuTriggerLabel}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        menuAlignment={isExpanded ? 'start' : 'end'}\n                        onCloseAutoFocus={onCloseAutoFocus}\n                        data-dt-name=\"ToolbarTools\"\n                        data-dt-properties={\n                          isExpanded && fitsBounds\n                            ? 'state:changeMode'\n                            : 'state:tools'\n                        }\n                      >\n                        {children}\n                        <IntentsCollapsedAndDownloadSection\n                          hidden={!showCollapsedIntentAndDownloadSubmenu}\n                          intents={intents}\n                          showDownloadButton={isDownloadEnabled}\n                          handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        />\n                        {showExpandButton && (\n                          <>\n                            <HorizontalDivider />\n                            {expandButton}\n                          </>\n                        )}\n                      </ToolbarMenu>\n                    </ChartToolbarContext.Provider>\n                  )}\n                  <ChartToolbarContext.Provider value={intentsMenuConfig}>\n                    {children}\n                    {showIntentMenu && (\n                      <ChartDataMenu\n                        onMenuOpen={handleToggleMenu}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        isDownloadEnabled={isDownloadEnabled}\n                        handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        intents={intents}\n                        showDivider={!!menuIcon}\n                        isDragging={isDragging}\n                        buttonMode={isInlineMode ? 'inline' : 'standard'}\n                        intentsAsyncTemplate={intentsAsyncTemplate}\n                      />\n                    )}\n                  </ChartToolbarContext.Provider>\n                  {showCollapseButton && collapseButton}\n                </div>\n              </Flex>\n            </div>\n          </A11yToolbarTabIndexContext.Provider>\n        </div>\n      </div>\n    </ChartToolbarVisibilityOverlay>\n  );\n};\n\nInternalChartToolbarRenderer['displayName'] = 'ChartToolbarRenderer';\n\n/**\n * @internal\n */\nexport const ChartToolbarRenderer = Object.assign(\n  InternalChartToolbarRenderer,\n  {\n    Control,\n  },\n);\n"],
-  "mappings": "AA6KQ,SA8NkB,UA9NlB,KA8NkB,YA9NlB;AA7KR,OAAO,UAAU;AACjB;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,0CAA0C;AACnD,SAAS,mBAAmB;AAC5B,SAAS,sCAAsC;AAC/C;AAAA,EACE;AAAA,OAEK;AACP,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAK1B,MAAM,+BAA+B,CAC1C,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB,2BAA2B;AAAA,MAC3B,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,4BAA4B,KAAK;AAErC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,WAAW,eAAe;AACzC,QAAM,eAAe,uBAAuB;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,MAAS;AACtE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAyB;AAErE,QAAM,CAAC,WAAW,QAAQ,IAAI,wBAAwB;AACtD,QAAM,CAAC,aAAa,kBAAkB,IAAI,wBAAwB;AAClE,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,OAAO,KAAK;AAElC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,oBAAoB,YAAY,CAACA,oBAAmC;AACxE,sBAAkBA,eAAc;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,aAAa,CAAC,oBAAoB,iBAAiB,CAAC;AAEvE,QAAM,EAAE,mBAAmB,aAAa,iBAAiB,IACvD,uBAAuB,gBAAgB;AAEzC,QAAM,YAAY;AAAA,IAChB,MAAM,mBAAmB,aAAa,SAAS;AAAA,IAC/C,CAAC,aAAa,SAAS;AAAA,EACzB;AAEA,YAAU,MAAM;AACd;AAAA,MACE,gBAAgB,qBAAqB,QAAQ,GAAG,SAAS;AAAA,IAC3D;AAAA,EAEF,GAAG,CAAC,UAAU,SAAS,CAAC;AAExB,YAAU,MAAM;AACd,mBAAe,cAAc,CAAC,SAAS;AAAA,EAEzC,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,kBAAkB,oBAAoB,WAAW,SAAS;AAEhE,QAAM,EAAE,YAAY,gBAAgB,SAAS,WAAW,IAAI;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAACC,gBAAwB;AACvB,qBAAeA,WAAU;AACzB,wBAAkBA,WAAU;AAAA,IAC9B;AAAA;AAAA,IAEA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,mBAAmB,CAAC,SAAkB;AAC1C,QAAI,CAAC,MAAM;AACT,UAAI,CAAC,cAAc,SAAS;AAC1B,uBAAe;AAAA,MACjB,OAAO;AACL,uBAAe;AAAA,MACjB;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,iBAAiB;AAAA,IACrB,MACE,MAAM,QAAQ,QAAQ,KACpB;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,CAACA,gBAAwB;AAChC,wBAAcA,WAAU;AACxB,2BAAiB,SAAS;AAAA,QAC5B;AAAA;AAAA,IACF;AAAA,IAEJ,CAAC,UAAU,eAAe,gBAAgB;AAAA,EAC5C;AAEA,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,oBAAC,0BAAuB;AAAA,QACpC,aAAa,KAAK,cAAc,iBAAiB,kBAAkB;AAAA,QACnE,SAAS,MAAM,cAAc,IAAI;AAAA,QACjC,UAAU;AAAA,QACV,QAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA;AAAA,IAGF,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,sBAAsB,MAAM;AAChC,kBAAc,UAAU;AACxB,mBAAe;AAAA,EACjB;AAEA,QAAM,sBAAsB,CAAC,UAA2B;AACtD,UAAM,gBAAgB;AACtB,kBAAc,UAAU;AACxB,mBAAe;AAAA,EACjB;AAEA,QAAM,oBAAoB,MAAM;AAC9B,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,oBAAoB,MAAM;AAC9B,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,mBAAmB,CAAC,MAAa;AACrC,SACI,qBAAqB,iBAAiB,WAAW,WACjD,qBAAqB,iBAAiB,SACxC,SACA;AAEA,QAAE,eAAe;AACjB,cAAQ;AACR,6BAAuB,MAAS;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,qBAAqB,YAAY,MAAM;AAC3C,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,yCACH,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,SAAS,UAAU;AACxD,QAAM,mBAAmB,CAAC,cAAc;AACxC,QAAM,qBAAqB,cAAc;AACzC,QAAM,iBACJ,cAAc,cAAc,CAAC,EAAE,SAAS,UAAU;AAEpD,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,kBAAkB,sBAAsB;AAAA,EACvD;AAEA,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,WAAW,eAAe,WAAW,MAAM,SAAS,OAAO;AACnE,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB;AAAA,IACF;AAEA,QAAI,MAAM,SAAS,eAAe,MAAM,SAAS,cAAc;AAC7D,YAAM,gBAAgB;AACtB,kBAAY,KAAK;AAAA,IACnB;AAEA,QAAI,MAAM,SAAS,SAAS;AAC1B,YAAM,gBAAgB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAA2B;AAC/C,UAAM,gBAAgB;AAAA,EACxB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,iBAAiB;AAAA,cACf,QAAQ;AAAA,YACV,CAAC;AAAA,YACD;AAAA,UACF;AAAA,UACA,eAAY;AAAA,UACZ,KAAK;AAAA,UACL,OAAO,EAAE,OAAO;AAAA,UAEhB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,aAAa,EAAE,QAAQ,aAAa,CAAC;AAAA,cAChD,IAAG;AAAA,cACH,KAAK;AAAA,cACL,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,cAAc;AAAA,cACd,cAAc;AAAA,cACb,GAAG;AAAA,cAEJ,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,mBAC1C;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,eAAe;AAAA,oBACxB,SACE,WACA,cACA,cACC,4BAA4B;AAAA,oBAC/B,QAAQ;AAAA,kBACV,CAAC;AAAA,kBACD,eAAY;AAAA,kBAEZ,+BAAC,QAAK,KAAK,GAAG,eAAc,OAAM,YAAW,UAC1C;AAAA,iCACC,CAAC,oBAAoB;AAAA,sBACnB;AAAA,wBAAC;AAAA;AAAA,0BACC,MAAM,KAAK;AAAA,4BACT,iBAAiB;AAAA,0BACnB;AAAA,0BACA,UAAU;AAAA,0BAGV;AAAA,4BAAC;AAAA;AAAA,8BACC,WAAW;AAAA,8BACX,KAAK;AAAA,8BACL,SAAQ;AAAA,8BACR,MAAK;AAAA,8BACL,eAAY;AAAA,8BACZ,cAAY;AAAA,8BAEZ,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,0BACF;AAAA;AAAA,wBAbI;AAAA,sBAcN;AAAA,sBACA,oBAAC,qBAAoB,SAAU;AAAA,oBACjC;AAAA,oBACF;AAAA,sBAAC;AAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,OAAO;AAAA,0BACL,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,aAAa;AAAA,wBACf;AAAA,wBACA,KACE,aAAa,mBACR,iBACD;AAAA,wBAGL;AAAA,4CACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,mBACnC;AAAA,4BAAC;AAAA;AAAA,8BACC,YAAY;AAAA,8BACZ,gBAAgB;AAAA,8BAChB,cAAc;AAAA,8BACd,aAAa;AAAA,8BACb,aAAa;AAAA,8BACb,eAAe,aAAa,UAAU;AAAA,8BACtC;AAAA,8BACA,gBAAa;AAAA,8BACb,sBACE,cAAc,aACV,qBACA;AAAA,8BAGL;AAAA;AAAA,gCACD;AAAA,kCAAC;AAAA;AAAA,oCACC,QAAQ,CAAC;AAAA,oCACT;AAAA,oCACA,oBAAoB;AAAA,oCACpB;AAAA;AAAA,gCACF;AAAA,gCACC,oBACC,iCACE;AAAA,sDAAC,qBAAkB;AAAA,kCAClB;AAAA,mCACH;AAAA;AAAA;AAAA,0BAEJ,GACF;AAAA,0BAEF,qBAAC,oBAAoB,UAApB,EAA6B,OAAO,mBAClC;AAAA;AAAA,4BACA,kBACC;AAAA,8BAAC;AAAA;AAAA,gCACC,YAAY;AAAA,gCACZ,aAAa;AAAA,gCACb,aAAa;AAAA,gCACb;AAAA,gCACA;AAAA,gCACA;AAAA,gCACA,aAAa,CAAC,CAAC;AAAA,gCACf;AAAA,gCACA,YAAY,eAAe,WAAW;AAAA,gCACtC;AAAA;AAAA,4BACF;AAAA,6BAEJ;AAAA,0BACC,sBAAsB;AAAA;AAAA;AAAA,oBACzB;AAAA,qBACF;AAAA;AAAA,cACF,GACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,6BAA6B,aAAa,IAAI;AAKvC,MAAM,uBAAuB,OAAO;AAAA,EACzC;AAAA,EACA;AAAA,IACE;AAAA,EACF;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronRightDoubleIcon,\n  DragAllDirectionIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  chartToolbar,\n  chartToolbarArea,\n  defaultOverlayPadding,\n  grip,\n  outerContainer,\n} from './ChartToolbarRenderer.sty.js';\nimport { ChartToolbarVisibilityOverlay } from './ChartToolbarVisibilityOverlay.js';\nimport { CollapseButton } from './CollapseButton.js';\nimport { ChartDataMenu } from './components/ChartDataMenu.js';\nimport { Control } from './components/Control.js';\nimport { HorizontalDivider, VerticalDivider } from './components/divider.js';\nimport { IntentsCollapsedAndDownloadSection } from './components/IntentsCollapsedAndDownloadSection.js';\nimport { ToolbarMenu } from './components/ToolbarMenu.js';\nimport { TOOLBAR_DRAG_BUTTON_ARIA_LABEL } from './constants.js';\nimport {\n  ChartToolbarContext,\n  type ChartToolbarContextProps,\n} from './context/ChartToolbar.context.js';\nimport { useToolbar } from './hooks/useToolbar.js';\nimport { TOOLBAR_MESSAGES } from './messages.js';\nimport type { ChartToolbarRendererProps } from './types.js';\nimport { doesFitInBounds } from './utils/does-fit-in-bounds.js';\nimport { getToolbarPlacement } from './utils/get-toolbar-placement.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { A11yToolbarTabIndexContext } from '../../context/A11yToolbarTabIndexContext.js';\nimport { useA11yToolbarControls } from '../../hooks/useA11yToolbarControls.js';\nimport { useDragElement } from '../../hooks/useDragElement.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { getDraggableBounds } from '../../utils/get-draggable-bounds.js';\nimport { INTERACTION_MODE } from '../interactions-overlay/types.js';\n\n/**\n * @internal\n */\nexport const InternalChartToolbarRenderer = (\n  props: PropsWithChildren<ChartToolbarRendererProps>,\n) => {\n  const [\n    behaviorTrackingProps,\n    {\n      children,\n      visible = false,\n      placement,\n      collapsed = false,\n      draggable = true,\n      removeDragHandle = false,\n      initialA11yState,\n      zIndex,\n      onToggleToolbar,\n      onToggleMenu,\n      onMouseEnter,\n      onMouseLeave,\n      menuIcon,\n      menuTriggerLabel,\n      menuDisplayMode = 'collapsed',\n      onClose,\n      isDownloadEnabled = false,\n      intents,\n      handleDownloadDataToolbar,\n      toolbarDisplayMode = 'overlay',\n      visibleWhenMouseInBounds = false,\n      overlayClassName = defaultOverlayPadding,\n      intentsAsyncTemplate,\n      handlerRef,\n    },\n  ] = _useBehavioralTrackingProps(props);\n\n  const {\n    isExpanded,\n    lastItemSelected,\n    updateLastItemSelected,\n    toggleExpanded,\n    isCollapsable,\n    fitsBounds,\n    updateFitsBounds,\n    shouldShowMenu,\n  } = useToolbar(collapsed, menuDisplayMode);\n  const isInlineMode = toolbarDisplayMode === 'inline';\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean | void>(undefined);\n  const [toolbarElement, setToolbarElement] = useState<HTMLDivElement>();\n\n  const [boundSize, boundRef] = useObserveContainerSize();\n  const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();\n  const childrenRef = useRef<HTMLDivElement | null>(null);\n  const lastMeasuredWidthRef = useRef<number>(0);\n  const intl = useIntl();\n  const mouseInBounds = useRef(false);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const toolbarElementRef = useCallback((toolbarElement: HTMLDivElement) => {\n    setToolbarElement(toolbarElement);\n  }, []);\n\n  const toolbarRef = useMergeRefs([toolbarRefCallback, toolbarElementRef]);\n\n  const { a11yControlsValue, setKeyEvent, setActiveControl } =\n    useA11yToolbarControls(initialA11yState);\n\n  const maxBounds = useMemo(\n    () => getDraggableBounds(toolbarSize, boundSize),\n    [toolbarSize, boundSize],\n  );\n\n  useEffect(() => {\n    if (!isCollapsable) {\n      return;\n    }\n\n    if (isExpanded && childrenRef.current) {\n      const w = childrenRef.current.scrollWidth;\n      if (w > 0) {\n        lastMeasuredWidthRef.current = w;\n      }\n    }\n\n    updateFitsBounds(doesFitInBounds(lastMeasuredWidthRef.current, boundSize));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isExpanded, boundSize]);\n\n  useEffect(() => {\n    toggleExpanded(fitsBounds && !collapsed);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [collapsed, fitsBounds]);\n\n  const initialPosition = getToolbarPlacement(placement, maxBounds);\n\n  const { isDragging, triggerDragRef, didDrag, setDidDrag } = useDragElement(\n    toolbarElement,\n    maxBounds,\n    initialPosition,\n  );\n\n  const expandHandler = useCallback(\n    (isExpanded: boolean) => {\n      toggleExpanded(isExpanded);\n      onToggleToolbar?.(isExpanded);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onToggleToolbar],\n  );\n\n  const handleToggleMenu = (open: boolean) => {\n    if (!open) {\n      if (!mouseInBounds.current) {\n        onMouseLeave?.();\n      } else {\n        onMouseEnter?.();\n      }\n    }\n\n    setIsMenuOpen(open);\n    onToggleMenu?.(open);\n  };\n\n  const collapseButton = useMemo(\n    () =>\n      Array.isArray(children) && (\n        <CollapseButton\n          onClick={(isExpanded: boolean) => {\n            expandHandler(isExpanded);\n            setActiveControl('explore');\n          }}\n        />\n      ),\n    [children, expandHandler, setActiveControl],\n  );\n\n  const expandButton = useMemo(\n    () => (\n      <Control\n        prefixIcon={<ChevronRightDoubleIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.chartToolbarExpand)}\n        onClick={() => expandHandler(true)}\n        tabIndex={-1}\n        testId=\"toolbar-expand-button\"\n        data-dt-name=\"ToolbarExpand\"\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [expandHandler],\n  );\n\n  const onMouseEnterHandler = () => {\n    mouseInBounds.current = true;\n    onMouseEnter?.();\n  };\n\n  const onMouseLeaveHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n    mouseInBounds.current = false;\n    onMouseLeave?.();\n  };\n\n  const handleOnMenuEnter = () => {\n    mouseInBounds.current = false;\n  };\n\n  const handleOnMenuLeave = () => {\n    mouseInBounds.current = true;\n  };\n\n  const onCloseAutoFocus = (e: Event) => {\n    if (\n      ((lastItemSelected === INTERACTION_MODE.Explore && onClose) ||\n        lastItemSelected === INTERACTION_MODE.Zoom) &&\n      onClose\n    ) {\n      // Prevent the autofocus from focusing back on the menu trigger after closing the menu\n      e.preventDefault();\n      onClose();\n      updateLastItemSelected(undefined);\n    }\n  };\n\n  const handleResetDidDrag = useCallback(() => {\n    setDidDrag(false);\n  }, [setDidDrag]);\n  const showCollapsedIntentAndDownloadSubmenu =\n    (!isExpanded || !fitsBounds) && (!!intents?.length || isDownloadEnabled);\n  const showExpandButton = !isExpanded && fitsBounds;\n  const showCollapseButton = isExpanded && isCollapsable;\n  const showIntentMenu =\n    isExpanded && fitsBounds && !!(intents?.length || intentsAsyncTemplate);\n\n  const toolbarMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: true,\n      isExpanded,\n      lastItemSelected,\n      updateLastItemSelected,\n    }),\n    [isExpanded, lastItemSelected, updateLastItemSelected],\n  );\n\n  const intentsMenuConfig = useMemo<ChartToolbarContextProps>(\n    () => ({\n      isMenuElement: false,\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      resetDidDrag: handleResetDidDrag,\n      updateLastItemSelected,\n    }),\n    [\n      isExpanded,\n      lastItemSelected,\n      didDrag,\n      handleResetDidDrag,\n      updateLastItemSelected,\n    ],\n  );\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.target === triggerDragRef.current && event.code !== 'Tab') {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      event.stopPropagation();\n      setKeyEvent(event);\n    }\n\n    if (event.code === 'Enter') {\n      event.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = (event: ReactFocusEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <ChartToolbarVisibilityOverlay\n      handlerRef={handlerRef}\n      boundSize={boundSize}\n      setIsVisible={setIsVisible}\n      visibleWhenMouseInBounds={visibleWhenMouseInBounds}\n      isVisible={isVisible}\n    >\n      <div\n        className={clsx(\n          chartToolbarArea({\n            inline: isInlineMode,\n          }),\n          overlayClassName,\n        )}\n        data-testid=\"chart-plot-overlay-toolbar\"\n        ref={boundRef}\n        style={{ zIndex }}\n      >\n        <div\n          className={chartToolbar({ inline: isInlineMode })}\n          id=\"chart-toolbar\"\n          ref={toolbarRef}\n          role=\"toolbar\"\n          data-testid=\"chart-toolbar-container\"\n          onBlur={handleOnBlur}\n          onKeyDown={handleKeyDown}\n          onPointerDown={onMouseEnterHandler}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n          {...behaviorTrackingProps}\n        >\n          <A11yToolbarTabIndexContext.Provider value={a11yControlsValue}>\n            <div\n              className={outerContainer({\n                visible:\n                  visible ||\n                  isMenuOpen ||\n                  isDragging ||\n                  (visibleWhenMouseInBounds && isVisible),\n                inline: isInlineMode,\n              })}\n              data-testid=\"chart-toolbar-wrapper\"\n              ref={childrenRef}\n            >\n              <Flex gap={0} flexDirection=\"row\" alignItems=\"center\">\n                {draggable &&\n                  !removeDragHandle && [\n                    <Tooltip\n                      text={intl.formatMessage(\n                        TOOLBAR_MESSAGES.chartToolbarMove,\n                      )}\n                      disabled={isDragging}\n                      key=\"tooltip\"\n                    >\n                      <Button\n                        className={grip}\n                        ref={triggerDragRef as RefObject<HTMLButtonElement>}\n                        variant=\"default\"\n                        size=\"condensed\"\n                        data-testid=\"chart-toolbar-grip\"\n                        aria-label={TOOLBAR_DRAG_BUTTON_ARIA_LABEL}\n                      >\n                        <Button.Prefix>\n                          <DragAllDirectionIcon />\n                        </Button.Prefix>\n                      </Button>\n                    </Tooltip>,\n                    <VerticalDivider key=\"divider\" />,\n                  ]}\n                <div\n                  data-testid=\"toolbar-children\"\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    touchAction: 'none',\n                  }}\n                  ref={\n                    draggable && removeDragHandle\n                      ? (triggerDragRef as RefObject<HTMLDivElement>)\n                      : undefined\n                  }\n                >\n                  {shouldShowMenu && (\n                    <ChartToolbarContext.Provider value={toolbarMenuConfig}>\n                      <ToolbarMenu\n                        onMenuOpen={handleToggleMenu}\n                        activeModeIcon={menuIcon}\n                        triggerLabel={menuTriggerLabel}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        menuAlignment={isExpanded ? 'start' : 'end'}\n                        onCloseAutoFocus={onCloseAutoFocus}\n                        data-dt-name=\"ToolbarTools\"\n                        data-dt-properties={\n                          isExpanded && fitsBounds\n                            ? 'state:changeMode'\n                            : 'state:tools'\n                        }\n                      >\n                        {children}\n                        <IntentsCollapsedAndDownloadSection\n                          hidden={!showCollapsedIntentAndDownloadSubmenu}\n                          intents={intents}\n                          showDownloadButton={isDownloadEnabled}\n                          handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        />\n                        {showExpandButton && (\n                          <>\n                            <HorizontalDivider />\n                            {expandButton}\n                          </>\n                        )}\n                      </ToolbarMenu>\n                    </ChartToolbarContext.Provider>\n                  )}\n                  <ChartToolbarContext.Provider value={intentsMenuConfig}>\n                    {children}\n                    {showIntentMenu && (\n                      <ChartDataMenu\n                        onMenuOpen={handleToggleMenu}\n                        onMenuEnter={handleOnMenuEnter}\n                        onMenuLeave={handleOnMenuLeave}\n                        isDownloadEnabled={isDownloadEnabled}\n                        handleDownloadDataToolbar={handleDownloadDataToolbar}\n                        intents={intents}\n                        showDivider={!!menuIcon}\n                        isDragging={isDragging}\n                        buttonMode={isInlineMode ? 'inline' : 'standard'}\n                        intentsAsyncTemplate={intentsAsyncTemplate}\n                      />\n                    )}\n                  </ChartToolbarContext.Provider>\n                  {showCollapseButton && collapseButton}\n                </div>\n              </Flex>\n            </div>\n          </A11yToolbarTabIndexContext.Provider>\n        </div>\n      </div>\n    </ChartToolbarVisibilityOverlay>\n  );\n};\n\nInternalChartToolbarRenderer['displayName'] = 'ChartToolbarRenderer';\n\n/**\n * @internal\n */\nexport const ChartToolbarRenderer = Object.assign(\n  InternalChartToolbarRenderer,\n  {\n    Control,\n  },\n);\n"],
+  "mappings": "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",
   "names": ["toolbarElement", "isExpanded"]
 }

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.sty.js

@@ -1,14 +1,14 @@
 import "../chart-grid/ChartGrid.css";
 import "./ChartToolbarRenderer.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartToolbar = _7a468({ defaultClassName: "_1x31hou5-3-7-1", variantClassNames: { inline: { true: "_1x31hou6-3-7-1", false: "_1x31hou7-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var chartToolbarArea = _7a468({ defaultClassName: "_1x31hou9-3-7-1", variantClassNames: { inline: { true: "_1x31houa-3-7-1", false: "_1x31houb-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultOverlayPadding = "_1x31houc-3-7-1";
-var grip = "_1x31hou4-3-7-1";
-var outerContainer = _7a468({ defaultClassName: "_1x31hou0-3-7-1", variantClassNames: { visible: { true: "_1x31hou1-3-7-1", false: "_1x31hou2-3-7-1" }, inline: { true: "_1x31hou3-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var styledHorizontalDivider = "_1x31houe-3-7-1";
-var styledVerticalDivider = "_1x31houd-3-7-1";
-var toolbarVisibilityOverlay = "_1x31hou8-3-7-1 _13lzg4k0-3-7-1";
+var chartToolbar = _7a468({ defaultClassName: "_1x31hou5-3-8-0", variantClassNames: { inline: { true: "_1x31hou6-3-8-0", false: "_1x31hou7-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartToolbarArea = _7a468({ defaultClassName: "_1x31hou9-3-8-0", variantClassNames: { inline: { true: "_1x31houa-3-8-0", false: "_1x31houb-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultOverlayPadding = "_1x31houc-3-8-0";
+var grip = "_1x31hou4-3-8-0";
+var outerContainer = _7a468({ defaultClassName: "_1x31hou0-3-8-0", variantClassNames: { visible: { true: "_1x31hou1-3-8-0", false: "_1x31hou2-3-8-0" }, inline: { true: "_1x31hou3-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledHorizontalDivider = "_1x31houe-3-8-0";
+var styledVerticalDivider = "_1x31houd-3-8-0";
+var toolbarVisibilityOverlay = "_1x31hou8-3-8-0 _13lzg4k0-3-8-0";
 export {
   chartToolbar,
   chartToolbarArea,

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/toolbar/ChartToolbarRenderer.css.ts"],
-  "sourcesContent": ["import '../chart-grid/ChartGrid.css';\nimport './ChartToolbarRenderer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartToolbar = _7a468({defaultClassName:'_1x31hou5-3-7-1',variantClassNames:{inline:{true:'_1x31hou6-3-7-1',false:'_1x31hou7-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var chartToolbarArea = _7a468({defaultClassName:'_1x31hou9-3-7-1',variantClassNames:{inline:{true:'_1x31houa-3-7-1',false:'_1x31houb-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var defaultOverlayPadding = '_1x31houc-3-7-1';\nexport var grip = '_1x31hou4-3-7-1';\nexport var outerContainer = _7a468({defaultClassName:'_1x31hou0-3-7-1',variantClassNames:{visible:{true:'_1x31hou1-3-7-1',false:'_1x31hou2-3-7-1'},inline:{true:'_1x31hou3-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var styledHorizontalDivider = '_1x31houe-3-7-1';\nexport var styledVerticalDivider = '_1x31houd-3-7-1';\nexport var toolbarVisibilityOverlay = '_1x31hou8-3-7-1 _13lzg4k0-3-7-1';"],
+  "sourcesContent": ["import '../chart-grid/ChartGrid.css';\nimport './ChartToolbarRenderer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartToolbar = _7a468({defaultClassName:'_1x31hou5-3-8-0',variantClassNames:{inline:{true:'_1x31hou6-3-8-0',false:'_1x31hou7-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var chartToolbarArea = _7a468({defaultClassName:'_1x31hou9-3-8-0',variantClassNames:{inline:{true:'_1x31houa-3-8-0',false:'_1x31houb-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var defaultOverlayPadding = '_1x31houc-3-8-0';\nexport var grip = '_1x31hou4-3-8-0';\nexport var outerContainer = _7a468({defaultClassName:'_1x31hou0-3-8-0',variantClassNames:{visible:{true:'_1x31hou1-3-8-0',false:'_1x31hou2-3-8-0'},inline:{true:'_1x31hou3-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var styledHorizontalDivider = '_1x31houe-3-8-0';\nexport var styledVerticalDivider = '_1x31houd-3-8-0';\nexport var toolbarVisibilityOverlay = '_1x31hou8-3-8-0 _13lzg4k0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjL,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrL,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpN,IAAI,0BAA0B;AAC9B,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/core/components/toolbar/components/ChartDataMenu.css

@@ -1,9 +1,9 @@
-._1hxr84t0-3-7-1 {
+._1hxr84t0-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1hxr84t0-3-7-1:hover {
+._1hxr84t0-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }

package/esm/charts/core/components/toolbar/components/ChartDataMenu.sty.js

@@ -1,5 +1,5 @@
 import "./ChartDataMenu.css";
-var triggerButton = "_1hxr84t0-3-7-1";
+var triggerButton = "_1hxr84t0-3-8-0";
 export {
   triggerButton
 };

package/esm/charts/core/components/toolbar/components/ChartDataMenu.sty.js.map

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