@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/charts/top-list/constants.js

@@ -1,4 +1,5 @@
-const ROW_HEIGHT = 25;
+import { MIN_LABELED_BAR_SIZE } from "../xy-chart/constants/defaults.js";
+const ROW_HEIGHT = MIN_LABELED_BAR_SIZE;
 const SERIES_ID_KEY = "__toplist_series_id__";
 const SERIES_NAME_KEY = "__toplist_series_name__";
 const X_AXIS_ID = "toplist-x";

package/esm/charts/top-list/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/top-list/constants.ts"],
-  "sourcesContent": ["/**\n * Height reserved per bar (row), in pixels.\n * @internal\n */\nexport const ROW_HEIGHT = 25;\n\n/** @internal */\nexport const SERIES_ID_KEY = '__toplist_series_id__';\n\n/** @internal */\nexport const SERIES_NAME_KEY = '__toplist_series_name__';\n\n/** @internal */\nexport const X_AXIS_ID = 'toplist-x';\n\n/** @internal */\nexport const Y_AXIS_ID = 'toplist-y';\n"],
-  "mappings": "AAIO,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAGxB,MAAM,YAAY;AAGlB,MAAM,YAAY;",
+  "sourcesContent": ["import { MIN_LABELED_BAR_SIZE } from '../xy-chart/constants/defaults.js';\n\n/** @internal */\nexport const ROW_HEIGHT = MIN_LABELED_BAR_SIZE;\n\n/** @internal */\nexport const SERIES_ID_KEY = '__toplist_series_id__';\n\n/** @internal */\nexport const SERIES_NAME_KEY = '__toplist_series_name__';\n\n/** @internal */\nexport const X_AXIS_ID = 'toplist-x';\n\n/** @internal */\nexport const Y_AXIS_ID = 'toplist-y';\n"],
+  "mappings": "AAAA,SAAS,4BAA4B;AAG9B,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAGxB,MAAM,YAAY;AAGlB,MAAM,YAAY;",
   "names": []
 }

package/esm/charts/tree-map/TreeMap.js

@@ -15,6 +15,7 @@ import { Toolbar } from "./slots/Toolbar.js";
 import { Tooltip } from "./slots/Tooltip.js";
 import { Legend as TreeMapChartLegend } from "./slots/TreeMapChartLegend.js";
 import { buildAndDownloadCsv } from "./utils/build-and-download-csv.js";
+import { toHierarchicalProps } from "./utils/to-hierarchical-props.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
@@ -25,7 +26,7 @@ import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
 import { ChartType } from "../core/types/chart-types.js";
 const COMPONENT_NAME = "TreeMap";
-const TreeMapRoot = forwardRef((props, forwardedRef) => {
+const TreeMapInternal = forwardRef((props, forwardedRef) => {
   const {
     data,
     children,
@@ -87,6 +88,14 @@ const TreeMapRoot = forwardRef((props, forwardedRef) => {
     }
   );
 });
+const TreeMapRoot = forwardRef((props, forwardedRef) => {
+  const hierarchicalProps = isFlatProps(props) ? toHierarchicalProps(props) : props;
+  return /* @__PURE__ */ jsx(TreeMapInternal, { ...hierarchicalProps, ref: forwardedRef });
+});
+const isFlatProps = (props) => {
+  const flatProps = props;
+  return flatProps?.valueAccessor !== void 0 && flatProps?.groupBy !== void 0 && Array.isArray(props?.data);
+};
 const TreeMap = Object.assign(TreeMapRoot, {
   Legend: TreeMapChartLegend,
   Tooltip,

package/esm/charts/tree-map/TreeMap.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/TreeMap.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type JSX,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { TreeMapChartLayout } from './components/TreeMapChartLayout.js';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants.js';\nimport { useTreeMapChartConfig } from './hooks/useTreeMapChartConfig.js';\nimport { TreeMapChartProviders } from './providers/TreeMapChartProviders.js';\nimport { TreeMapDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Legend as TreeMapChartLegend } from './slots/TreeMapChartLegend.js';\nimport type { TreeMapElementRef, TreeMapProps } from './types/treemap.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'TreeMap';\nconst TreeMapRoot = forwardRef<\n  TreeMapElementRef,\n  PropsWithChildren<TreeMapProps>\n>((props, forwardedRef): JSX.Element => {\n  const {\n    data,\n    children,\n    seriesActions,\n    width = DEFAULT_WIDTH,\n    height = DEFAULT_HEIGHT,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'treemap-chart-root',\n    unit,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useTreeMapChartConfig(props);\n  const { loading } = config;\n\n  const emptyData =\n    isEmpty(data) ||\n    data.tree.nodes === undefined ||\n    data.tree.nodes.length === 0;\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const treeMapRef = useRef<HTMLDivElement>(null);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as TreeMapElementRef;\n\n    if (treeMapRef.current) {\n      exposedRef = {\n        element: treeMapRef.current,\n        getConfig: () => JSON.stringify({ type: ChartType.Treemap, ...config }),\n        downloadData: () => buildAndDownloadCsv(data.tree),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  return (\n    <TreeMapChartProviders\n      data={data}\n      seriesActions={seriesActions}\n      unit={unit}\n      {...config}\n    >\n      <TreeMapChartLayout\n        {...behavioralTrackingProps}\n        chartLayoutRef={chartLayoutRef}\n        ref={treeMapRef}\n        width={width}\n        height={height}\n        emptyState={emptyState}\n        errorState={errorState}\n        isEmpty={emptyData}\n        loading={loading}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n      />\n    </TreeMapChartProviders>\n  );\n});\n\n/**\n * The `TreeMap` visualizes the distribution of hierarchical data.\n * It uses nested rectangles of different sizes and colors to show\n * how much each category or subcategory contributes to the whole\n * data set.\n * @public\n */\nexport const TreeMap = Object.assign(TreeMapRoot, {\n  Legend: TreeMapChartLegend,\n  Tooltip,\n  Intent,\n  Toolbar,\n  DownloadCSV: TreeMapDownloadCSVSlot,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n"],
-  "mappings": "AAqFM;AArFN,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,0BAA0B;AAE7C,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AACvB,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAA8B;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,sBAAsB,KAAK;AAC1C,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,YACJ,QAAQ,IAAI,KACZ,KAAK,KAAK,UAAU,UACpB,KAAK,KAAK,MAAM,WAAW;AAE7B,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,qBAAqB,IAAI;AAEhD,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,WAAW,SAAS;AACtB,mBAAa;AAAA,QACX,SAAS,WAAW;AAAA,QACpB,WAAW,MAAM,KAAK,UAAU,EAAE,MAAM,UAAU,SAAS,GAAG,OAAO,CAAC;AAAA,QACtE,cAAc,MAAM,oBAAoB,KAAK,IAAI;AAAA,MACnD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA;AAAA,MACrB;AAAA;AAAA,EACF;AAEJ,CAAC;AASM,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type JSX,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { TreeMapChartLayout } from './components/TreeMapChartLayout.js';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants.js';\nimport { useTreeMapChartConfig } from './hooks/useTreeMapChartConfig.js';\nimport { TreeMapChartProviders } from './providers/TreeMapChartProviders.js';\nimport { TreeMapDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Legend as TreeMapChartLegend } from './slots/TreeMapChartLegend.js';\nimport type {\n  TreeMapElementRef,\n  TreeMapFlatProps,\n  TreeMapHierarchicalProps,\n  TreeMapProps,\n} from './types/treemap.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { toHierarchicalProps } from './utils/to-hierarchical-props.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'TreeMap';\n\nconst TreeMapInternal = forwardRef<\n  TreeMapElementRef,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PropsWithChildren<TreeMapHierarchicalProps>\n>((props, forwardedRef): JSX.Element => {\n  const {\n    data,\n    children,\n    seriesActions,\n    width = DEFAULT_WIDTH,\n    height = DEFAULT_HEIGHT,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'treemap-chart-root',\n    unit,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useTreeMapChartConfig(props);\n  const { loading } = config;\n\n  const emptyData =\n    isEmpty(data) ||\n    data.tree.nodes === undefined ||\n    data.tree.nodes.length === 0;\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const treeMapRef = useRef<HTMLDivElement>(null);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as TreeMapElementRef;\n\n    if (treeMapRef.current) {\n      exposedRef = {\n        element: treeMapRef.current,\n        getConfig: () => JSON.stringify({ type: ChartType.Treemap, ...config }),\n        downloadData: () => buildAndDownloadCsv(data.tree),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  return (\n    <TreeMapChartProviders\n      data={data}\n      seriesActions={seriesActions}\n      unit={unit}\n      {...config}\n    >\n      <TreeMapChartLayout\n        {...behavioralTrackingProps}\n        chartLayoutRef={chartLayoutRef}\n        ref={treeMapRef}\n        width={width}\n        height={height}\n        emptyState={emptyState}\n        errorState={errorState}\n        isEmpty={emptyData}\n        loading={loading}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n      />\n    </TreeMapChartProviders>\n  );\n});\n\nconst TreeMapRoot = forwardRef<\n  TreeMapElementRef,\n  PropsWithChildren<TreeMapProps>\n>((props, forwardedRef): JSX.Element => {\n  const hierarchicalProps = isFlatProps(props)\n    ? toHierarchicalProps(props)\n    : props;\n\n  return <TreeMapInternal {...hierarchicalProps} ref={forwardedRef} />;\n});\n\nconst isFlatProps = (props: TreeMapProps): props is TreeMapFlatProps => {\n  const flatProps = props as TreeMapFlatProps;\n  return (\n    flatProps?.valueAccessor !== undefined &&\n    flatProps?.groupBy !== undefined &&\n    Array.isArray(props?.data)\n  );\n};\n\n/**\n * The `TreeMap` visualizes the distribution of hierarchical data.\n * It uses nested rectangles of different sizes and colors to show\n * how much each category or subcategory contributes to the whole\n * data set.\n * @public\n */\nexport const TreeMap = Object.assign(TreeMapRoot, {\n  Legend: TreeMapChartLegend,\n  Tooltip,\n  Intent,\n  Toolbar,\n  DownloadCSV: TreeMapDownloadCSVSlot,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n"],
+  "mappings": "AA6FM;AA7FN,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,0BAA0B;AAO7C,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB,WAItB,CAAC,OAAO,iBAA8B;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,sBAAsB,KAAK;AAC1C,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,YACJ,QAAQ,IAAI,KACZ,KAAK,KAAK,UAAU,UACpB,KAAK,KAAK,MAAM,WAAW;AAE7B,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,qBAAqB,IAAI;AAEhD,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,WAAW,SAAS;AACtB,mBAAa;AAAA,QACX,SAAS,WAAW;AAAA,QACpB,WAAW,MAAM,KAAK,UAAU,EAAE,MAAM,UAAU,SAAS,GAAG,OAAO,CAAC;AAAA,QACtE,cAAc,MAAM,oBAAoB,KAAK,IAAI;AAAA,MACnD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA;AAAA,MACrB;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAA8B;AACtC,QAAM,oBAAoB,YAAY,KAAK,IACvC,oBAAoB,KAAK,IACzB;AAEJ,SAAO,oBAAC,mBAAiB,GAAG,mBAAmB,KAAK,cAAc;AACpE,CAAC;AAED,MAAM,cAAc,CAAC,UAAmD;AACtE,QAAM,YAAY;AAClB,SACE,WAAW,kBAAkB,UAC7B,WAAW,YAAY,UACvB,MAAM,QAAQ,OAAO,IAAI;AAE7B;AASO,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,CAAC;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapChartLayout.js

@@ -37,7 +37,7 @@ const TreeMapChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onRatioChange
   } = useChartLegend();
   const legendRatio = initialRatio ?? ratio;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
     ChartLayout,
     {
       ...behavioralTrackingProps,
@@ -55,10 +55,10 @@ const TreeMapChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "data-testid": dataTestId,
       "data-dt-component": dataDtComponent,
       children: [
-        /* @__PURE__ */ jsx(ChartLayout.Graph, { children: /* @__PURE__ */ jsx(TreeMapInternalDataProvider, { children: /* @__PURE__ */ jsx(TreeMapAggregationDataProvider, { children: /* @__PURE__ */ jsx(TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx(ChartLayout.Graph, { children: /* @__PURE__ */ jsx(TreeMapInternalDataProvider, { children: /* @__PURE__ */ jsx(TreeMapAggregationDataProvider, { children: /* @__PURE__ */ jsx(TreeMapHighlightingMapProvider, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ jsx(TreeMapInternal, { ref: forwardedRef }),
           loading ? null : /* @__PURE__ */ jsx(TreeMapOverlay, {})
-        ] }) }) }) }) }) }) }),
+        ] }) }) }) }) }),
         !legendHidden && /* @__PURE__ */ jsx(
           ChartLayout.Legend,
           {
@@ -70,7 +70,7 @@ const TreeMapChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         )
       ]
     }
