@dynatrace/strato-components 3.13.2 → 3.14.0

package/charts/timeseries/types/state.d.ts

@@ -18,7 +18,10 @@ export type YAxisScales = LeftYScale | RightYScale;
 export interface TimeseriesThresholdsState {
     hoveredThresholdId: string | undefined;
 }
-export interface TimeseriesChartState extends InteractionState<[Date, Date] | [number, number]> {
+export interface TimeseriesChartState extends InteractionState<[
+    Date,
+    Date
+] | [number, number]> {
     annotations: AnnotationsIntegrationSelectionState;
     thresholds: TimeseriesThresholdsState;
     filteredSeriesIds: Set<string>;

package/charts/timeseries/utils/chart-configuration.d.ts

@@ -79,7 +79,7 @@ export declare function getValueRepresentationConfiguration(contextValueRepresen
  * @param contextColorPalette - color palette context
  * @param propsColorPalette - color palette props
  */
-export declare function getColorPaletteConfiguration(contextColorPalette?: ColorPalette | CustomColorPalette, propsColorPalette?: ColorPalette | CustomColorPalette): "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette;
+export declare function getColorPaletteConfiguration(contextColorPalette?: ColorPalette | CustomColorPalette, propsColorPalette?: ColorPalette | CustomColorPalette): "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette;
 /**
  * Builds a curve configuration based on context and props
  * @param contextConfig -

package/charts/top-list/TopList.css

@@ -1,4 +1,4 @@
-._jwlby60-3-13-2 {
+._jwlby60-3-14-0 {
   width: 100%;
   overflow-y: auto;
 }

package/charts/top-list/TopList.js

@@ -95,10 +95,14 @@ function TopListRender(props, forwardedRef) {
       return actions(data[Number(rowKey)]);
     };
   }, [actions, data]);
-  const yAxisFormatter = (0, import_react.useMemo)(() => {
-    const numFormatter = (0, import_get_formatter.getFormatter)(valueFormatter);
-    return (_rowKey, record) => numFormatter(Number(record[valueAccessor]));
-  }, [valueFormatter, valueAccessor]);
+  const numFormatter = (0, import_react.useMemo)(
+    () => (0, import_get_formatter.getFormatter)(valueFormatter),
+    [valueFormatter]
+  );
+  const yAxisFormatter = (0, import_react.useMemo)(
+    () => (_rowKey, record) => numFormatter(Number(record[valueAccessor])),
+    [numFormatter, valueAccessor]
+  );
   const downloadDataCallback = (0, import_react.useCallback)(() => {
     const rows = dataWithSyntheticFields.map((d) => {
       const label = (0, import_download.escapeForCSV)(d[labelAccessor]);
@@ -177,7 +181,7 @@ ${rows}
                 hideCrosshair: true,
                 disableZoom: true,
                 disablePan: true,
-                formatter: valueFormatter
+                formatter: numFormatter
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -191,6 +195,7 @@ ${rows}
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: true }),
             syntheticColorRules.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ColorRule, { ...rule }, rule.matchValue)),
             children,
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Select, { disabled: true })

package/charts/top-list/TopList.sty.js

@@ -21,4 +21,4 @@ __export(TopList_css_exports, {
 });
 module.exports = __toCommonJS(TopList_css_exports);
 var import_TopList_css_ts_vanilla = require("./TopList.css");
-var scrollContainer = "_jwlby60-3-13-2";
+var scrollContainer = "_jwlby60-3-14-0";

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css

@@ -1,4 +1,4 @@
-._1iqz50a0-3-13-2 {
+._1iqz50a0-3-14-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -21,4 +21,4 @@ __export(TreeMapOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapOverlay_css_exports);
 var import_TreeMapOverlay_css_ts_vanilla = require("./TreeMapOverlay.css");
-var container = "_1iqz50a0-3-13-2";
+var container = "_1iqz50a0-3-14-0";

package/charts/tree-map/constants.d.ts

@@ -67,6 +67,13 @@ export declare const NODE_WITH_RECT_CLUSTER_PADDING = 7;
 export declare const NODE_WITH_RECT_PADDING_TOP: number;
 export declare const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;
 export declare const NODE_WITH_RECT_OUTER_PADDING = 3;
+/**
+ * Extra reach added to every node's hover area on top of its layout padding.
+ * Node paddings are narrower than the gutters they sit in (6px between clusters
+ * against 2px of padding), so without it the middle of a gutter belongs to no
+ * node and crossing one dismisses and re-shows the tooltip.
+ */
+export declare const TOOLTIP_HOVER_TOLERANCE = 4;
 export declare const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN: number;
 export declare const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN: number;
 export declare const AGGREGATED_NODE_COLOR: string;

package/charts/tree-map/constants.js

@@ -76,6 +76,7 @@ __export(constants_exports, {
   ROOT_NODE_WITH_LABELS_OUTER_PADDING: () => ROOT_NODE_WITH_LABELS_OUTER_PADDING,
   TEXT_ALIGN: () => TEXT_ALIGN,
   TEXT_BASELINE: () => TEXT_BASELINE,
+  TOOLTIP_HOVER_TOLERANCE: () => TOOLTIP_HOVER_TOLERANCE,
   TREEMAP_CHART_ARIA_LABEL: () => TREEMAP_CHART_ARIA_LABEL
 });
 module.exports = __toCommonJS(constants_exports);
@@ -147,6 +148,7 @@ const NODE_WITH_RECT_CLUSTER_PADDING = 7;
 const NODE_WITH_RECT_PADDING_TOP = DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;
 const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;
 const NODE_WITH_RECT_OUTER_PADDING = 3;
+const TOOLTIP_HOVER_TOLERANCE = 4;
 const MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;
 const ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;
 const ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;

package/charts/tree-map/context/ColorPaletteContext.d.ts

@@ -1,5 +1,5 @@
 import type { CustomColorPalette } from '../../core/types/color-palette.js';
 import { ColoredRange } from '../../core/types/colored-range.js';
-export declare const ColorPaletteContext: import("react").Context<"apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[] | CustomColorPalette>;
-export declare const useColorPalette: () => "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[] | CustomColorPalette;
+export declare const ColorPaletteContext: import("react").Context<"apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[] | CustomColorPalette>;
+export declare const useColorPalette: () => "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[] | CustomColorPalette;
 //# sourceMappingURL=ColorPaletteContext.d.ts.map

package/charts/tree-map/hooks/useOverlayHandlers.d.ts

@@ -2,6 +2,7 @@ import type { Overlay } from '../../core/components/overlay-tooltip/types.js';
 export declare const useOverlayHandlers: (overlay: Overlay) => {
     onPointerMove: (event: import("react").MouseEvent<HTMLDivElement>) => void;
     onPointerLeave: () => void;
+    onTouchStart: (event: import("react").TouchEvent<HTMLDivElement>) => void;
     onTouchEnd: (event: import("react").TouchEvent<HTMLDivElement>) => void;
     onClick: (event: import("react").MouseEvent<HTMLDivElement>) => void;
 };

package/charts/tree-map/utils/get-tooltip-data.d.ts

@@ -1,7 +1,15 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
-export declare const getTooltipData: (leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[], clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[], relativePosition: {
+type Position = {
     x: number;
     y: number;
-}, hasParentLabels?: boolean) => HierarchyRectangularNode<InternalTreeMapNode> | undefined;
+};
+/**
+ * Resolves the node the pointer is over, or the nearest one within its hover
+ * reach when the pointer sits in a gutter between nodes. Returns `undefined`
+ * only when nothing is close enough, so the tooltip is dismissed when leaving
+ * the treemap rather than when crossing between two of its nodes.
+ */
+export declare const getTooltipData: (leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[], clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[], relativePosition: Position, hasParentLabels?: boolean) => HierarchyRectangularNode<InternalTreeMapNode> | undefined;
+export {};
 //# sourceMappingURL=get-tooltip-data.d.ts.map

package/charts/tree-map/utils/get-tooltip-data.js

@@ -22,14 +22,26 @@ __export(get_tooltip_data_exports, {
 module.exports = __toCommonJS(get_tooltip_data_exports);
 var import_node_padding = require("./node-padding.js");
 var import_should_draw_leaf_node = require("./should-draw-leaf-node.js");
+var import_constants = require("../constants.js");
+const squaredDistanceToNode = (node, position) => {
+  const dx = Math.max(node.x0 - position.x, 0, position.x - node.x1);
+  const dy = Math.max(node.y0 - position.y, 0, position.y - node.y1);
+  return Math.pow(dx, 2) + Math.pow(dy, 2);
+};
 const getTooltipData = (leafNodes, clusterNodes, relativePosition, hasParentLabels = false) => {
   const nodes = hasParentLabels ? [...leafNodes, ...clusterNodes] : leafNodes;
-  return nodes.find((node) => {
-    const padding = (0, import_node_padding.nodePadding)(node, hasParentLabels);
-    const showLeafTooltip = (0, import_should_draw_leaf_node.shouldDrawLeafNode)(node);
-    if (!showLeafTooltip && hasParentLabels) {
-      return null;
+  let closestNode;
+  let closestDistance = Infinity;
+  nodes.forEach((node) => {
+    if (hasParentLabels && !(0, import_should_draw_leaf_node.shouldDrawLeafNode)(node)) {
+      return;
+    }
+    const reach = (0, import_node_padding.nodePadding)(node, hasParentLabels) + import_constants.TOOLTIP_HOVER_TOLERANCE;
+    const distance = squaredDistanceToNode(node, relativePosition);
+    if (distance <= Math.pow(reach, 2) && distance < closestDistance) {
+      closestNode = node;
+      closestDistance = distance;
     }
-    return node.x0 - padding <= relativePosition.x && node.x1 + padding >= relativePosition.x && node.y0 - padding <= relativePosition.y && node.y1 + padding >= relativePosition.y;
   });
+  return closestNode;
 };

package/charts/tree-map/utils/get-tree-map-color-palette.d.ts

@@ -1,7 +1,7 @@
 import { type ColorPalette, type CustomColorPalette } from '../../core/types/color-palette.js';
 import type { ColoredRange } from '../../core/types/colored-range.js';
 export declare const getTreeMapColorPalette: (colorPalette: ColorPalette | CustomColorPalette | ColoredRange[]) => {
-    categoricalColorPalette: "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette;
-    rangeColorPalette: "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[];
+    categoricalColorPalette: "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette;
+    rangeColorPalette: "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | ColoredRange[];
 };
 //# sourceMappingURL=get-tree-map-color-palette.d.ts.map

package/charts/xy-chart/XYChart.js

@@ -49,9 +49,10 @@ var import_get_padding_by_axes = require("./utils/get-padding-by-axes.js");
 var import_grid_templates = require("./utils/grid-templates.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
+var import_constants = require("../core/components/annotations/constants.js");
 var import_get_annotations_visible_area = require("../core/components/annotations/utils/get-annotations-visible-area.js");
 var import_ChartGridRoot = require("../core/components/chart-grid/ChartGridRoot.js");
-var import_constants = require("../core/components/chart-grid/constants.js");
+var import_constants2 = require("../core/components/chart-grid/constants.js");
 var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
@@ -84,23 +85,27 @@ const XYChart = (0, import_react.forwardRef)(
     const annotationsConfig = (0, import_useXYChartAnnotationsConfig.useXYChartAnnotationsConfig)();
     const tracksQuantity = annotationsData?.size ?? 0;
     const hiddenTracks = (0, import_useXYChartAnnotationsHiddenTracks.useXYChartAnnotationsHiddenTracks)();
+    const annotationDisplayMode = (0, import_constants2.getAnnotationDisplayMode)(
+      height,
+      tracksQuantity,
+      true
+    );
+    const compactAnnotations = annotationDisplayMode === import_constants2.AnnotationDisplayMode.Compact;
+    const showAnnotations = annotationDisplayMode !== import_constants2.AnnotationDisplayMode.Hidden;
     const annotationsVisibleArea = (0, import_get_annotations_visible_area.getAnnotationsVisibleArea)(
       tracksQuantity,
-      annotationsConfig?.fixedTracks,
-      hiddenTracks.length
+      compactAnnotations ? 1 : annotationsConfig?.fixedTracks,
+      hiddenTracks.length,
+      compactAnnotations ? import_constants.COMPACT_ANNOTATIONS_DIMENSIONS : void 0
     );
     const annotationsAreaHeight = annotationsVisibleArea;
-    const showAnnotations = (0, import_constants.shouldShowAnnotations)(
-      chartGridHeight,
-      tracksQuantity
-    );
-    const showAxes = (0, import_constants.shouldShowAxes)(chartGridHeight);
+    const showAxes = (0, import_constants2.shouldShowAxes)(chartGridHeight);
     const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;
     const computedGridTemplateRows = showAxes ? (0, import_grid_templates.gridTemplateRows)(
       bottomAxisMaxSize,
       topAxisMaxSize,
       gridAnnotationsHeight
-    ) : "0px 0px 0px 1fr 0px 1px";
+    ) : `${gridAnnotationsHeight}px 0px 0px 1fr 0px 1px`;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -137,7 +142,7 @@ const XYChart = (0, import_react.forwardRef)(
                   showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartBottomAxisArea.XYChartBottomAxisArea, {}),
                   showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLeftAxisArea.XYChartLeftAxisArea, {}),
                   showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRightAxisArea.XYChartRightAxisArea, {}),
-                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsArea.XYChartAnnotationsArea, {}),
+                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsArea.XYChartAnnotationsArea, { compact: compactAnnotations }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartGridLayout.XYChartGridLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLayout.XYChartLayout, {}),

package/charts/xy-chart/XYChartRoot.js

@@ -40,6 +40,7 @@ var import_XYChartColorScalesProvider = require("./providers/XYChartColorScalesP
 var import_XYChartDataProvider = require("./providers/XYChartDataProvider.js");
 var import_XYChartDownloadProvider = require("./providers/XYChartDownloadProvider.js");
 var import_XYChartIdProvider = require("./providers/XYChartIdProvider.js");
+var import_XYChartOnEventProvider = require("./providers/XYChartOnEventProvider.js");
 var import_XYChartStoreDomainSync = require("./providers/XYChartStoreDomainSync.js");
 var import_XYChartStoreProvider = require("./providers/XYChartStoreProvider.js");
 var import_XYChartVisibleAxesProvider = require("./providers/XYChartVisibleAxesProvider.js");
@@ -90,6 +91,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
     style,
     className,
     __downloadDataCallback: downloadDataCallback,
+    __onEvent: onEvent,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
@@ -133,7 +135,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
     import_XYChartDownloadProvider.XYChartDownloadProvider,
     {
       downloadDataCallback,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartToolbar_context.XYChartToolbarContext.Provider, { value: config.toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartOnEventProvider.XYChartOnEventProvider, { onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartToolbar_context.XYChartToolbarContext.Provider, { value: config.toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_XYChartTruncationMode_context.XYChartTruncationModeContext.Provider,
         {
           value: { truncationMode: config.truncationMode },
@@ -196,7 +198,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
             }
           )
         }
-      ) })
+      ) }) })
     }
   ) }) }) }) }) });
 });

