@dynatrace/strato-components 3.4.1 → 3.5.2

package/charts/pie/hooks/usePieChartTooltip.js

@@ -0,0 +1,25 @@
+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 usePieChartTooltip_exports = {};
+__export(usePieChartTooltip_exports, {
+  usePieChartTooltip: () => usePieChartTooltip
+});
+module.exports = __toCommonJS(usePieChartTooltip_exports);
+var import_react = require("react");
+var import_PieChartTooltipContext = require("../context/PieChartTooltipContext.js");
+const usePieChartTooltip = () => (0, import_react.useContext)(import_PieChartTooltipContext.PieChartTooltipContext);

package/charts/pie/providers/ChartProviders.js

@@ -28,6 +28,7 @@ var import_FormatterContext = require("../context/FormatterContext.js");
 var import_LabelsContext = require("../context/LabelsContext.js");
 var import_PieChartConfigContext = require("../context/PieChartConfigContext.js");
 var import_PieChartRawDataContext = require("../context/PieChartRawDataContext.js");
+var import_PieChartTooltipContext = require("../context/PieChartTooltipContext.js");
 var import_ToolbarContext = require("../context/ToolbarContext.js");
 const ChartProviders = (props) => {
   const { chartConfig, chartData, children } = props;
@@ -40,20 +41,26 @@ const ChartProviders = (props) => {
         chartSeriesActions: chartConfig.seriesActions
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieChartRawDataContext.PieChartRawDataContext.Provider, { value: chartData, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieChartConfigContext.PieChartConfigContext.Provider, { value: chartConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_LabelsContext.LabelsContext.Provider,
+        import_PieChartTooltipContext.PieChartTooltipContext.Provider,
         {
-          value: {
-            hidden: chartConfig.labels?.hidden,
-            valueType: chartConfig.labels?.valueType
-          },
+          value: chartConfig.tooltip ?? import_PieChartTooltipContext.DEFAULT_TOOLTIP_CONFIG,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_FormatterContext.FormatterContext.Provider,
+            import_LabelsContext.LabelsContext.Provider,
             {
               value: {
-                formatter: chartConfig.formatter,
-                truncationMode: chartConfig.truncationMode
+                hidden: chartConfig.labels?.hidden,
+                valueType: chartConfig.labels?.valueType
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendContext.ChartLegendContext.Provider, { value: chartConfig.legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolbarContext.ToolbarContext.Provider, { value: chartConfig.toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children }) }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_FormatterContext.FormatterContext.Provider,
+                {
+                  value: {
+                    formatter: chartConfig.formatter,
+                    truncationMode: chartConfig.truncationMode
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendContext.ChartLegendContext.Provider, { value: chartConfig.legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolbarContext.ToolbarContext.Provider, { value: chartConfig.toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children }) }) })
+                }
+              )
             }
           )
         }

package/charts/pie/slots/DonutChartTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { DonutChartCustomTooltipProps } from '../types/pie-chart.config.js';
+/**
+ * Tooltip slot component.
+ */
+export declare const Tooltip: {
+    (props: DonutChartCustomTooltipProps): null;
+    displayName: string;
+};

package/charts/pie/slots/DonutChartTooltip.js