-  );
+  ) }) });
 });
 export {
   TreeMapChartLayout

package/esm/charts/tree-map/components/TreeMapChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapChartLayout.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { TreeMapInternal } from './TreeMapInternal.js';\nimport { TreeMapLegendRenderer } from './TreeMapLegend/TreeMapLegendRenderer.js';\nimport { TreeMapOverlay } from './TreeMapOverlay/TreeMapOverlay.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { ChartLayout } from '../../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../../core/components/chart-layout/types/chart-layout.js';\nimport { OverlayProvider } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useChartLegend } from '../context/ChartLegendContext.js';\nimport { TreeMapAggregationDataProvider } from '../providers/TreeMapAggregationDataProvider.js';\nimport { TreeMapHighlightingMapProvider } from '../providers/TreeMapHighlightingMapProvider.js';\nimport { TreeMapInternalDataProvider } from '../providers/TreeMapInternalDataProvider.js';\n\ninterface TreemapChartLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  width: string | number;\n  height: string | number;\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  isEmpty: boolean;\n  loading: boolean;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  'data-dt-component': string;\n}\n\nexport const TreeMapChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TreemapChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    chartLayoutRef,\n    width,\n    height,\n    emptyState,\n    errorState,\n    isEmpty,\n    loading,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    hidden: legendHidden,\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = useChartLegend();\n\n  const legendRatio = initialRatio ?? ratio;\n\n  return (\n    <ChartLayout\n      {...behavioralTrackingProps}\n      ref={chartLayoutRef}\n      chartWidth={width}\n      chartHeight={height}\n      emptyState={emptyState}\n      errorState={errorState}\n      showLoader={loading}\n      isEmpty={isEmpty}\n      className={className}\n      style={style}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <TreeMapInternalDataProvider>\n          <TreeMapAggregationDataProvider>\n            <TreeMapHighlightingMapProvider>\n              <OverlayProvider>\n                <TooltipProvider>\n                  <div style={{ position: 'relative' }}>\n                    <TreeMapInternal ref={forwardedRef} />\n                    {loading ? null : <TreeMapOverlay />}\n                  </div>\n                </TooltipProvider>\n              </OverlayProvider>\n            </TreeMapHighlightingMapProvider>\n          </TreeMapAggregationDataProvider>\n        </TreeMapInternalDataProvider>\n      </ChartLayout.Graph>\n      {!legendHidden && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <TreeMapLegendRenderer />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n"],
-  "mappings": "AA0FkB,SACE,KADF;AA1FlB,SAAS,kBAA4D;AAErE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAK3C,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,sCAAsC;AAC/C,SAAS,sCAAsC;AAC/C,SAAS,mCAAmC;AAiBrC,MAAM,qBAAqC,2BAGhD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,qBAAqB;AAAA,EACvB,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,cAAc,gBAAgB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,+BACC,8BAAC,kCACC,8BAAC,kCACC,8BAAC,mBACC,8BAAC,mBACC,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAW,GACjC;AAAA,8BAAC,mBAAgB,KAAK,cAAc;AAAA,UACnC,UAAU,OAAO,oBAAC,kBAAe;AAAA,WACpC,GACF,GACF,GACF,GACF,GACF,GACF;AAAA,QACC,CAAC,gBACA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,yBAAsB;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { TreeMapInternal } from './TreeMapInternal.js';\nimport { TreeMapLegendRenderer } from './TreeMapLegend/TreeMapLegendRenderer.js';\nimport { TreeMapOverlay } from './TreeMapOverlay/TreeMapOverlay.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { ChartLayout } from '../../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../../core/components/chart-layout/types/chart-layout.js';\nimport { OverlayProvider } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useChartLegend } from '../context/ChartLegendContext.js';\nimport { TreeMapAggregationDataProvider } from '../providers/TreeMapAggregationDataProvider.js';\nimport { TreeMapHighlightingMapProvider } from '../providers/TreeMapHighlightingMapProvider.js';\nimport { TreeMapInternalDataProvider } from '../providers/TreeMapInternalDataProvider.js';\n\ninterface TreemapChartLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  width: string | number;\n  height: string | number;\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  isEmpty: boolean;\n  loading: boolean;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  'data-dt-component': string;\n}\n\nexport const TreeMapChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TreemapChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    chartLayoutRef,\n    width,\n    height,\n    emptyState,\n    errorState,\n    isEmpty,\n    loading,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    hidden: legendHidden,\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = useChartLegend();\n\n  const legendRatio = initialRatio ?? ratio;\n\n  return (\n    <OverlayProvider>\n      <TooltipProvider>\n        <ChartLayout\n          {...behavioralTrackingProps}\n          ref={chartLayoutRef}\n          chartWidth={width}\n          chartHeight={height}\n          emptyState={emptyState}\n          errorState={errorState}\n          showLoader={loading}\n          isEmpty={isEmpty}\n          className={className}\n          style={style}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-testid={dataTestId}\n          data-dt-component={dataDtComponent}\n        >\n          <ChartLayout.Graph>\n            <TreeMapInternalDataProvider>\n              <TreeMapAggregationDataProvider>\n                <TreeMapHighlightingMapProvider>\n                  <div style={{ position: 'relative' }}>\n                    <TreeMapInternal ref={forwardedRef} />\n                    {loading ? null : <TreeMapOverlay />}\n                  </div>\n                </TreeMapHighlightingMapProvider>\n              </TreeMapAggregationDataProvider>\n            </TreeMapInternalDataProvider>\n          </ChartLayout.Graph>\n          {!legendHidden && (\n            <ChartLayout.Legend\n              position={legendPosition}\n              initialRatio={legendRatio}\n              onResize={onRatioChange}\n            >\n              <TreeMapLegendRenderer />\n            </ChartLayout.Legend>\n          )}\n        </ChartLayout>\n      </TooltipProvider>\n    </OverlayProvider>\n  );\n});\n"],
+  "mappings": "AA0FkB,SACE,KADF;AA1FlB,SAAS,kBAA4D;AAErE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAK3C,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,sCAAsC;AAC/C,SAAS,sCAAsC;AAC/C,SAAS,mCAAmC;AAiBrC,MAAM,qBAAqC,2BAGhD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,qBAAqB;AAAA,EACvB,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,cAAc,gBAAgB;AAEpC,SACE,oBAAC,mBACC,8BAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,+BACC,8BAAC,kCACC,8BAAC,kCACC,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAW,GACjC;AAAA,8BAAC,mBAAgB,KAAK,cAAc;AAAA,UACnC,UAAU,OAAO,oBAAC,kBAAe;AAAA,WACpC,GACF,GACF,GACF,GACF;AAAA,QACC,CAAC,gBACA;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,yBAAsB;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EAEJ,GACF,GACF;AAEJ,CAAC;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.js

