@dynatrace/strato-components 3.1.3 → 3.2.0

package/charts/core/components/threshold-bar/utils/get-marker-pixel.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleLinear, ScaleLogarithmic, ScaleSymLog } from 'd3-scale';
+/**
+ * Converts a domain value to its pixel position for a ThresholdBar marker.
+ * Infinite values are preserved as-is so the ThresholdBar can sort and group markers correctly.
+ * Finite values are converted to pixel coordinates using the provided scale and layout.
+ * @param value - domain value (can be Infinity/-Infinity for unbounded thresholds)
+ * @param scale - axis scale
+ * @param layout - chart orientation
+ * @returns pixel position, or Infinity/-Infinity for unbounded values
+ */
+export declare function getMarkerPixel(value: number, scale: ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ScaleSymLog<number, number>, layout: 'vertical' | 'horizontal'): number;

package/charts/core/{utils/outputMessages.js → components/threshold-bar/utils/get-marker-pixel.js}

@@ -16,15 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var outputMessages_exports = {};
-__export(outputMessages_exports, {
-  outputMessages: () => outputMessages
+var get_marker_pixel_exports = {};
+__export(get_marker_pixel_exports, {
+  getMarkerPixel: () => getMarkerPixel
 });
-module.exports = __toCommonJS(outputMessages_exports);
-var import_is_node_environment = require("../../../core/utils/is-node-environment.js");
-function outputMessages(messages, customHandler) {
-  if ((0, import_is_node_environment.isDev)()) {
-    messages.forEach(({ message }) => console.warn(message));
+module.exports = __toCommonJS(get_marker_pixel_exports);
+var import_get_threshold_pixel_ts = require("./get-threshold-pixel.ts.js");
+function getMarkerPixel(value, scale, layout) {
+  if (!isFinite(value)) {
+    return layout === "vertical" ? -value : value;
   }
-  customHandler?.(messages);
+  return (0, import_get_threshold_pixel_ts.getThresholdPixel)(value, scale, layout);
 }

package/charts/core/components/threshold-bar/utils/group-overlapping-markers.js

@@ -33,7 +33,7 @@ function getPixelBoundary(threshold, type) {
 function groupOverlappingMarkers(markers) {
   const groups = [];
   const sortedByMin = [...markers].sort(
-    (markerA, markerB) => Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1)
+    (markerA, markerB) => Math.min(markerA.y0, markerA.y1) - Math.min(markerB.y0, markerB.y1) || Math.max(markerA.y0, markerA.y1) - Math.max(markerB.y0, markerB.y1)
   );
   for (const current of sortedByMin) {
     const currentMin = getPixelBoundary(current, "min");

package/charts/core/components/threshold-bar/utils/resolve-infinite-pixel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Resolves Infinity/-Infinity pixel values to just beyond the chart boundary so
+ * the pill's rounded cap is clipped by the SVG viewport, producing a flat edge.
+ * Finite pixel values are returned unchanged.
+ * @param y - pixel position (may be Infinity/-Infinity for unbounded thresholds)
+ * @param plotSize - length of the plot area in pixels
+ */
+export declare function resolveInfinitePixel(y: number, plotSize: number): number;

package/charts/core/components/threshold-bar/utils/resolve-infinite-pixel.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resolve_infinite_pixel_exports = {};
+__export(resolve_infinite_pixel_exports, {
+  resolveInfinitePixel: () => resolveInfinitePixel
+});
+module.exports = __toCommonJS(resolve_infinite_pixel_exports);
+var import_constants = require("../markers/constants.js");
+function resolveInfinitePixel(y, plotSize) {
+  if (isFinite(y)) {
+    return y;
+  }
+  const isPositive = y > 0;
+  return isPositive ? plotSize + import_constants.MARKER_RADIUS : -import_constants.MARKER_RADIUS;
+}

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

@@ -1,58 +1,58 @@
-._1x31hou0-3-1-3 {
+._1x31hou0-3-2-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);
   width: fit-content;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1x31hou1-3-1-3 {
+._1x31hou1-3-2-0 {
   visibility: visible;
 }
-._1x31hou2-3-1-3 {
+._1x31hou2-3-2-0 {
   visibility: hidden;
 }
-._1x31hou3-3-1-3 {
+._1x31hou3-3-2-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-1-3 {
+._1x31hou4-3-2-0 {
   background-color: transparent;
   cursor: grab;
 }
-._1x31hou5-3-1-3 {
+._1x31hou5-3-2-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-1-3 {
+._1x31hou6-3-2-0 {
   position: relative;
 }
-._1x31hou7-3-1-3 {
+._1x31hou7-3-2-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-1-3 * {
+body[data-scroll-locked] ._1x31hou8-3-2-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-1-3 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-2-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-1-3 {
+._1x31hou9-3-2-0 {
   pointer-events: none;
 }
-._1x31houa-3-1-3 {
+._1x31houa-3-2-0 {
   position: relative;
 }
-._1x31houb-3-1-3 {
+._1x31houb-3-2-0 {
   position: absolute;
 }
-._1x31houc-3-1-3 {
+._1x31houc-3-2-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-1-3 {
+._1x31houd-3-2-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-1-3 {
+._1x31houe-3-2-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

package/charts/core/components/toolbar/ChartToolbarRenderer.d.ts

@@ -14,5 +14,5 @@ export declare const ChartToolbarRenderer: {
     (props: PropsWithChildren<ChartToolbarRendererProps>): import("react/jsx-runtime.js").JSX.Element;
     displayName: string;
 } & {
-    Control: (props: import("./components/Control.js").ChartToolbarControlProps & import("react").RefAttributes<HTMLButtonElement | null>) => React.ReactElement | null;
+    Control: (props: import("./components/Control.js").ChartToolbarControlProps & import("react").RefAttributes<HTMLButtonElement | null>) => import("react").ReactElement | null;
 };

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

@@ -53,6 +53,7 @@ var import_does_fit_in_bounds = require("./utils/does-fit-in-bounds.js");
 var import_estimate_toolbar_width = require("./utils/estimate-toolbar-width.js");
 var import_get_toolbar_placement = require("./utils/get-toolbar-placement.js");
 var import_Button = require("../../../../buttons/button/Button.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../../../core/hooks/useMergeRefs.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_Tooltip = require("../../../../overlays/tooltip/Tooltip.js");
@@ -63,32 +64,35 @@ var import_useObserveContainerSize = require("../../hooks/useObserveContainerSiz
 var import_get_draggable_bounds = require("../../utils/get-draggable-bounds.js");
 var import_types = require("../interactions-overlay/types.js");
 const InternalChartToolbarRenderer = (props) => {
-  const {
-    children,
-    visible,
-    placement,
-    collapsed = false,
-    draggable = true,
-    removeDragHandle = false,
-    initialA11yState,
-    zIndex,
-    onToggleToolbar,
-    onToggleMenu,
-    onMouseEnter,
-    onMouseLeave,
-    menuIcon,
-    menuTriggerLabel,
-    menuDisplayMode = "collapsed",
-    onClose,
-    isDownloadEnabled = false,
-    intents,
-    handleDownloadDataToolbar,
-    toolbarDisplayMode = "overlay",
-    visibleWhenMouseInBounds = false,
-    overlayClassName = import_ChartToolbarRenderer_css.defaultOverlayPadding,
-    intentsAsyncTemplate,
-    handlerRef
-  } = props;
+  const [
+    behaviorTrackingProps,
+    {
+      children,
+      visible,
+      placement,
+      collapsed = false,
+      draggable = true,
+      removeDragHandle = false,
+      initialA11yState,
+      zIndex,
+      onToggleToolbar,
+      onToggleMenu,
+      onMouseEnter,
+      onMouseLeave,
+      menuIcon,
+      menuTriggerLabel,
+      menuDisplayMode = "collapsed",
+      onClose,
+      isDownloadEnabled = false,
+      intents,
+      handleDownloadDataToolbar,
+      toolbarDisplayMode = "overlay",
+      visibleWhenMouseInBounds = false,
+      overlayClassName = import_ChartToolbarRenderer_css.defaultOverlayPadding,
+      intentsAsyncTemplate,
+      handlerRef
+    }
+  ] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const {
     isExpanded,
     lastItemSelected,
@@ -280,6 +284,7 @@ const InternalChartToolbarRenderer = (props) => {
               onKeyDown: handleKeyDown,
               onMouseEnter: onMouseEnterHandler,
               onMouseLeave: onMouseLeaveHandler,
+              ...behaviorTrackingProps,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yToolbarTabIndexContext.A11yToolbarTabIndexContext.Provider, { value: a11yControlsValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "div",
                 {

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

@@ -31,11 +31,11 @@ module.exports = __toCommonJS(ChartToolbarRenderer_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../chart-grid/ChartGrid.css");
 var import_ChartToolbarRenderer_css_ts_vanilla = require("./ChartToolbarRenderer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-1-3", variantClassNames: { inline: { true: "_1x31hou6-3-1-3", false: "_1x31hou7-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-1-3", variantClassNames: { inline: { true: "_1x31houa-3-1-3", false: "_1x31houb-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultOverlayPadding = "_1x31houc-3-1-3";
-var grip = "_1x31hou4-3-1-3";
-var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-1-3", variantClassNames: { visible: { true: "_1x31hou1-3-1-3", false: "_1x31hou2-3-1-3" }, inline: { true: "_1x31hou3-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledHorizontalDivider = "_1x31houe-3-1-3";
-var styledVerticalDivider = "_1x31houd-3-1-3";
-var toolbarVisibilityOverlay = "_1x31hou8-3-1-3 _13lzg4k0-3-1-3";
+var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-2-0", variantClassNames: { inline: { true: "_1x31hou6-3-2-0", false: "_1x31hou7-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-2-0", variantClassNames: { inline: { true: "_1x31houa-3-2-0", false: "_1x31houb-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultOverlayPadding = "_1x31houc-3-2-0";
+var grip = "_1x31hou4-3-2-0";
+var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-2-0", variantClassNames: { visible: { true: "_1x31hou1-3-2-0", false: "_1x31hou2-3-2-0" }, inline: { true: "_1x31hou3-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledHorizontalDivider = "_1x31houe-3-2-0";
+var styledVerticalDivider = "_1x31houd-3-2-0";
+var toolbarVisibilityOverlay = "_1x31hou8-3-2-0 _13lzg4k0-3-2-0";

package/charts/core/components/toolbar/ChartToolbarVisibilityOverlay.js

@@ -47,7 +47,7 @@ const ChartToolbarVisibilityOverlay = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisibilityOverlay, { ...props });
 };
 const VisibilityOverlay = (props) => {
-  const { boundSize, children, setIsVisible, isVisible } = props;
+  const { boundSize, children, setIsVisible, isVisible, handlerRef } = props;
   const overlayRef = (0, import_react.useRef)(null);
   const overlayState = (0, import_react.useMemo)(() => {
     let bounds;
@@ -70,10 +70,15 @@ const VisibilityOverlay = (props) => {
     overlayState.resetBounds();
     setIsVisible(false);
   }, [boundSize.height, boundSize.width]);
-  (0, import_react.useImperativeHandle)(props.handlerRef, () => {
-    return {
-      handleFocus: () => {
+  (0, import_react.useEffect)(() => {
+    if (handlerRef?.current) {
+      handlerRef.current.handleFocus = () => {
         setIsVisible(true);
+      };
+    }
+    return () => {
+      if (handlerRef?.current) {
+        handlerRef.current.handleFocus = () => null;
       }
     };
   });

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

@@ -1,9 +1,9 @@
-._1hxr84t0-3-1-3 {
+._1hxr84t0-3-2-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-1-3:hover {
+._1hxr84t0-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }

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

@@ -22,4 +22,4 @@ __export(ChartDataMenu_css_exports, {
 });
 module.exports = __toCommonJS(ChartDataMenu_css_exports);
 var import_ChartDataMenu_css_ts_vanilla = require("./ChartDataMenu.css");
-var triggerButton = "_1hxr84t0-3-1-3";
+var triggerButton = "_1hxr84t0-3-2-0";

package/charts/core/components/toolbar/components/Control.css

@@ -1,46 +1,46 @@
-._1ukritl0-3-1-3 {
+._1ukritl0-3-2-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._1ukritl1-3-1-3 {
+._1ukritl1-3-2-0 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-._1ukritl2-3-1-3 {
+._1ukritl2-3-2-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1ukritl3-3-1-3 {
+._1ukritl3-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl4-3-1-3 {
+._1ukritl4-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1ukritl5-3-1-3 {
+._1ukritl5-3-2-0 {
   position: relative;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1ukritl6-3-1-3 {
+._1ukritl6-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._1ukritl6-3-1-3:hover {
+._1ukritl6-3-2-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
 }
-._1ukritl7-3-1-3 {
+._1ukritl7-3-2-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritl8-3-1-3 {
+._1ukritl8-3-2-0 {
   background-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   position: relative;
 }
-._1ukritl8-3-1-3::before {
+._1ukritl8-3-2-0::before {
   content: "";
   position: absolute;
   border-radius: 2px;
@@ -50,25 +50,25 @@
   width: 0;
   height: 0;
 }
-._1ukritl8-3-1-3:active {
+._1ukritl8-3-2-0:active {
   background-color: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1ukritl9-3-1-3 {
+._1ukritl9-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl9-3-1-3:hover {
+._1ukritl9-3-2-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
   cursor: not-allowed;
 }
-._1ukritla-3-1-3 {
+._1ukritla-3-2-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritla-3-1-3::before {
+._1ukritla-3-2-0::before {
   width: 2px;
   height: 20px;
 }
-._1ukritla-3-1-3:hover {
+._1ukritla-3-2-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }

package/charts/core/components/toolbar/components/Control.d.ts

@@ -48,4 +48,4 @@ export interface ChartToolbarControlProps extends StylingProps {
  * ChartToolbar generic control component
  * @internal
  */
-export declare const Control: (props: ChartToolbarControlProps & import("react").RefAttributes<HTMLButtonElement | null>) => React.ReactElement | null;
+export declare const Control: (props: ChartToolbarControlProps & import("react").RefAttributes<HTMLButtonElement | null>) => import("react").ReactElement | null;

package/charts/core/components/toolbar/components/Control.sty.js

@@ -27,8 +27,8 @@ __export(Control_css_exports, {
 module.exports = __toCommonJS(Control_css_exports);
 var import_Control_css_ts_vanilla = require("./Control.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-1-3", variantClassNames: { disabled: { true: "_1ukritl6-3-1-3" }, selected: { true: "_1ukritl7-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-1-3", variantClassNames: { disabled: { true: "_1ukritl9-3-1-3" }, selected: { true: "_1ukritla-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledMenuItemContent = "_1ukritl1-3-1-3";
-var styledShortcut = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-1-3", variantClassNames: { disabled: { true: "_1ukritl3-3-1-3", false: "_1ukritl4-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var styledText = "_1ukritl0-3-1-3";
+var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-2-0", variantClassNames: { disabled: { true: "_1ukritl6-3-2-0" }, selected: { true: "_1ukritl7-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-2-0", variantClassNames: { disabled: { true: "_1ukritl9-3-2-0" }, selected: { true: "_1ukritla-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledMenuItemContent = "_1ukritl1-3-2-0";
+var styledShortcut = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-2-0", variantClassNames: { disabled: { true: "_1ukritl3-3-2-0", false: "_1ukritl4-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledText = "_1ukritl0-3-2-0";

package/charts/core/components/toolbar/components/ToolbarMenu.css

@@ -1,14 +1,14 @@
-._auj9i40-3-1-3 {
+._auj9i40-3-2-0 {
   align-items: center;
   display: flex;
 }
-._auj9i41-3-1-3 {
+._auj9i41-3-2-0 {
   height: var(--dt-spacings-size-20, 20px);
   width: var(--dt-spacings-size-24, 24px);
 }
-._auj9i42-3-1-3 {
+._auj9i42-3-2-0 {
   height: var(--dt-spacings-size-24, 24px);
 }
-._auj9i43-3-1-3 {
+._auj9i43-3-2-0 {
   min-width: 215px;
 }

package/charts/core/components/toolbar/components/ToolbarMenu.sty.js

@@ -24,5 +24,5 @@ __export(ToolbarMenu_css_exports, {
 module.exports = __toCommonJS(ToolbarMenu_css_exports);
 var import_ToolbarMenu_css_ts_vanilla = require("./ToolbarMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var styledToolbarMenuContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_auj9i40-3-1-3", variantClassNames: { inline: { true: "_auj9i41-3-1-3", false: "_auj9i42-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var toolbarMenuGroup = "_auj9i43-3-1-3";
+var styledToolbarMenuContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_auj9i40-3-2-0", variantClassNames: { inline: { true: "_auj9i41-3-2-0", false: "_auj9i42-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var toolbarMenuGroup = "_auj9i43-3-2-0";

package/charts/core/components/toolbar/messages.js

@@ -39,7 +39,7 @@ const TOOLBAR_MESSAGES = (0, import_react_intl.defineMessages)({
     description: 'Text in a tooltip shown when hovering "Expand" action in the time series chart toolbar'
   },
   downloadDataButton: {
-    id: "XG4+8k1q7r7m7b0I",
+    id: "f4/NcUWxDYnAQ68s",
     defaultMessage: "Download as CSV",
     description: 'Text in "Download data" button in the chart toolbar'
   },
@@ -49,7 +49,7 @@ const TOOLBAR_MESSAGES = (0, import_react_intl.defineMessages)({
     description: 'Text in a tooltip shown when hovering the "Download data" button in the time series chart toolbar'
   },
   moreOptions: {
-    id: "X5m4H8p7gk3v1+6D",
+    id: "eONO7S5ZXY7V+R6d",
     defaultMessage: "More options",
     description: "Text in button that opens a menu with more actions in the chart toolbar"
   },

package/charts/core/components/toolbar/types.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, MouseEvent as ReactMouseEvent, RefObject } from 'react';
 import type { IntentProps } from '../../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { A11yToolbarTabIndex, InternalChartToolbarConfig } from '../../types/toolbar.js';
 /**
  * @internal
@@ -22,7 +23,7 @@ export type ToolbarHanderRef = {
 /**
  * @internal
  */
-export interface ChartToolbarRendererProps extends InternalChartToolbarConfig {
+export interface ChartToolbarRendererProps extends InternalChartToolbarConfig, BehaviorTrackingProps {
     /** Whether the toolbar is visible or not */
     visible: boolean;
     /** Initial state of the A11yToolbar */

package/charts/core/components/tooltip/ChartTooltip/ChartTooltip.css

@@ -1,4 +1,4 @@
-._nhy85h0-3-1-3 {
+._nhy85h0-3-2-0 {
   display: inline-block;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -13,19 +13,19 @@
   max-height: 200px;
   overflow: hidden;
 }
-._nhy85h0-3-1-3[data-placement="right"] {
+._nhy85h0-3-2-0[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._nhy85h0-3-1-3[data-placement="left"] {
+._nhy85h0-3-2-0[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._nhy85h1-3-1-3 {
+._nhy85h1-3-2-0 {
   z-index: var(--dt-elevations-overlay, 20);
   position: fixed;
 }
-._nhy85h2-3-1-3 {
+._nhy85h2-3-2-0 {
   pointer-events: all;
 }
-._nhy85h3-3-1-3 {
+._nhy85h3-3-2-0 {
   pointer-events: none;
 }

package/charts/core/components/tooltip/ChartTooltip/ChartTooltip.d.ts

@@ -28,14 +28,14 @@ export interface ChartTooltipProps extends StylingProps {
  */
 export declare const _ChartTooltip: (props: ChartTooltipProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 /**
  * The ChartTooltip Component
  * @internal
  */
 export declare const ChartTooltip: ((props: ChartTooltipProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     readonly Header: {
         (props: import("../types/tooltip.js").TooltipHeaderProps): import("react/jsx-runtime.js").JSX.Element;
         displayName: string;

package/charts/core/components/tooltip/ChartTooltip/ChartTooltip.sty.js

@@ -24,5 +24,5 @@ __export(ChartTooltip_css_exports, {
 module.exports = __toCommonJS(ChartTooltip_css_exports);
 var import_ChartTooltip_css_ts_vanilla = require("./ChartTooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartTooltip = "_nhy85h0-3-1-3";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nhy85h1-3-1-3", variantClassNames: { isPinned: { true: "_nhy85h2-3-1-3", false: "_nhy85h3-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var chartTooltip = "_nhy85h0-3-2-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nhy85h1-3-2-0", variantClassNames: { isPinned: { true: "_nhy85h2-3-2-0", false: "_nhy85h3-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/tooltip/ChartTooltip/components/ActionItem/ActionItem.css

@@ -1,34 +1,34 @@
-._ejcjne0-3-1-3 {
+._ejcjne0-3-2-0 {
   padding: var(--dt-spacings-size-6, 6px);
   gap: var(--dt-spacings-size-4, 4px);
   box-sizing: border-box;
   pointer-events: auto;
 }
-._ejcjne0-3-1-3:hover {
+._ejcjne0-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._ejcjne2-3-1-3 {
+._ejcjne2-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._ejcjne3-3-1-3 {
+._ejcjne3-3-2-0 {
   cursor: pointer;
 }
-._ejcjne4-3-1-3 {
+._ejcjne4-3-2-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
 }
-._ejcjne1-3-1-3 ._ejcjne0-3-1-3 ._ejcjne2-3-1-3 ._ejcjne4-3-1-3 {
+._ejcjne1-3-2-0 ._ejcjne0-3-2-0 ._ejcjne2-3-2-0 ._ejcjne4-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._ejcjne1-3-1-3 ._ejcjne0-3-1-3 ._ejcjne3-3-1-3 ._ejcjne4-3-1-3 {
+._ejcjne1-3-2-0 ._ejcjne0-3-2-0 ._ejcjne3-3-2-0 ._ejcjne4-3-2-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ejcjne5-3-1-3 {
+._ejcjne5-3-2-0 {
   margin-left: auto;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);

package/charts/core/components/tooltip/ChartTooltip/components/ActionItem/ActionItem.sty.js

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(ActionItem_css_exports);
 var import_TooltipItem_css_ts_vanilla = require("../../../section-components/TooltipItem/TooltipItem.css");
 var import_ActionItem_css_ts_vanilla = require("./ActionItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ejcjne1-3-1-3 _ejcjne0-3-1-3 _1xw2xi60-3-1-3", variantClassNames: { disabled: { true: "_ejcjne2-3-1-3", false: "_ejcjne3-3-1-3" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var actionShortcut = "_ejcjne5-3-1-3";
-var actionText = "_ejcjne4-3-1-3";
+var actionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ejcjne1-3-2-0 _ejcjne0-3-2-0 _1xw2xi60-3-2-0", variantClassNames: { disabled: { true: "_ejcjne2-3-2-0", false: "_ejcjne3-3-2-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var actionShortcut = "_ejcjne5-3-2-0";
+var actionText = "_ejcjne4-3-2-0";

package/charts/core/components/tooltip/ChartTooltip/components/SeriesItem/SeriesItem.css

@@ -1,8 +1,8 @@
-._dov7bc0-3-1-3 {
+._dov7bc0-3-2-0 {
   min-width: 24px;
   max-width: 120px;
   text-align: center;
 }
-._dov7bc0-3-1-3:not(:last-of-type) {
+._dov7bc0-3-2-0:not(:last-of-type) {
   margin-right: var(--dt-spacings-size-2, 2px);
 }