@@ -0,0 +1,24 @@
+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 DonutChartTooltip_exports = {};
+__export(DonutChartTooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(DonutChartTooltip_exports);
+const Tooltip = (props) => null;
+Tooltip["displayName"] = "DonutChart.Tooltip";

package/charts/pie/slots/PieChartTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { PieChartCustomTooltipProps } from '../types/pie-chart.config.js';
+/**
+ * Tooltip slot component.
+ */
+export declare const Tooltip: {
+    (props: PieChartCustomTooltipProps): null;
+    displayName: string;
+};

package/charts/pie/slots/PieChartTooltip.js

@@ -0,0 +1,24 @@
+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 PieChartTooltip_exports = {};
+__export(PieChartTooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(PieChartTooltip_exports);
+const Tooltip = (props) => null;
+Tooltip["displayName"] = "PieChart.Tooltip";

package/charts/pie/types/pie-chart.config.d.ts

@@ -115,6 +115,10 @@ export interface PieChartContextConfig {
      * Toolbar configuration
      */
     toolbar?: PieChartToolbarConfig;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: PieChartCustomTooltipConfig;
     /** Callback to display series actions for a slice */
     seriesActions?: (slice: SliceData) => SeriesActionsTemplate;
     colorRules?: ColorRuleProps[];
@@ -139,8 +143,9 @@ export type DonutChartConfiguration = PieChartConfiguration;
 /**
  * @internal
  */
-export type RequiredPieChartConfiguration = Required<Omit<PieChartConfiguration, 'toolbar' | 'seriesActions' | 'colorRules'>> & {
+export type RequiredPieChartConfiguration = Required<Omit<PieChartConfiguration, 'toolbar' | 'seriesActions' | 'colorRules' | 'tooltip'>> & {
     toolbar?: PieChartInternalToolbarConfig;
+    tooltip?: PieChartCustomTooltipConfig;
     innerElement?: InnerHandler | ReactNode;
     colorRules?: ColorRuleProps[];
 };
@@ -148,6 +153,14 @@ export type RequiredPieChartConfiguration = Required<Omit<PieChartConfiguration,
  * @internal
  */
 export type RequiredDonutChartConfiguration = RequiredPieChartConfiguration;
+/**
+ * Tooltip configuration for the pie chart
+ * @public
+ */
+export type PieChartCustomTooltipConfig = {
+    hidden?: boolean;
+    template?: PieChartCustomTooltipProps['children'];
+};
 /**
  * @internal
  */
@@ -269,6 +282,32 @@ export interface DonutChartProps extends StylingProps, MaskingProps, DataTestId,
  * @public
  */
 export type DonutChartLegendConfig = PieChartLegendConfig;
+/**
+ * Data provided to the custom tooltip render function for PieChart and DonutChart.
+ * @public
+ */
+export type PieChartTooltipPayload = {
+    /** The slice category name */
+    category: string;
+    /** Formatted absolute value */
+    value: string | number;
+    /** Relative value in percent (e.g. 24.5 for 24.5%) */
+    percentage: number;
+    /** Slice color (hex string) */
+    color: string;
+};
+/**
+ * @public
+ */
+export type PieChartCustomTooltipProps = {
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
+    children?: (payload: PieChartTooltipPayload) => ReactNode;
+};
+/**
+ * @public
+ */
+export type DonutChartCustomTooltipProps = PieChartCustomTooltipProps;
 /**
  * @internal
  */
@@ -279,6 +318,7 @@ export interface PieChartSlots {
     toolbar: Partial<PieChartToolbarConfig> | undefined;
     innerElement?: InnerHandler | ReactNode;
     colorRules: ColorRuleProps[];
+    tooltip?: PieChartCustomTooltipConfig;
 }
 /**
  * @internal

package/charts/pie/utils/iterate-slots.js

@@ -34,10 +34,12 @@ var import_DonutChartGrouping = require("../slots/DonutChartGrouping.js");
 var import_DonutChartInner = require("../slots/DonutChartInner.js");
 var import_DonutChartLabels = require("../slots/DonutChartLabels.js");
 var import_DonutChartLegend = require("../slots/DonutChartLegend.js");
+var import_DonutChartTooltip = require("../slots/DonutChartTooltip.js");
 var import_PieChartDownloadCSV = require("../slots/PieChartDownloadCSV.js");
 var import_PieChartGrouping = require("../slots/PieChartGrouping.js");
 var import_PieChartLabels = require("../slots/PieChartLabels.js");
 var import_PieChartLegend = require("../slots/PieChartLegend.js");
+var import_PieChartTooltip = require("../slots/PieChartTooltip.js");
 const iterateChartToolbarSlots = (children) => {
   let slots = {};
   import_react.Children.forEach(children, (childInteractions) => {
@@ -54,7 +56,8 @@ function iterateSlots(children) {
     legend: {},
     toolbar: void 0,
     innerElement: void 0,
-    colorRules: []
+    colorRules: [],
+    tooltip: void 0
   };
   let intents;
   import_react.Children.map(children, (child) => {
@@ -93,6 +96,14 @@ function iterateSlots(children) {
       slots = { ...slots, innerElement: inner };
     } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
       (0, import_ColorRule.isValidColorRule)(child.props) && slots.colorRules.push(child.props);
+    } else if ((0, import_is_slot.isSlot)(child, import_PieChartTooltip.Tooltip) || (0, import_is_slot.isSlot)(child, import_DonutChartTooltip.Tooltip)) {
+      slots = {
+        ...slots,
+        tooltip: {
+          hidden: child.props.hidden ?? false,
+          template: child.props.children
+        }
+      };
     }
   });
   if (intents?.length) {

package/charts/pie/utils/pie-config.js

@@ -99,7 +99,8 @@ function buildPieChartConfig(props, contextConfig, slots) {
     toolbar,
     innerElement: slots.innerElement,
     seriesActions,
-    colorRules
+    colorRules,
+    tooltip: slots.tooltip ?? contextConfig.tooltip
   };
 }
 function deserializeConfig(serializedConfig) {

package/charts/single-value/SingleValue.css

@@ -1,4 +1,4 @@
-._1sfgzlg0-3-4-1 {
+._1sfgzlg0-3-5-2 {
   height: inherit;
   width: inherit;
 }

package/charts/single-value/SingleValue.sty.js

@@ -21,4 +21,4 @@ __export(SingleValue_css_exports, {
 });
 module.exports = __toCommonJS(SingleValue_css_exports);
 var import_SingleValue_css_ts_vanilla = require("./SingleValue.css");
-var container = "_1sfgzlg0-3-4-1";
+var container = "_1sfgzlg0-3-5-2";

package/charts/single-value-grid/SingleValueGrid.css

@@ -1,7 +1,7 @@
-._1mx9zjb0-3-4-1 {
+._1mx9zjb0-3-5-2 {
   height: 100%;
   width: 100%;
 }
-._1mx9zjb0-3-4-1 > div {
+._1mx9zjb0-3-5-2 > div {
   overflow: hidden;
 }

package/charts/single-value-grid/SingleValueGrid.sty.js

@@ -21,4 +21,4 @@ __export(SingleValueGrid_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueGrid_css_exports);
 var import_SingleValueGrid_css_ts_vanilla = require("./SingleValueGrid.css");
-var gridRows = "_1mx9zjb0-3-4-1";
+var gridRows = "_1mx9zjb0-3-5-2";

package/charts/single-value-grid/components/GlobalFontSizeVariables.css

@@ -1,4 +1,4 @@
-._eom86z0-3-4-1 {
+._eom86z0-3-5-2 {
   position: relative;
   width: 100%;
   height: 100%;

package/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js

@@ -21,4 +21,4 @@ __export(GlobalFontSizeVariables_css_exports, {
 });
 module.exports = __toCommonJS(GlobalFontSizeVariables_css_exports);
 var import_GlobalFontSizeVariables_css_ts_vanilla = require("./GlobalFontSizeVariables.css");
-var fontSizeWrapper = "_eom86z0-3-4-1";
+var fontSizeWrapper = "_eom86z0-3-5-2";

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-4-1 {
+._19z0vdp0-3-5-2 {
   position: relative;
 }
-._19z0vdp1-3-4-1 {
+._19z0vdp1-3-5-2 {
   touch-action: none;
 }

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -22,4 +22,4 @@ __export(TimeseriesTimeBottomAxisArea_css_exports, {
 module.exports = __toCommonJS(TimeseriesTimeBottomAxisArea_css_exports);
 var import_TimeseriesTimeBottomAxisArea_css_ts_vanilla = require("./TimeseriesTimeBottomAxisArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-4-1", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-5-2", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-4-1 {
+._17fdb110-3-5-2 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-4-1 {
+._17fdb111-3-5-2 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-4-1 {
+._17fdb112-3-5-2 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-4-1 {
+._17fdb113-3-5-2 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -25,7 +25,7 @@ __export(TimeseriesOverlays_css_exports, {
 module.exports = __toCommonJS(TimeseriesOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_TimeseriesOverlays_css_ts_vanilla = require("./TimeseriesOverlays.css");
-var canvasPlot = "_17fdb110-3-4-1 _13lzg4k0-3-4-1";
-var crosshairLayout = "_17fdb113-3-4-1 _13lzg4k0-3-4-1";
-var datapointCanvasPlot = "_17fdb111-3-4-1 _13lzg4k0-3-4-1";
-var datapointIndicatorLayout = "_17fdb112-3-4-1 _13lzg4k0-3-4-1";
+var canvasPlot = "_17fdb110-3-5-2 _13lzg4k0-3-5-2";
+var crosshairLayout = "_17fdb113-3-5-2 _13lzg4k0-3-5-2";
+var datapointCanvasPlot = "_17fdb111-3-5-2 _13lzg4k0-3-5-2";
+var datapointIndicatorLayout = "_17fdb112-3-5-2 _13lzg4k0-3-5-2";

package/charts/timeseries/components/overlays/TimeseriesSelection/TimeseriesSelectionAreaTooltip.js

@@ -28,11 +28,10 @@ var import_get_selected_datapoints = require("./utils/get-selected-datapoints.js
 var import_is_datapoint_within_selection = require("./utils/is-datapoint-within-selection.js");
 var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_get_custom_context_menu_items = require("../../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js");
-var import_SelectionArea_css = require("../../../../core/components/selection-area/SelectionArea.sty.js");
+var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_SelectionTooltipWithAsyncActions = require("../../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js");
 var import_get_selection_tooltip_position = require("../../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js");
-var import_ChartTooltip = require("../../../../core/components/tooltip/ChartTooltip/ChartTooltip.js");
-var import_useScrollResponsiveChartBounds = require("../../../../core/hooks/useScrollResponsiveChartBounds.js");
+var import_usePointerAndScrollResponsiveChartBounds = require("../../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js");
 var import_selectors = require("../../../hooks/store/selectors.js");
 var import_state_setters = require("../../../hooks/store/state-setters.js");
 var import_useChartInteractions = require("../../../hooks/useChartInteractions.js");
@@ -43,7 +42,6 @@ var import_useXScale = require("../../../hooks/useXScale.js");
 var import_tooltips_text = require("../../../messages/tooltips-text.js");
 var import_get_datapoints_message = require("../../../utils/get-datapoints-message.js");
 var import_timeseries = require("../../../utils/timeseries.js");
-var import_constants = require("../constants.js");
 const TimeseriesSelectionAreaTooltip = () => {
   const selectState = (0, import_selectors.useSelectState)();
   const { zoomX } = (0, import_useChartInteractions.useChartInteractions)();
@@ -54,7 +52,10 @@ const TimeseriesSelectionAreaTooltip = () => {
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
   const intl = (0, import_react_intl.useIntl)();
   const chartRef = (0, import_useTimeseriesOverlayRef.useTimeseriesOverlayRef)();
-  const chartBounds = (0, import_useScrollResponsiveChartBounds.useScrollResponsiveChartBounds)(chartRef, true)();
+  const chartBounds = (0, import_usePointerAndScrollResponsiveChartBounds.usePointerAndScrollResponsiveChartBounds)(
+    chartRef,
+    true
+  )();
   if (!selectState || !chartBounds) {
     return null;
   }
@@ -101,32 +102,26 @@ const TimeseriesSelectionAreaTooltip = () => {
       },
       selectFinished: selectState.finished,
       header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartTooltip.ChartTooltip.TimeFrameHeader,
+        import_OverlayTooltip.OverlayTooltip.Header,
         {
-          from,
-          to,
-          limit: import_constants.DISPLAY_UNITS_LIMIT,
-          showDuration: true,
-          className: import_SelectionArea_css.tooltipHeader
+          header1: [from, to],
+          showRangeDuration1: true,
+          subheader: intl.formatMessage(datapointsMessage, {
+            count: totalDatapoints,
+            seriesCount: totalSeries
+          })
         }
       ),
-      headerSubtext: intl.formatMessage(datapointsMessage, {
-        count: totalDatapoints,
-        seriesCount: totalSeries
-      }),
       position: tooltipPosition,
       zoomEnabled: !!zoomX?.enabled,
       range: selectState.selectionPercentage || [0, 0],
       children: zoomX?.enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartTooltip.ChartTooltip.ActionItem,
+        import_OverlayTooltip.OverlayTooltip.Action,
         {
-          text: intl.formatMessage(import_tooltips_text.TIMESERIES_MESSAGES.zoomToSelection),
+          label: intl.formatMessage(import_tooltips_text.TIMESERIES_MESSAGES.zoomToSelection),
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ZoomToSelectionIcon, {}),
-          onMouseUp: (event) => {
-            event.stopPropagation();
-            zoomToSelection();
-          },
-          shortcut: "\u23CE"
+          onSelect: zoomToSelection,
+          trailingIcon: "\u23CE"
         }
       ) : null
     }

package/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-4-1 {
+._9p8qi20-3-5-2 {
   z-index: 2;
 }
-._9p8qi21-3-4-1 {
+._9p8qi21-3-5-2 {
   z-index: 0;
 }

package/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -23,5 +23,5 @@ __export(ThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(ThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_ThresholdIndicators_css_ts_vanilla = require("./ThresholdIndicators.css");
-var thresholdPlotLine = "_9p8qi20-3-4-1 _13lzg4k0-3-4-1";
-var thresholdPlotRange = "_9p8qi21-3-4-1 _13lzg4k0-3-4-1";
+var thresholdPlotLine = "_9p8qi20-3-5-2 _13lzg4k0-3-5-2";
+var thresholdPlotRange = "_9p8qi21-3-5-2 _13lzg4k0-3-5-2";

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

@@ -1,4 +1,4 @@
-._1iqz50a0-3-4-1 {
+._1iqz50a0-3-5-2 {
   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-4-1";
+var container = "_1iqz50a0-3-5-2";

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

@@ -10,11 +10,11 @@ export declare const LABELS_DISPLAY: Readonly<Readonly<{
     ClustersAndValues: "clusters-and-values";
 }>>;
 export declare const TEXT_ALIGN: Readonly<Readonly<{
+    Left: "left";
     Right: "right";
     End: "end";
     Start: "start";
     Center: "center";
-    Left: "left";
 }>>;
 export declare const TEXT_BASELINE: Readonly<Readonly<{
     Bottom: "bottom";

package/charts/xy-chart/XYChart.d.ts

@@ -1,7 +1,7 @@
-import { XYChartConfigProperties } from './types/xy-chart-props.js';
 import { XYChartRef } from './types/xy-chart.js';
+import type { XYChartConfig } from './utils/xy-chart-configuration.js';
 interface XYChartProps {
-    config: XYChartConfigProperties;
+    config: XYChartConfig;
 }
 export declare const XYChart: (props: XYChartProps & {
     children?: import("react").ReactNode | undefined;

package/charts/xy-chart/XYChart.js

@@ -106,7 +106,7 @@ const XYChart = (0, import_react.forwardRef)(
               annotationsAreaHeight
             ),
             ref: chartAndForwardedRef,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartCustomTooltip_context.XYChartCustomTooltipContext.Provider, { value: config.customTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartSelectConfig_context.XYChartSelectConfigContext.Provider, { value: config.select, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartProviders.XYChartProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartCustomTooltip_context.XYChartCustomTooltipContext.Provider, { value: config.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartSelectConfig_context.XYChartSelectConfigContext.Provider, { value: config.select, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartProviders.XYChartProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_XYChartImperativeHandlerBuilder.XYChartImperativeHandlerBuilder,
               {
                 chartRef: forwardedRef,

package/charts/xy-chart/XYChartRoot.d.ts

@@ -56,10 +56,18 @@ export declare const XYChart: ((props: XYChartProps & {
         (props: import("./types/xy-chart-props.js").XYChartToolbarSlotProps): null;
         displayName: string;
     };
+    /** @deprecated Use `XYChart.Tooltip` instead. */
     CustomTooltip: {
         (props: import("./types/xy-chart-props.js").XYChartCustomTooltipProps): null;
         displayName: string;
     };
+    Tooltip: {
+        (props: {
+            hidden?: boolean;
+            children?: (tooltipPayload: import("./types/xy-chart.js").XYChartTooltipPayload) => import("react").ReactNode;
+        }): null;
+        displayName: string;
+    };
     Intent: {
         (props: import("../../index.js").IntentProps): null;
         displayName: string;

package/charts/xy-chart/XYChartRoot.js

@@ -56,6 +56,7 @@ var import_RectSeries = require("./slots/RectSeries.js");
 var import_Select = require("./slots/Select.js");
 var import_ThresholdIndicator = require("./slots/ThresholdIndicator.js");
 var import_Toolbar = require("./slots/Toolbar.js");
+var import_Tooltip2 = require("./slots/Tooltip.js");
 var import_XAxis = require("./slots/XAxis.js");
 var import_YAxis = require("./slots/YAxis.js");
 var import_is_empty_data = require("./utils/is-empty-data.js");
@@ -177,7 +178,10 @@ const XYChart = Object.assign(XYChartRoot, {
   YAxis: import_YAxis.YAxis,
   Legend: import_Legend.Legend,
   Toolbar: import_Toolbar.Toolbar,
+  /** @deprecated Use `XYChart.Tooltip` instead. */
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   CustomTooltip: import_CustomTooltip.CustomTooltip,
+  Tooltip: import_Tooltip2.XYChartTooltipSlot,
   Intent: import_Intent.Intent,
   Select: import_Select.Select,
   ThresholdIndicator: import_ThresholdIndicator.ThresholdIndicator,

package/charts/xy-chart/builders/XYChartImperativeHandlerBuilder.d.ts

@@ -1,10 +1,10 @@
 import { type PropsWithChildren, type Ref, type RefObject } from 'react';
-import type { XYChartConfigProperties } from '../types/xy-chart-props.js';
 import type { XYChartRef } from '../types/xy-chart.js';
+import type { XYChartConfig } from '../utils/xy-chart-configuration.js';
 interface XYChartImperativeHandlerBuilderProps {
     chartRef: Ref<XYChartRef>;
     containerRef: RefObject<HTMLDivElement | null>;
-    config: XYChartConfigProperties;
+    config: XYChartConfig;
 }
 export declare const XYChartImperativeHandlerBuilder: ({ chartRef, containerRef, config, children, }: PropsWithChildren<XYChartImperativeHandlerBuilderProps>) => import("react").ReactNode;
 export {};

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

@@ -50,10 +50,14 @@ const XYChartImperativeHandlerBuilder = ({
   const resetInteractions = (0, import_useResetInteractions.useResetInteractions)();
   (0, import_react.useImperativeHandle)(chartRef, () => ({
     element: containerRef.current,
-    getConfig: () => JSON.stringify({
-      type: import_chart_types.ChartType.XYChart,
-      ...config
-    }),
+    getConfig: () => {
+      const { tooltip, ...exportableConfig } = config;
+      return JSON.stringify({
+        type: import_chart_types.ChartType.XYChart,
+        ...exportableConfig,
+        tooltip: { hidden: !!tooltip?.hidden }
+      });
+    },
     downloadData: () => {
       (0, import_build_and_download_csv.buildAndDownloadCsv)(
         seriesWithDatapoints,

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

@@ -85,7 +85,7 @@ const XYChartAnnotationsArea = () => {
           labelsOffset,
           width: availableWidth,
           markerGroupHover: handleUpdateIndicators,
-          textOverflow: "truncate",
+          textOverflow: import_constants.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
           truncateMode: "middle",
           tooltipConfig: annotationsConfig.tooltip,
           ...behaviorTrackingProps

package/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.d.ts

@@ -1,9 +1,10 @@
 import { IndicatorData } from '../../../../core/components/annotations/components/indicators/types.js';
 import { AnnotationsTrackConfig } from '../../../../core/components/annotations/types/annotations-track-props.js';
+import { SelectionState } from '../../../../core/components/annotations/types/state.js';
 import { XYChartAnnotationsMarkerProps } from '../../../slots/Annotations/Marker.js';
 import { XYChartAnnotationsTrackProps } from '../../../slots/Annotations/Track.js';
 import { XYChartData } from '../../../types/xy-chart.js';
-export declare const getIndicatorsFromAnnotations: (data: XYChartData[], tracksConfig: XYChartAnnotationsTrackProps, markersConfig: XYChartAnnotationsMarkerProps) => {
+export declare const getIndicatorsFromAnnotations: (data: XYChartData[], tracksConfig: XYChartAnnotationsTrackProps, markersConfig: XYChartAnnotationsMarkerProps, selection: SelectionState) => {
     indicators: {
         alwaysVisible: IndicatorData[];
         selectable: Map<string, IndicatorData>;