@@ -5,6 +5,7 @@ import { getLegendOrientation } from "../../../core/components/chart-layout/util
 import { ChartLegend } from "../../../core/components/legend/categorical/ChartLegend.js";
 import { useLegendSeriesActions } from "../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js";
 import { useTooltip as useTooltipStore } from "../../../core/components/overlay-tooltip/contexts/TooltipContext.js";
+import { NAME_ACCESSOR } from "../../constants.js";
 import { useNameAccessor } from "../../context/NameAccessorContext.js";
 import { useTreeMapHandlers } from "../../hooks/useTreeMapChartHandlers.js";
 import { useTruncationMode } from "../../hooks/useTruncationMode.js";
@@ -28,10 +29,11 @@ const TreeMapCategoricalLegend = () => {
     legendItems ?? [],
     (item) => item.id
   );
+  const hasValueNameAccessor = nameAccessor === NAME_ACCESSOR.Value;
   const chartLegendInteractionsProps = getLegendInteractionProps(
     isTooltipPinned,
     isLoading,
-    !!nameAccessor,
+    hasValueNameAccessor,
     legendActions,
     onLegendItemHover,
     onLegendItemClick

package/esm/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapLegend/TreeMapCategoricalLegend.tsx"],
-  "sourcesContent": ["import { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { useTooltip as useTooltipStore } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useNameAccessor } from '../../context/NameAccessorContext.js';\nimport { useTreeMapHandlers } from '../../hooks/useTreeMapChartHandlers.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { useColorMap } from '../../store/selectors.js';\nimport type { TreeMapCategoricalLegendItem } from '../../types/internal.js';\nimport { getLegendInteractionProps } from '../../utils/get-legend-interaction-props.js';\nimport { getLegendItems } from '../../utils/get-legend-items.js';\n\nexport const TreeMapCategoricalLegend = () => {\n  const legendColorMap = useColorMap();\n  const nameAccessor = useNameAccessor();\n  const { onLegendItemHover, onLegendItemClick } = useTreeMapHandlers();\n  const tooltipStore = useTooltipStore();\n\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n  const truncationMode = useTruncationMode();\n  const isTooltipPinned = tooltipStore.getState?.().pinned ?? false;\n  const isLoading = useChartLayoutLoading();\n\n  const legendItems = getLegendItems(\n    legendColorMap,\n  ) as TreeMapCategoricalLegendItem[];\n\n  const legendActions = useLegendSeriesActions<LegendItem>(\n    legendItems ?? [],\n    (item) => item.id,\n  );\n\n  const chartLegendInteractionsProps = getLegendInteractionProps(\n    isTooltipPinned,\n    isLoading,\n    !!nameAccessor,\n    legendActions,\n    onLegendItemHover,\n    onLegendItemClick,\n  );\n\n  return (\n    <ChartLegend\n      items={legendItems ?? []}\n      truncationMode={truncationMode}\n      orientation={legendOrientation}\n      {...chartLegendInteractionsProps}\n    />\n  );\n};\n"],
-  "mappings": "AA8CI;AA9CJ,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,2BAA2B,MAAM;AAC5C,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,mBAAmB;AACpE,QAAM,eAAe,gBAAgB;AAErC,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,oBAAoB,qBAAqB,iBAAiB;AAChE,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,aAAa,WAAW,EAAE,UAAU;AAC5D,QAAM,YAAY,sBAAsB;AAExC,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,eAAe,CAAC;AAAA,IAChB,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA,CAAC,CAAC;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,CAAC;AAAA,MACvB;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { useTooltip as useTooltipStore } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { NAME_ACCESSOR } from '../../constants.js';\nimport { useNameAccessor } from '../../context/NameAccessorContext.js';\nimport { useTreeMapHandlers } from '../../hooks/useTreeMapChartHandlers.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { useColorMap } from '../../store/selectors.js';\nimport type { TreeMapCategoricalLegendItem } from '../../types/internal.js';\nimport { getLegendInteractionProps } from '../../utils/get-legend-interaction-props.js';\nimport { getLegendItems } from '../../utils/get-legend-items.js';\n\nexport const TreeMapCategoricalLegend = () => {\n  const legendColorMap = useColorMap();\n  const nameAccessor = useNameAccessor();\n  const { onLegendItemHover, onLegendItemClick } = useTreeMapHandlers();\n  const tooltipStore = useTooltipStore();\n\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n  const truncationMode = useTruncationMode();\n  const isTooltipPinned = tooltipStore.getState?.().pinned ?? false;\n  const isLoading = useChartLayoutLoading();\n\n  const legendItems = getLegendItems(\n    legendColorMap,\n  ) as TreeMapCategoricalLegendItem[];\n\n  const legendActions = useLegendSeriesActions<LegendItem>(\n    legendItems ?? [],\n    (item) => item.id,\n  );\n\n  const hasValueNameAccessor = nameAccessor === NAME_ACCESSOR.Value;\n  const chartLegendInteractionsProps = getLegendInteractionProps(\n    isTooltipPinned,\n    isLoading,\n    hasValueNameAccessor,\n    legendActions,\n    onLegendItemHover,\n    onLegendItemClick,\n  );\n\n  return (\n    <ChartLegend\n      items={legendItems ?? []}\n      truncationMode={truncationMode}\n      orientation={legendOrientation}\n      {...chartLegendInteractionsProps}\n    />\n  );\n};\n"],
+  "mappings": "AAgDI;AAhDJ,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,2BAA2B,MAAM;AAC5C,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,mBAAmB;AACpE,QAAM,eAAe,gBAAgB;AAErC,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,oBAAoB,qBAAqB,iBAAiB;AAChE,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,aAAa,WAAW,EAAE,UAAU;AAC5D,QAAM,YAAY,sBAAsB;AAExC,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,eAAe,CAAC;AAAA,IAChB,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,uBAAuB,iBAAiB,cAAc;AAC5D,QAAM,+BAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,CAAC;AAAA,MACvB;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1iqz50a0-3-7-1 {
+._1iqz50a0-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;

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