package/charts/xy-chart/builders/XYChartImperativeHandlerBuilder.js

@@ -42,7 +42,7 @@ const XYChartImperativeHandlerBuilder = ({
   const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const { downloadDataCallback } = (0, import_useDownload.useDownload)();
   const setState = (0, import_selectors.useSetState)();
-  const { zoomInEnabled, zoomOutEnabled } = (0, import_selectors.useZoomState)();
+  const { zoomInEnabled, zoomOutEnabled, panEnabled } = (0, import_selectors.useZoomState)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
   const applyZoom = (0, import_useApplyZoomDelta.useApplyZoomDelta)();
@@ -75,7 +75,7 @@ const XYChartImperativeHandlerBuilder = ({
       }
     },
     panMode: () => {
-      if (zoomOutEnabled && axesMetadata.isPanEnabled) {
+      if (panEnabled && axesMetadata.isPanEnabled) {
         setState((0, import_reduce_interaction_mode.reduceInteractionMode)(import_types.INTERACTION_MODE.Pan));
       }
     },

package/charts/xy-chart/components/annotations/XYChartAnnotationsArea.d.ts

@@ -1,2 +1,6 @@
-export declare const XYChartAnnotationsArea: () => import("react").JSX.Element | null;
+type XYChartAnnotationsAreaProps = {
+    compact?: boolean;
+};
+export declare const XYChartAnnotationsArea: ({ compact, }: XYChartAnnotationsAreaProps) => import("react").JSX.Element | null;
+export {};
 //# sourceMappingURL=XYChartAnnotationsArea.d.ts.map

package/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js

@@ -38,7 +38,9 @@ var import_selectors = require("../../store/selectors.js");
 var import_guards = require("../../types/guards.js");
 var import_get_scale = require("../../utils/get-scale.js");
 var import_grid_templates = require("../../utils/grid-templates.js");
-const XYChartAnnotationsArea = () => {
+const XYChartAnnotationsArea = ({
+  compact = false
+}) => {
   const scales = (0, import_useXYChartScales.useXYChartScales)();
   const annotationsConfig = (0, import_useXYChartAnnotationsConfig.useXYChartAnnotationsConfig)();
   const annotationsData = (0, import_useXYChartAnnotationsData.useXYChartAnnotationsData)();
@@ -82,7 +84,7 @@ const XYChartAnnotationsArea = () => {
     const labelsOffset = availableWidth - width;
     const annotationsCommonConfig = {
       tracks: serializedAnnotationsData,
-      showLabels,
+      showLabels: compact ? false : showLabels,
       outerBottomLine: !(0, import_lodash_es.isUndefined)(topAxisScale),
       labelsOffset,
       width: availableWidth,
@@ -90,6 +92,10 @@ const XYChartAnnotationsArea = () => {
       textOverflow,
       truncateMode: "middle",
       tooltipConfig: annotationsConfig.tooltip,
+      ...compact && {
+        dimensions: import_constants.COMPACT_ANNOTATIONS_DIMENSIONS,
+        showMarkerContent: false
+      },
       ...behaviorTrackingProps
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-13-2 {
+._bidc430-3-14-0 {
   position: relative;
 }

package/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -21,4 +21,4 @@ __export(AxisArea_css_exports, {
 });
 module.exports = __toCommonJS(AxisArea_css_exports);
 var import_AxisArea_css_ts_vanilla = require("./AxisArea.css");
-var axisContainerStyle = "_bidc430-3-13-2";
+var axisContainerStyle = "_bidc430-3-14-0";

package/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-13-2 {
-  direction: var(--_z2zz8y0-3-13-2);
+._z2zz8y2-3-14-0 {
+  direction: var(--_z2zz8y0-3-14-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-13-2);
+  width: var(--_z2zz8y1-3-14-0);
 }

package/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -23,6 +23,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-13-2)";
-var tickStyle = "_z2zz8y2-3-13-2";
-var widthContainer = "var(--_z2zz8y1-3-13-2)";
+var directionValue = "var(--_z2zz8y0-3-14-0)";
+var tickStyle = "_z2zz8y2-3-14-0";
+var widthContainer = "var(--_z2zz8y1-3-14-0)";

package/charts/xy-chart/components/axes/XYChartBottomAxisArea.js

@@ -130,6 +130,7 @@ function XYChartBottomAxisArea() {
               label: bottomConfig.label,
               isTickVertical: true,
               isTickRotated,
+              reserveSpaceWhenEmpty: canPan,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_AxisBottom.AxisBottom,
                 {

package/charts/xy-chart/components/axes/XYChartTopAxisArea.js

@@ -130,6 +130,7 @@ function XYChartTopAxisArea() {
               label: topConfig.label,
               isTickVertical: true,
               isTickRotated,
+              reserveSpaceWhenEmpty: canPan,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_AxisTop.AxisTop,
                 {

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-13-2 {
+._b76tm80-3-14-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-13-2 {
+._b76tm81-3-14-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -22,5 +22,5 @@ __export(BarLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(BarLabelOverlay_css_exports);
 var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
-var labelSpan = "_b76tm81-3-13-2";
-var overlayContainer = "_b76tm80-3-13-2";
+var labelSpan = "_b76tm81-3-14-0";
+var overlayContainer = "_b76tm80-3-14-0";

package/charts/xy-chart/components/displays/RectLabelOverlay.css

@@ -1,10 +1,10 @@
-._1a48u8w0-3-13-2 {
+._1a48u8w0-3-14-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._1a48u8w1-3-13-2 {
+._1a48u8w1-3-14-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._1a48u8w2-3-13-2 {
+._1a48u8w2-3-14-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/charts/xy-chart/components/displays/RectLabelOverlay.sty.js

@@ -23,6 +23,6 @@ __export(RectLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(RectLabelOverlay_css_exports);
 var import_RectLabelOverlay_css_ts_vanilla = require("./RectLabelOverlay.css");
-var rectLabelClipWrapper = "_1a48u8w2-3-13-2";
-var rectLabelSpan = "_1a48u8w1-3-13-2";
-var rectOverlayContainer = "_1a48u8w0-3-13-2";
+var rectLabelClipWrapper = "_1a48u8w2-3-14-0";
+var rectLabelSpan = "_1a48u8w1-3-14-0";
+var rectOverlayContainer = "_1a48u8w0-3-14-0";

package/charts/xy-chart/components/legend/XYLegend/XYLegend.js

@@ -103,6 +103,13 @@ function XYLegend({ series, seriesToMetadata }) {
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     [series, seriesToMetadata]
   );
+  const itemIdsKey = (0, import_react.useMemo)(
+    () => legendItems.map((item) => item.id).join("\0"),
+    [legendItems]
+  );
+  (0, import_react.useEffect)(() => {
+    setState((prev) => ({ ...prev, filteredSeriesIds: void 0 }));
+  }, [itemIdsKey]);
   const legendActions = (0, import_getXYLegendActions.getXYLegendActions)(series, seriesToMetadata);
   const updateVisibleSeries = (0, import_react.useCallback)(
     (visibleItems) => {

package/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-13-2 {
+._1lwufqz0-3-14-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -21,4 +21,4 @@ __export(xy_legend_css_exports, {
 });
 module.exports = __toCommonJS(xy_legend_css_exports);
 var import_xy_legend_css_ts_vanilla = require("./xy-legend.css");
-var shapeIconWrapper = "_1lwufqz0-3-13-2";
+var shapeIconWrapper = "_1lwufqz0-3-14-0";

package/charts/xy-chart/components/overlay/XYChartOverlay.js

@@ -76,9 +76,9 @@ const XYChartOverlay = () => {
   const chartId = (0, import_useXYChartId.useXYChartId)();
   const syncedXScale = (0, import_useSyncedXScaleByPriority.useSyncedXScaleByPriority)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
-  const { zoomOutEnabled } = (0, import_selectors.useZoomState)();
+  const { panEnabled } = (0, import_selectors.useZoomState)();
   const isZoomDisabled = !axesMetadata.isZoomEnabled;
-  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);
+  const isPanDisabled = !(axesMetadata.isPanEnabled && panEnabled);
   const isSelectDisabled = (0, import_useSelectConfig.useSelectConfig)()?.disabled === true;
   const { hideHorizontal, hideVertical } = (0, import_useXYChartCrosshairHidden.useXYChartCrosshairHidden)();
   (0, import_react.useEffect)(() => {

package/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.d.ts

@@ -2,6 +2,12 @@ import type { RectanglePoint } from './types.js';
 interface HighlightedRectangleCanvasProps {
     points: RectanglePoint[];
 }
+export declare const getMinSizeHighlightBar: (point: RectanglePoint, canvasWidth: number, canvasHeight: number) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare const HighlightedRectangleCanvas: ({ points, }: HighlightedRectangleCanvasProps) => null;
 export {};
 //# sourceMappingURL=HighlightedRectangleCanvas.d.ts.map

package/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js

@@ -27,7 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var HighlightedRectangleCanvas_exports = {};
 __export(HighlightedRectangleCanvas_exports, {
-  HighlightedRectangleCanvas: () => HighlightedRectangleCanvas
+  HighlightedRectangleCanvas: () => HighlightedRectangleCanvas,
+  getMinSizeHighlightBar: () => getMinSizeHighlightBar
 });
 module.exports = __toCommonJS(HighlightedRectangleCanvas_exports);
 var import_react = require("react");
@@ -43,10 +44,13 @@ const INNER_OFFSET = 3;
 const INNER_SHRINK = 5;
 const BORDER_WIDTH = 1;
 const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
+  const clampedY = Math.max(0, point.y);
+  const clampedBottom = Math.min(canvasHeight, point.y + point.height);
+  const clampedHeight = Math.max(0, clampedBottom - clampedY);
   const width = Math.max(point.width, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
-  const height = Math.max(point.height, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
+  const height = point.y < 0 || point.y + point.height > canvasHeight ? clampedHeight : Math.max(clampedHeight, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
   const xExpansion = (width - point.width) / 2;
-  const yExpansion = (height - point.height) / 2;
+  const yExpansion = (height - clampedHeight) / 2;
   const rawX = point.x - xExpansion;
   const clampedX = Math.max(0, rawX);
   const clampedWidth = Math.max(
@@ -55,7 +59,7 @@ const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
   );
   return {
     x: clampedX,
-    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),
+    y: Math.max(0, Math.min(clampedY - yExpansion, canvasHeight - height)),
     width: clampedWidth,
     height
   };

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-13-2 {
+._1bbe5uo0-3-14-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -21,4 +21,4 @@ __export(XYChartCrosshair_css_exports, {
 });
 module.exports = __toCommonJS(XYChartCrosshair_css_exports);
 var import_XYChartCrosshair_css_ts_vanilla = require("./XYChartCrosshair.css");
-var crosshair = "_1bbe5uo0-3-13-2";
+var crosshair = "_1bbe5uo0-3-14-0";