@@ -15,12 +15,7 @@ const TreeMapOverlay = () => {
   const { width, height } = useGraphSize();
   const roundedWidth = Math.floor(width);
   const roundedHeight = Math.floor(height);
-  const {
-    handlePointerEnter,
-    handlePointerMove,
-    handlePointerLeave,
-    handleMouseClick
-  } = useOverlayHandlers(overlay);
+  const eventHandlers = useOverlayHandlers(overlay);
   const toolbarConfig = useToolbarConfig();
   const toolbarEnabled = isToolbarEnabled(toolbarConfig);
   const { chartSeriesActions } = useSeriesActions();
@@ -33,10 +28,7 @@ const TreeMapOverlay = () => {
       ref: overlay.overlayRef,
       style: { width: roundedWidth, height: roundedHeight },
       className: container,
-      onClick: handleMouseClick,
-      onPointerEnter: handlePointerEnter,
-      onPointerMove: handlePointerMove,
-      onPointerLeave: handlePointerLeave,
+      ...eventHandlers,
       children: [
         /* @__PURE__ */ jsx(
           TreeMapOverlayTooltip,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.tsx"],
-  "sourcesContent": ["import { container } from './TreeMapOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { useSeriesActions } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { TreeMapToolbar } from '../TreeMapToolbar/TreeMapToolbar.js';\nimport { TreeMapOverlayTooltip } from '../TreeMapTooltip/TreeMapOverlayTooltip.js';\n\nexport const TreeMapOverlay = () => {\n  const overlay = useOverlay();\n  const { width, height } = useGraphSize();\n  const roundedWidth = Math.floor(width);\n  const roundedHeight = Math.floor(height);\n\n  const {\n    handlePointerEnter,\n    handlePointerMove,\n    handlePointerLeave,\n    handleMouseClick,\n  } = useOverlayHandlers(overlay);\n\n  const toolbarConfig = useToolbarConfig();\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n  const { chartSeriesActions } = useSeriesActions();\n  const data = useTooltipData().data;\n\n  const series = data?.series?.[0];\n  const metadata = data?.metadata as { id: string; value: number } | undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      style={{ width: roundedWidth, height: roundedHeight }}\n      className={container}\n      onClick={handleMouseClick}\n      onPointerEnter={handlePointerEnter}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n    >\n      <TreeMapOverlayTooltip\n        actionsForItem={\n          chartSeriesActions && series && metadata\n            ? () => () =>\n                chartSeriesActions({\n                  id: metadata.id,\n                  name: series.name,\n                  value: metadata.value,\n                })\n            : undefined\n        }\n      />\n      {toolbarEnabled && <TreeMapToolbar />}\n    </Flex>\n  );\n};\n\nTreeMapOverlay['displayName'] = 'TreeMapOverlay';\n"],
-  "mappings": "AAkCI,SASE,KATF;AAlCJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAE/B,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,QAAM,eAAe,KAAK,MAAM,KAAK;AACrC,QAAM,gBAAgB,KAAK,MAAM,MAAM;AAEvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,OAAO;AAE9B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,iBAAiB,aAAa;AACrD,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAChD,QAAM,OAAO,eAAe,EAAE;AAE9B,QAAM,SAAS,MAAM,SAAS,CAAC;AAC/B,QAAM,WAAW,MAAM;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,OAAO,EAAE,OAAO,cAAc,QAAQ,cAAc;AAAA,MACpD,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,gBACE,sBAAsB,UAAU,WAC5B,MAAM,MACJ,mBAAmB;AAAA,cACjB,IAAI,SAAS;AAAA,cACb,MAAM,OAAO;AAAA,cACb,OAAO,SAAS;AAAA,YAClB,CAAC,IACH;AAAA;AAAA,QAER;AAAA,QACC,kBAAkB,oBAAC,kBAAe;AAAA;AAAA;AAAA,EACrC;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import { container } from './TreeMapOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { useSeriesActions } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { TreeMapToolbar } from '../TreeMapToolbar/TreeMapToolbar.js';\nimport { TreeMapOverlayTooltip } from '../TreeMapTooltip/TreeMapOverlayTooltip.js';\n\nexport const TreeMapOverlay = () => {\n  const overlay = useOverlay();\n  const { width, height } = useGraphSize();\n  const roundedWidth = Math.floor(width);\n  const roundedHeight = Math.floor(height);\n\n  const eventHandlers = useOverlayHandlers(overlay);\n\n  const toolbarConfig = useToolbarConfig();\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n  const { chartSeriesActions } = useSeriesActions();\n  const data = useTooltipData().data;\n\n  const series = data?.series?.[0];\n  const metadata = data?.metadata as { id: string; value: number } | undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      style={{ width: roundedWidth, height: roundedHeight }}\n      className={container}\n      {...eventHandlers}\n    >\n      <TreeMapOverlayTooltip\n        actionsForItem={\n          chartSeriesActions && series && metadata\n            ? () => () =>\n                chartSeriesActions({\n                  id: metadata.id,\n                  name: series.name,\n                  value: metadata.value,\n                })\n            : undefined\n        }\n      />\n      {toolbarEnabled && <TreeMapToolbar />}\n    </Flex>\n  );\n};\n\nTreeMapOverlay['displayName'] = 'TreeMapOverlay';\n"],
+  "mappings": "AA6BI,SAME,KANF;AA7BJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAE/B,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,QAAM,eAAe,KAAK,MAAM,KAAK;AACrC,QAAM,gBAAgB,KAAK,MAAM,MAAM;AAEvC,QAAM,gBAAgB,mBAAmB,OAAO;AAEhD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,iBAAiB,aAAa;AACrD,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAChD,QAAM,OAAO,eAAe,EAAE;AAE9B,QAAM,SAAS,MAAM,SAAS,CAAC;AAC/B,QAAM,WAAW,MAAM;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,OAAO,EAAE,OAAO,cAAc,QAAQ,cAAc;AAAA,MACpD,WAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,gBACE,sBAAsB,UAAU,WAC5B,MAAM,MACJ,mBAAmB;AAAA,cACjB,IAAI,SAAS;AAAA,cACb,MAAM,OAAO;AAAA,cACb,OAAO,SAAS;AAAA,YAClB,CAAC,IACH;AAAA;AAAA,QAER;AAAA,QACC,kBAAkB,oBAAC,kBAAe;AAAA;AAAA;AAAA,EACrC;AAEJ;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./TreeMapOverlay.css";
-var container = "_1iqz50a0-3-7-1";
+var container = "_1iqz50a0-3-8-0";
 export {
   container
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css.ts"],
-  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-7-1';"],
+  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapToolbar/TreeMapToolbar.js

@@ -6,11 +6,9 @@ import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartTool
 import { DEFAULT_TOOLBAR_PLACEMENT } from "../../constants.js";
 import { useToolbarConfig } from "../../context/ToolbarContext.js";
 import { useTreeMapRawData } from "../../context/TreeMapRawDataContext.js";
-import { useTreeMapToolbarVisibleState } from "../../store/selectors.js";
 import { buildAndDownloadCsv } from "../../utils/build-and-download-csv.js";
 const TreeMapToolbar = () => {
   const toolbarConfig = useToolbarConfig();
-  const toolbarVisible = useTreeMapToolbarVisibleState();
   const dispatch = useTooltipReducer();
   const toolbarPlacement = toolbarConfig?.placement ?? DEFAULT_TOOLBAR_PLACEMENT;
   const handleMouseEnter = () => {
@@ -28,17 +26,17 @@ const TreeMapToolbar = () => {
   return /* @__PURE__ */ jsx(
     ChartToolbarRenderer,
     {
-      visible: toolbarVisible,
       placement: toolbarPlacement,
       collapsed: toolbarConfig?.collapsed,
-      draggable: true,
       initialA11yState,
       onMouseEnter: handleMouseEnter,
       menuDisplayMode: "never",
       isDownloadEnabled: showMenuToolbarButton,
       intents: toolbarConfig?.intents,
       handleDownloadDataToolbar,
+      draggable: true,
       removeDragHandle: true,
+      visibleWhenMouseInBounds: true,
       ...behaviorTrackingProps,
       children: showDefaultToolbarDownloadButton && /* @__PURE__ */ jsx(TreeMapDownloadDataButton, {})
     }

package/esm/charts/tree-map/components/TreeMapToolbar/TreeMapToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapToolbar/TreeMapToolbar.tsx"],
-  "sourcesContent": ["import { TreeMapDownloadDataButton } from './TreeMapDownloadDataButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useTooltipReducer } from '../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { A11yToolbarTabIndex } from '../../../core/types/toolbar.js';\nimport { DEFAULT_TOOLBAR_PLACEMENT } from '../../constants.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useTreeMapRawData } from '../../context/TreeMapRawDataContext.js';\nimport { useTreeMapToolbarVisibleState } from '../../store/selectors.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const TreeMapToolbar = () => {\n  const toolbarConfig = useToolbarConfig();\n  const toolbarVisible = useTreeMapToolbarVisibleState();\n  const dispatch = useTooltipReducer();\n  const toolbarPlacement =\n    toolbarConfig?.placement ?? DEFAULT_TOOLBAR_PLACEMENT;\n\n  const handleMouseEnter = () => {\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n\n  const isDownloadEnabled = toolbarConfig?.downloadData?.enabled ?? false;\n  const { tree } = useTreeMapRawData();\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(tree);\n\n  const showDefaultToolbarDownloadButton =\n    isDownloadEnabled && !toolbarConfig?.intents;\n  const showMenuToolbarButton =\n    isDownloadEnabled && !!toolbarConfig?.intents?.length;\n\n  const initialA11yState: A11yToolbarTabIndex[] =\n    showDefaultToolbarDownloadButton ? [{ download: 0 }] : [{ intent: 0 }];\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n\n  return (\n    <ChartToolbarRenderer\n      visible={toolbarVisible}\n      placement={toolbarPlacement}\n      collapsed={toolbarConfig?.collapsed}\n      draggable={true}\n      initialA11yState={initialA11yState}\n      onMouseEnter={handleMouseEnter}\n      menuDisplayMode=\"never\"\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={toolbarConfig?.intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      removeDragHandle={true}\n      {...behaviorTrackingProps}\n    >\n      {showDefaultToolbarDownloadButton && <TreeMapDownloadDataButton />}\n    </ChartToolbarRenderer>\n  );\n};\n"],
-  "mappings": "AAuD2C;AAvD3C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AAE7B,MAAM,iBAAiB,MAAM;AAClC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,8BAA8B;AACrD,QAAM,WAAW,kBAAkB;AACnC,QAAM,mBACJ,eAAe,aAAa;AAE9B,QAAM,mBAAmB,MAAM;AAC7B,aAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,EACtC;AAEA,QAAM,oBAAoB,eAAe,cAAc,WAAW;AAClE,QAAM,EAAE,KAAK,IAAI,kBAAkB;AAGnC,QAAM,4BAA4B,MAAM,oBAAoB,IAAI;AAEhE,QAAM,mCACJ,qBAAqB,CAAC,eAAe;AACvC,QAAM,wBACJ,qBAAqB,CAAC,CAAC,eAAe,SAAS;AAEjD,QAAM,mBACJ,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;AAEvE,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW,eAAe;AAAA,MAC1B,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,iBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,SAAS,eAAe;AAAA,MACxB;AAAA,MACA,kBAAkB;AAAA,MACjB,GAAG;AAAA,MAEH,8CAAoC,oBAAC,6BAA0B;AAAA;AAAA,EAClE;AAEJ;",
+  "sourcesContent": ["import { TreeMapDownloadDataButton } from './TreeMapDownloadDataButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useTooltipReducer } from '../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { A11yToolbarTabIndex } from '../../../core/types/toolbar.js';\nimport { DEFAULT_TOOLBAR_PLACEMENT } from '../../constants.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useTreeMapRawData } from '../../context/TreeMapRawDataContext.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const TreeMapToolbar = () => {\n  const toolbarConfig = useToolbarConfig();\n  const dispatch = useTooltipReducer();\n  const toolbarPlacement =\n    toolbarConfig?.placement ?? DEFAULT_TOOLBAR_PLACEMENT;\n\n  const handleMouseEnter = () => {\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n\n  const isDownloadEnabled = toolbarConfig?.downloadData?.enabled ?? false;\n  const { tree } = useTreeMapRawData();\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(tree);\n\n  const showDefaultToolbarDownloadButton =\n    isDownloadEnabled && !toolbarConfig?.intents;\n  const showMenuToolbarButton =\n    isDownloadEnabled && !!toolbarConfig?.intents?.length;\n\n  const initialA11yState: A11yToolbarTabIndex[] =\n    showDefaultToolbarDownloadButton ? [{ download: 0 }] : [{ intent: 0 }];\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n\n  return (\n    <ChartToolbarRenderer\n      placement={toolbarPlacement}\n      collapsed={toolbarConfig?.collapsed}\n      initialA11yState={initialA11yState}\n      onMouseEnter={handleMouseEnter}\n      menuDisplayMode=\"never\"\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={toolbarConfig?.intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      draggable\n      removeDragHandle\n      visibleWhenMouseInBounds\n      {...behaviorTrackingProps}\n    >\n      {showDefaultToolbarDownloadButton && <TreeMapDownloadDataButton />}\n    </ChartToolbarRenderer>\n  );\n};\n"],
+  "mappings": "AAqD2C;AArD3C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAE7B,MAAM,iBAAiB,MAAM;AAClC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,WAAW,kBAAkB;AACnC,QAAM,mBACJ,eAAe,aAAa;AAE9B,QAAM,mBAAmB,MAAM;AAC7B,aAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,EACtC;AAEA,QAAM,oBAAoB,eAAe,cAAc,WAAW;AAClE,QAAM,EAAE,KAAK,IAAI,kBAAkB;AAGnC,QAAM,4BAA4B,MAAM,oBAAoB,IAAI;AAEhE,QAAM,mCACJ,qBAAqB,CAAC,eAAe;AACvC,QAAM,wBACJ,qBAAqB,CAAC,CAAC,eAAe,SAAS;AAEjD,QAAM,mBACJ,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;AAEvE,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW,eAAe;AAAA,MAC1B;AAAA,MACA,cAAc;AAAA,MACd,iBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,SAAS,eAAe;AAAA,MACxB;AAAA,MACA,WAAS;AAAA,MACT,kBAAgB;AAAA,MAChB,0BAAwB;AAAA,MACvB,GAAG;AAAA,MAEH,8CAAoC,oBAAC,6BAA0B;AAAA;AAAA,EAClE;AAEJ;",
   "names": []
 }

package/esm/charts/tree-map/components/canvas/TreeMapSquareRenderer.js

@@ -3,15 +3,16 @@ import { useCanvas } from "../../../core/components/canvas/hooks/useCanvas.js";
 import { getCanvasColor } from "../../../core/components/canvas/utils/canvas-color.js";
 import { getColorByContrast } from "../../../core/utils/color-contrast.js";
 import { getFontDetails } from "../../../core/utils/get-font-details.js";
+import { getTextMeasurer } from "../../../core/utils/text-measure.js";
 import {
   DEFAULT_LABEL_ALIGN,
   DEFAULT_LABEL_BASELINE,
+  INCREASED_FONT_WEIGHT,
   RECT_BORDER_RADIUS
 } from "../../constants.js";
 import { useTextSize } from "../../context/TextSizeContext.js";
 import { useTruncationMode } from "../../hooks/useTruncationMode.js";
 import { buildLabels } from "../../utils/build-labels.js";
-import { getTextMeasurer } from "../../utils/text-measure.js";
 function TreeMapSquareRenderer(props) {
   const {
     name,
@@ -46,7 +47,9 @@ function TreeMapSquareRenderer(props) {
         truncationMode,
         withValueOnly
       };
-      const textMeasurer = getTextMeasurer(ctx, textSize);
+      const textMeasurer = getTextMeasurer(ctx, textSize, {
+        fontWeight: INCREASED_FONT_WEIGHT
+      });
       const labels = buildLabels(labelsConfig, treemapRect, textMeasurer);
       drawLabels(ctx, labels);
     },

package/esm/charts/tree-map/components/canvas/TreeMapSquareRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/canvas/TreeMapSquareRenderer.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport {\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTextSize } from '../../context/TextSizeContext.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport type { TreeMapRect } from '../../types/treemap.js';\nimport { type TreeMapLabel, buildLabels } from '../../utils/build-labels.js';\nimport { getTextMeasurer } from '../../utils/text-measure.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\ntype TreeMapRectStyle = {\n  opacity: number;\n  color: string;\n};\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    name,\n    value,\n    width,\n    height,\n    opacity,\n    color,\n    x,\n    y,\n    withValueOnly = false,\n    skipDrawing = false,\n    withLabel = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n  const textSize = useTextSize();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return;\n      }\n\n      const treemapRect = { width, height, x, y };\n      const treemapRectStyle = { opacity, color };\n\n      drawTreeMapRect(ctx, treemapRect, treemapRectStyle);\n\n      if (!withLabel) {\n        return;\n      }\n\n      const labelsConfig = {\n        name,\n        value,\n        textSize,\n        truncationMode,\n        withValueOnly,\n      };\n      const textMeasurer = getTextMeasurer(ctx, textSize);\n      const labels = buildLabels(labelsConfig, treemapRect, textMeasurer);\n\n      drawLabels(ctx, labels);\n    },\n    [\n      name,\n      value,\n      width,\n      height,\n      opacity,\n      color,\n      x,\n      y,\n      withValueOnly,\n      skipDrawing,\n      withLabel,\n      truncationMode,\n      textSize,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n\nconst drawTreeMapRect = (\n  ctx: CanvasRenderingContext2D,\n  { x, y, width, height }: TreeMapRect,\n  { opacity, color }: TreeMapRectStyle,\n) => {\n  ctx.moveTo(x, y);\n  ctx.beginPath();\n  ctx.globalAlpha = opacity;\n\n  ctx.fillStyle = getCanvasColor(color);\n  ctx.filter = 'none';\n  ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n  ctx.fill();\n};\n\nconst drawLabels = (ctx: CanvasRenderingContext2D, labels: TreeMapLabel[]) => {\n  ctx.textAlign = DEFAULT_LABEL_ALIGN;\n  ctx.textBaseline = DEFAULT_LABEL_BASELINE;\n  ctx.fillStyle = getColorByContrast(ctx.fillStyle as string);\n\n  labels.forEach((label) => drawLabel(ctx, label));\n};\n\nconst drawLabel = (\n  ctx: CanvasRenderingContext2D,\n  { fontConfig, text, position }: TreeMapLabel,\n) => {\n  ctx.font = getFontDetails(\n    fontConfig.fontWeight,\n    fontConfig.fontSize,\n    fontConfig.lineHeight,\n  );\n  ctx.fillText(text, position.x, position.y);\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAA4B,mBAAmB;AAC/C,SAAS,uBAAuB;AAqBzB,SAAS,sBAAsB,OAAmC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAE7B,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,aAAa;AACf;AAAA,MACF;AAEA,YAAM,cAAc,EAAE,OAAO,QAAQ,GAAG,EAAE;AAC1C,YAAM,mBAAmB,EAAE,SAAS,MAAM;AAE1C,sBAAgB,KAAK,aAAa,gBAAgB;AAElD,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,eAAe;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,YAAM,eAAe,gBAAgB,KAAK,QAAQ;AAClD,YAAM,SAAS,YAAY,cAAc,aAAa,YAAY;AAElE,iBAAW,KAAK,MAAM;AAAA,IACxB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,kBAAkB,IAAI;AAEhC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;AAEvC,MAAM,kBAAkB,CACtB,KACA,EAAE,GAAG,GAAG,OAAO,OAAO,GACtB,EAAE,SAAS,MAAM,MACd;AACH,MAAI,OAAO,GAAG,CAAC;AACf,MAAI,UAAU;AACd,MAAI,cAAc;AAElB,MAAI,YAAY,eAAe,KAAK;AACpC,MAAI,SAAS;AACb,MAAI,UAAU,GAAG,GAAG,OAAO,QAAQ,kBAAkB;AACrD,MAAI,KAAK;AACX;AAEA,MAAM,aAAa,CAAC,KAA+B,WAA2B;AAC5E,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,YAAY,mBAAmB,IAAI,SAAmB;AAE1D,SAAO,QAAQ,CAAC,UAAU,UAAU,KAAK,KAAK,CAAC;AACjD;AAEA,MAAM,YAAY,CAChB,KACA,EAAE,YAAY,MAAM,SAAS,MAC1B;AACH,MAAI,OAAO;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACA,MAAI,SAAS,MAAM,SAAS,GAAG,SAAS,CAAC;AAC3C;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport { getTextMeasurer } from '../../../core/utils/text-measure.js';\nimport {\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  INCREASED_FONT_WEIGHT,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTextSize } from '../../context/TextSizeContext.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport type { TreeMapRect } from '../../types/treemap.js';\nimport { type TreeMapLabel, buildLabels } from '../../utils/build-labels.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\ntype TreeMapRectStyle = {\n  opacity: number;\n  color: string;\n};\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    name,\n    value,\n    width,\n    height,\n    opacity,\n    color,\n    x,\n    y,\n    withValueOnly = false,\n    skipDrawing = false,\n    withLabel = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n  const textSize = useTextSize();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return;\n      }\n\n      const treemapRect = { width, height, x, y };\n      const treemapRectStyle = { opacity, color };\n\n      drawTreeMapRect(ctx, treemapRect, treemapRectStyle);\n\n      if (!withLabel) {\n        return;\n      }\n\n      const labelsConfig = {\n        name,\n        value,\n        textSize,\n        truncationMode,\n        withValueOnly,\n      };\n      const textMeasurer = getTextMeasurer(ctx, textSize, {\n        fontWeight: INCREASED_FONT_WEIGHT,\n      });\n      const labels = buildLabels(labelsConfig, treemapRect, textMeasurer);\n\n      drawLabels(ctx, labels);\n    },\n    [\n      name,\n      value,\n      width,\n      height,\n      opacity,\n      color,\n      x,\n      y,\n      withValueOnly,\n      skipDrawing,\n      withLabel,\n      truncationMode,\n      textSize,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n\nconst drawTreeMapRect = (\n  ctx: CanvasRenderingContext2D,\n  { x, y, width, height }: TreeMapRect,\n  { opacity, color }: TreeMapRectStyle,\n) => {\n  ctx.moveTo(x, y);\n  ctx.beginPath();\n  ctx.globalAlpha = opacity;\n\n  ctx.fillStyle = getCanvasColor(color);\n  ctx.filter = 'none';\n  ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n  ctx.fill();\n};\n\nconst drawLabels = (ctx: CanvasRenderingContext2D, labels: TreeMapLabel[]) => {\n  ctx.textAlign = DEFAULT_LABEL_ALIGN;\n  ctx.textBaseline = DEFAULT_LABEL_BASELINE;\n  ctx.fillStyle = getColorByContrast(ctx.fillStyle as string);\n\n  labels.forEach((label) => drawLabel(ctx, label));\n};\n\nconst drawLabel = (\n  ctx: CanvasRenderingContext2D,\n  { fontConfig, text, position }: TreeMapLabel,\n) => {\n  ctx.font = getFontDetails(\n    fontConfig.fontWeight,\n    fontConfig.fontSize,\n    fontConfig.lineHeight,\n  );\n  ctx.fillText(text, position.x, position.y);\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAA4B,mBAAmB;AAqBxC,SAAS,sBAAsB,OAAmC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAE7B,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,aAAa;AACf;AAAA,MACF;AAEA,YAAM,cAAc,EAAE,OAAO,QAAQ,GAAG,EAAE;AAC1C,YAAM,mBAAmB,EAAE,SAAS,MAAM;AAE1C,sBAAgB,KAAK,aAAa,gBAAgB;AAElD,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,eAAe;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,YAAM,eAAe,gBAAgB,KAAK,UAAU;AAAA,QAClD,YAAY;AAAA,MACd,CAAC;AACD,YAAM,SAAS,YAAY,cAAc,aAAa,YAAY;AAElE,iBAAW,KAAK,MAAM;AAAA,IACxB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,kBAAkB,IAAI;AAEhC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;AAEvC,MAAM,kBAAkB,CACtB,KACA,EAAE,GAAG,GAAG,OAAO,OAAO,GACtB,EAAE,SAAS,MAAM,MACd;AACH,MAAI,OAAO,GAAG,CAAC;AACf,MAAI,UAAU;AACd,MAAI,cAAc;AAElB,MAAI,YAAY,eAAe,KAAK;AACpC,MAAI,SAAS;AACb,MAAI,UAAU,GAAG,GAAG,OAAO,QAAQ,kBAAkB;AACrD,MAAI,KAAK;AACX;AAEA,MAAM,aAAa,CAAC,KAA+B,WAA2B;AAC5E,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,YAAY,mBAAmB,IAAI,SAAmB;AAE1D,SAAO,QAAQ,CAAC,UAAU,UAAU,KAAK,KAAK,CAAC;AACjD;AAEA,MAAM,YAAY,CAChB,KACA,EAAE,YAAY,MAAM,SAAS,MAC1B;AACH,MAAI,OAAO;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACA,MAAI,SAAS,MAAM,SAAS,GAAG,SAAS,CAAC;AAC3C;",
   "names": []
 }

package/esm/charts/tree-map/constants.js

@@ -1,5 +1,5 @@
 import Colors from "@dynatrace/strato-design-tokens/colors";
-import { SCALE_FALLBACK_COLOR } from "../core/constants.js";
+import { AUTO_TEXT_SIZE_PRESETS, SCALE_FALLBACK_COLOR } from "../core/constants.js";
 const DISPLAY_NAME = "TreeMap";
 const LABELS_DISPLAY = Object.freeze({
   All: "all",
@@ -57,7 +57,6 @@ const DEFAULT_FONT_WEIGHT = 400;
 const INCREASED_FONT_WEIGHT = 500;
 const DEFAULT_NAME_ACCESSOR = void 0;
 const DEFAULT_TEXT_SIZE = DEFAULT_LABEL_FONTSIZE;
-const AUTO_TEXT_SIZE_PRESETS = [18, 16, 14, 12];
 const DARK_LABEL_TEXT = "#000000";
 const LIGHT_LABEL_TEXT = "#ffffff";
 const RECT_BORDER_RADIUS = 2;

package/esm/charts/tree-map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DEFAULT_TEXT_SIZE: number | 'auto' = DEFAULT_LABEL_FONTSIZE;\n\nexport const AUTO_TEXT_SIZE_PRESETS = [18, 16, 14, 12];\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,4BAA4B;AAG9B,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,oBAAqC;AAE3C,MAAM,yBAAyB,CAAC,IAAI,IAAI,IAAI,EAAE;AAE9C,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,2BAA2B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { AUTO_TEXT_SIZE_PRESETS, SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\nimport type { TextSize } from '../core/types/text-size.js';\n\nexport { AUTO_TEXT_SIZE_PRESETS };\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DEFAULT_TEXT_SIZE: TextSize = DEFAULT_LABEL_FONTSIZE;\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,wBAAwB,4BAA4B;AAMtD,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,oBAA8B;AAEpC,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,2BAA2B;",
   "names": []
 }

package/esm/charts/tree-map/context/TextSizeContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/context/TextSizeContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { DEFAULT_TEXT_SIZE } from '../constants.js';\n\nexport const TextSizeContext = createContext<number | 'auto'>(DEFAULT_TEXT_SIZE);\n\nexport const useTextSize = () => useContext(TextSizeContext);\n\nTextSizeContext['displayName'] = 'TextSizeContext';\n"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,SAAS,yBAAyB;AAE3B,MAAM,kBAAkB,cAA+B,iBAAiB;AAExE,MAAM,cAAc,MAAM,WAAW,eAAe;AAE3D,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport type { TextSize } from '../../core/types/text-size.js';\nimport { DEFAULT_TEXT_SIZE } from '../constants.js';\n\nexport const TextSizeContext = createContext<TextSize>(DEFAULT_TEXT_SIZE);\n\nexport const useTextSize = () => useContext(TextSizeContext);\n\nTextSizeContext['displayName'] = 'TextSizeContext';\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAG1C,SAAS,yBAAyB;AAE3B,MAAM,kBAAkB,cAAwB,iBAAiB;AAEjE,MAAM,cAAc,MAAM,WAAW,eAAe;AAE3D,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/hooks/useOverlayHandlers.js

@@ -1,6 +1,7 @@
-import { useOverlayEventHandlers } from "../../core/hooks/useOverlayEventHandlers.js";
+import {
+  useOverlayEventHandlers
+} from "../../core/hooks/useOverlayEventHandlers.js";
 import { LABELS_DISPLAY } from "../constants.js";
-import { useSetOverlayState } from "./useSetOverlayState.js";
 import { useFormatter } from "../context/FormatterContext.js";
 import { useLabelsDisplay } from "../context/LabelsDisplayContext.js";
 import { useTreeMapInternalData } from "../context/TreeMapInternalDataContext.js";
@@ -11,15 +12,14 @@ const useOverlayHandlers = (overlay) => {
   const hierarchyLeafNodes = useLeafNodesState();
   const hierarchyClusterNodes = useClusterNodesState();
   const labelsDisplay = useLabelsDisplay();
-  const { setToolbarVisible } = useSetOverlayState();
   const formatter = useFormatter();
   const { unit } = useTreeMapInternalData();
   const parentLabels = [LABELS_DISPLAY.All, LABELS_DISPLAY.Clusters];
   const hasParentLabels = parentLabels.includes(labelsDisplay);
-  const getTooltipDataFromEvent = (event) => {
+  const getTooltipDataFromEvent = (coords) => {
     const position = overlay.getAdjustedPositionsFromAbsolute(
-      event.clientX,
-      event.clientY
+      coords.clientX,
+      coords.clientY
     );
     const relativePosition = {
       x: position.relativeX ?? 0,
@@ -33,8 +33,7 @@ const useOverlayHandlers = (overlay) => {
     );
     return tooltipData ? buildOverlayTooltipData(tooltipData, formatter, unit) : void 0;
   };
-  return useOverlayEventHandlers(overlay, {
-    onToolbarVisibilityChange: setToolbarVisible,
+  return useOverlayEventHandlers({
     getTooltipData: getTooltipDataFromEvent
   });
 };

package/esm/charts/tree-map/hooks/useOverlayHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/hooks/useOverlayHandlers.ts"],
-  "sourcesContent": ["import { type MouseEvent } from 'react';\n\nimport type { Overlay } from '../../core/components/overlay-tooltip/types.js';\nimport { useOverlayEventHandlers } from '../../core/hooks/useOverlayEventHandlers.js';\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { useSetOverlayState } from './useSetOverlayState.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapInternalData } from '../context/TreeMapInternalDataContext.js';\nimport { useClusterNodesState, useLeafNodesState } from '../store/selectors.js';\nimport { buildOverlayTooltipData } from '../utils/build-overlay-tooltip-data.js';\nimport { getTooltipData } from '../utils/get-tooltip-data.js';\n\nexport const useOverlayHandlers = (overlay: Overlay) => {\n  const hierarchyLeafNodes = useLeafNodesState();\n  const hierarchyClusterNodes = useClusterNodesState();\n  const labelsDisplay = useLabelsDisplay();\n  const { setToolbarVisible } = useSetOverlayState();\n  const formatter = useFormatter();\n  const { unit } = useTreeMapInternalData();\n\n  const parentLabels: string[] = [LABELS_DISPLAY.All, LABELS_DISPLAY.Clusters];\n  const hasParentLabels = parentLabels.includes(labelsDisplay);\n\n  const getTooltipDataFromEvent = (event: MouseEvent<HTMLDivElement>) => {\n    const position = overlay.getAdjustedPositionsFromAbsolute(\n      event.clientX,\n      event.clientY,\n    );\n    const relativePosition = {\n      x: position.relativeX ?? 0,\n      y: position.relativeY ?? 0,\n    };\n    const tooltipData = getTooltipData(\n      hierarchyLeafNodes,\n      hierarchyClusterNodes,\n      relativePosition,\n      hasParentLabels,\n    );\n    return tooltipData\n      ? buildOverlayTooltipData(tooltipData, formatter, unit)\n      : undefined;\n  };\n\n  return useOverlayEventHandlers(overlay, {\n    onToolbarVisibilityChange: setToolbarVisible,\n    getTooltipData: getTooltipDataFromEvent,\n  });\n};\n"],
-  "mappings": "AAGA,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,CAAC,YAAqB;AACtD,QAAM,qBAAqB,kBAAkB;AAC7C,QAAM,wBAAwB,qBAAqB;AACnD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,EAAE,kBAAkB,IAAI,mBAAmB;AACjD,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,KAAK,IAAI,uBAAuB;AAExC,QAAM,eAAyB,CAAC,eAAe,KAAK,eAAe,QAAQ;AAC3E,QAAM,kBAAkB,aAAa,SAAS,aAAa;AAE3D,QAAM,0BAA0B,CAAC,UAAsC;AACrE,UAAM,WAAW,QAAQ;AAAA,MACvB,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AACA,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG,SAAS,aAAa;AAAA,IAC3B;AACA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,cACH,wBAAwB,aAAa,WAAW,IAAI,IACpD;AAAA,EACN;AAEA,SAAO,wBAAwB,SAAS;AAAA,IACtC,2BAA2B;AAAA,IAC3B,gBAAgB;AAAA,EAClB,CAAC;AACH;",
+  "sourcesContent": ["import type { Overlay } from '../../core/components/overlay-tooltip/types.js';\nimport {\n  useOverlayEventHandlers,\n  type Options,\n} from '../../core/hooks/useOverlayEventHandlers.js';\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapInternalData } from '../context/TreeMapInternalDataContext.js';\nimport { useClusterNodesState, useLeafNodesState } from '../store/selectors.js';\nimport { buildOverlayTooltipData } from '../utils/build-overlay-tooltip-data.js';\nimport { getTooltipData } from '../utils/get-tooltip-data.js';\n\nexport const useOverlayHandlers = (overlay: Overlay) => {\n  const hierarchyLeafNodes = useLeafNodesState();\n  const hierarchyClusterNodes = useClusterNodesState();\n  const labelsDisplay = useLabelsDisplay();\n  const formatter = useFormatter();\n  const { unit } = useTreeMapInternalData();\n\n  const parentLabels: string[] = [LABELS_DISPLAY.All, LABELS_DISPLAY.Clusters];\n  const hasParentLabels = parentLabels.includes(labelsDisplay);\n\n  const getTooltipDataFromEvent: Options['getTooltipData'] = (coords) => {\n    const position = overlay.getAdjustedPositionsFromAbsolute(\n      coords.clientX,\n      coords.clientY,\n    );\n    const relativePosition = {\n      x: position.relativeX ?? 0,\n      y: position.relativeY ?? 0,\n    };\n    const tooltipData = getTooltipData(\n      hierarchyLeafNodes,\n      hierarchyClusterNodes,\n      relativePosition,\n      hasParentLabels,\n    );\n    return tooltipData\n      ? buildOverlayTooltipData(tooltipData, formatter, unit)\n      : undefined;\n  };\n\n  return useOverlayEventHandlers({\n    getTooltipData: getTooltipDataFromEvent,\n  });\n};\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,CAAC,YAAqB;AACtD,QAAM,qBAAqB,kBAAkB;AAC7C,QAAM,wBAAwB,qBAAqB;AACnD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,KAAK,IAAI,uBAAuB;AAExC,QAAM,eAAyB,CAAC,eAAe,KAAK,eAAe,QAAQ;AAC3E,QAAM,kBAAkB,aAAa,SAAS,aAAa;AAE3D,QAAM,0BAAqD,CAAC,WAAW;AACrE,UAAM,WAAW,QAAQ;AAAA,MACvB,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AACA,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG,SAAS,aAAa;AAAA,IAC3B;AACA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,cACH,wBAAwB,aAAa,WAAW,IAAI,IACpD;AAAA,EACN;AAEA,SAAO,wBAAwB;AAAA,IAC7B,gBAAgB;AAAA,EAClB,CAAC;AACH;",
   "names": []
 }

package/esm/charts/tree-map/hooks/useTreeMapChartConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/hooks/useTreeMapChartConfig.ts"],
-  "sourcesContent": ["import { merge } from 'lodash-es';\nimport { type PropsWithChildren, useContext } from 'react';\n\nimport { TreeMapChartConfigContext } from '../context/TreeMapConfigContext.js';\nimport { defaultTreeMapConfig } from '../defaults.js';\nimport type {\n  TreeMapConfig,\n  TreeMapContextConfig,\n} from '../types/treemap-chart.config.js';\nimport type { TreeMapProps } from '../types/treemap.js';\nimport { buildTreeMapChartConfig } from '../utils/build-tree-map-chart-config.js';\nimport { iterateSlots } from '../utils/iterate-slots.js';\n\nexport function deserializeConfig(\n  serializedConfig: string,\n): TreeMapContextConfig {\n  try {\n    return merge({}, defaultTreeMapConfig, JSON.parse(serializedConfig));\n  } catch {\n    return defaultTreeMapConfig;\n  }\n}\n\nexport const useTreeMapChartConfig = (\n  props: PropsWithChildren<TreeMapProps>,\n): TreeMapConfig => {\n  const { children } = props;\n\n  const contextConfig = useContext(TreeMapChartConfigContext);\n\n  const slots = iterateSlots(children);\n\n  const isImportedConfig = typeof contextConfig === 'string';\n\n  const config = isImportedConfig\n    ? deserializeConfig(contextConfig)\n    : contextConfig;\n\n  return buildTreeMapChartConfig(props, config, slots);\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAiC,kBAAkB;AAEnD,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAMrC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAEtB,SAAS,kBACd,kBACsB;AACtB,MAAI;AACF,WAAO,MAAM,CAAC,GAAG,sBAAsB,KAAK,MAAM,gBAAgB,CAAC;AAAA,EACrE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,MAAM,wBAAwB,CACnC,UACkB;AAClB,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,gBAAgB,WAAW,yBAAyB;AAE1D,QAAM,QAAQ,aAAa,QAAQ;AAEnC,QAAM,mBAAmB,OAAO,kBAAkB;AAElD,QAAM,SAAS,mBACX,kBAAkB,aAAa,IAC/B;AAEJ,SAAO,wBAAwB,OAAO,QAAQ,KAAK;AACrD;",
+  "sourcesContent": ["import { merge } from 'lodash-es';\nimport { type PropsWithChildren, useContext } from 'react';\n\nimport { TreeMapChartConfigContext } from '../context/TreeMapConfigContext.js';\nimport { defaultTreeMapConfig } from '../defaults.js';\nimport type {\n  TreeMapConfig,\n  TreeMapContextConfig,\n} from '../types/treemap-chart.config.js';\nimport type { TreeMapHierarchicalProps } from '../types/treemap.js';\nimport { buildTreeMapChartConfig } from '../utils/build-tree-map-chart-config.js';\nimport { iterateSlots } from '../utils/iterate-slots.js';\n\nexport function deserializeConfig(\n  serializedConfig: string,\n): TreeMapContextConfig {\n  try {\n    return merge({}, defaultTreeMapConfig, JSON.parse(serializedConfig));\n  } catch {\n    return defaultTreeMapConfig;\n  }\n}\n\nexport const useTreeMapChartConfig = (\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  props: PropsWithChildren<TreeMapHierarchicalProps>,\n): TreeMapConfig => {\n  const { children } = props;\n\n  const contextConfig = useContext(TreeMapChartConfigContext);\n\n  const slots = iterateSlots(children);\n\n  const isImportedConfig = typeof contextConfig === 'string';\n\n  const config = isImportedConfig\n    ? deserializeConfig(contextConfig)\n    : contextConfig;\n\n  return buildTreeMapChartConfig(props, config, slots);\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAiC,kBAAkB;AAEnD,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAMrC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAEtB,SAAS,kBACd,kBACsB;AACtB,MAAI;AACF,WAAO,MAAM,CAAC,GAAG,sBAAsB,KAAK,MAAM,gBAAgB,CAAC;AAAA,EACrE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,MAAM,wBAAwB,CAEnC,UACkB;AAClB,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,gBAAgB,WAAW,yBAAyB;AAE1D,QAAM,QAAQ,aAAa,QAAQ;AAEnC,QAAM,mBAAmB,OAAO,kBAAkB;AAElD,QAAM,SAAS,mBACX,kBAAkB,aAAa,IAC/B;AAEJ,SAAO,wBAAwB,OAAO,QAAQ,KAAK;AACrD;",
   "names": []
 }

package/esm/charts/tree-map/hooks/useTreeMapChartHandlers.js

@@ -1,7 +1,9 @@
 import { useCallback } from "react";
+import { useTooltipReducer } from "../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useSetState } from "../store/selectors.js";
 function useTreeMapHandlers() {
   const setState = useSetState();
+  const dispatch = useTooltipReducer();
   const onLegendItemHover = useCallback(
     (item) => {
       setState((prev) => ({
@@ -13,12 +15,13 @@ function useTreeMapHandlers() {
   );
   const onLegendItemClick = useCallback(
     (items) => {
+      dispatch({ type: "RESET_TOOLTIP" })();
       setState((prev) => ({
         ...prev,
         groupsSelected: items
       }));
     },
-    [setState]
+    [setState, dispatch]
   );
   return { onLegendItemHover, onLegendItemClick };
 }