@dynatrace/strato-components 3.7.1 → 3.9.0

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/TreeMapCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapCanvas.tsx"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [\n    LABELS_DISPLAY.Nodes,\n    LABELS_DISPLAY.All,\n    LABELS_DISPLAY.ClustersAndValues,\n  ];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        withValueOnly={withValueOnly}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [\n    LABELS_DISPLAY.Nodes,\n    LABELS_DISPLAY.All,\n    LABELS_DISPLAY.ClustersAndValues,\n  ];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        withValueOnly={withValueOnly}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
   "mappings": "AA4DM,SAkBG,UAlBH;AA3DN,SAAS,eAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAEtC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAKrC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,YAAY,EAAE,QAAQ;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AACA,QAAM,EAAE,UAAU,MAAM,IAAI,QAAQ,MAAM,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;AAE3E,uBAAqB,UAAU,KAAK;AAEpC,QAAM,kBAA4B;AAAA,IAChC,eAAe;AAAA,IACf,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACA,QAAM,YAAY,gBAAgB,SAAS,aAAa;AACxD,QAAM,gBAAgB,kBAAkB,eAAe;AAEvD,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAClC,UAAM,EAAE,GAAG,EAAE,IAAI,gBAAgB,IAAI;AACrC,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,IAAI;AAC/C,UAAM,QAAQ,aAAa,IAAI;AAC/B,UAAM,UAAU,eAAe,MAAM,iBAAiB,eAAe;AAErE,UAAM,aAAa,mBAAmB,IAAI;AAC1C,UAAM,kBAAkB,gBAAgB,aAAa;AACrD,UAAM,cAAc,CAAC,cAAc;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,KAAK,KAAK;AAAA,QAChB,OAAO,KAAK,KAAK,kBAAkB;AAAA,QACnC;AAAA,QACA,WAAW;AAAA,QACX;AAAA;AAAA,MACK,KAAK,KAAK;AAAA,IACjB;AAAA,EAEJ,CAAC;AAGD,SAAO,gCAAG,mBAAQ;AACpB;",
   "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/TreeMapCluster.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapCluster.tsx"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\nimport { useMemo, Fragment } from 'react';\n\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport {\n  CLUSTER_LABEL_OFFSET_X,\n  CLUSTER_LABEL_OFFSET_Y,\n  DARK_LABEL_TEXT,\n  LIGHT_LABEL_TEXT,\n  MIN_CLUSTER_HEIGHT,\n} from '../constants.js';\nimport { TreeMapClusterBorder } from './canvas/TreeMapClusterBorder.js';\nimport { TreeMapNodeLabel } from './canvas/TreeMapNodeLabel.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getClusterPosition } from '../utils/get-cluster-position.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\n\nexport interface TreeMapClusterProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCluster = (props: TreeMapClusterProps) => {\n  const { treeMapData, highlightedItem, highlightingMap } = props;\n\n  const theme = useCurrentTheme();\n\n  const clusterNodes = useMemo(\n    () =>\n      treeMapData\n        .descendants()\n        .reverse()\n        .filter((entry) => entry.depth === 1),\n    [treeMapData],\n  );\n\n  return clusterNodes.map((clusterNode) => {\n    const { x0, y0 } = getClusterPosition(clusterNode);\n    const { width, height } = getNodeDimension(clusterNode);\n    const labelColor = theme === 'light' ? DARK_LABEL_TEXT : LIGHT_LABEL_TEXT;\n    const borderColor = getNodeColor(clusterNode);\n\n    const opacity = getNodeOpacity(\n      clusterNode,\n      highlightingMap,\n      highlightedItem,\n    );\n\n    const doesLabelFit = height >= MIN_CLUSTER_HEIGHT;\n\n    return (\n      <Fragment key={`${clusterNode.data.name}}`}>\n        <TreeMapClusterBorder\n          x={x0}\n          y={y0}\n          color={borderColor}\n          width={width}\n          height={height}\n          opacity={opacity}\n        />\n        {doesLabelFit && (\n          <TreeMapNodeLabel\n            x={x0 + width / 2}\n            y={y0 + CLUSTER_LABEL_OFFSET_Y}\n            maxWidth={width - CLUSTER_LABEL_OFFSET_X}\n            label={clusterNode.data.name}\n            color={labelColor}\n            opacity={opacity}\n          />\n        )}\n      </Fragment>\n    );\n  });\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { useMemo, Fragment } from 'react';\n\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport {\n  CLUSTER_LABEL_OFFSET_X,\n  CLUSTER_LABEL_OFFSET_Y,\n  DARK_LABEL_TEXT,\n  LIGHT_LABEL_TEXT,\n  MIN_CLUSTER_HEIGHT,\n} from '../constants.js';\nimport { TreeMapClusterBorder } from './canvas/TreeMapClusterBorder.js';\nimport { TreeMapNodeLabel } from './canvas/TreeMapNodeLabel.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getClusterPosition } from '../utils/get-cluster-position.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\n\nexport interface TreeMapClusterProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCluster = (props: TreeMapClusterProps) => {\n  const { treeMapData, highlightedItem, highlightingMap } = props;\n\n  const theme = useCurrentTheme();\n\n  const clusterNodes = useMemo(\n    () =>\n      treeMapData\n        .descendants()\n        .reverse()\n        .filter((entry) => entry.depth === 1),\n    [treeMapData],\n  );\n\n  return clusterNodes.map((clusterNode) => {\n    const { x0, y0 } = getClusterPosition(clusterNode);\n    const { width, height } = getNodeDimension(clusterNode);\n    const labelColor = theme === 'light' ? DARK_LABEL_TEXT : LIGHT_LABEL_TEXT;\n    const borderColor = getNodeColor(clusterNode);\n\n    const opacity = getNodeOpacity(\n      clusterNode,\n      highlightingMap,\n      highlightedItem,\n    );\n\n    const doesLabelFit = height >= MIN_CLUSTER_HEIGHT;\n\n    return (\n      <Fragment key={`${clusterNode.data.name}}`}>\n        <TreeMapClusterBorder\n          x={x0}\n          y={y0}\n          color={borderColor}\n          width={width}\n          height={height}\n          opacity={opacity}\n        />\n        {doesLabelFit && (\n          <TreeMapNodeLabel\n            x={x0 + width / 2}\n            y={y0 + CLUSTER_LABEL_OFFSET_Y}\n            maxWidth={width - CLUSTER_LABEL_OFFSET_X}\n            label={clusterNode.data.name}\n            color={labelColor}\n            opacity={opacity}\n          />\n        )}\n      </Fragment>\n    );\n  });\n};\n"],
   "mappings": "AA0DM,SACE,KADF;AAzDN,SAAS,SAAS,gBAAgB;AAElC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAMjC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAQxB,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,aAAa,iBAAiB,gBAAgB,IAAI;AAE1D,QAAM,QAAQ,gBAAgB;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,YACG,YAAY,EACZ,QAAQ,EACR,OAAO,CAAC,UAAU,MAAM,UAAU,CAAC;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AAEA,SAAO,aAAa,IAAI,CAAC,gBAAgB;AACvC,UAAM,EAAE,IAAI,GAAG,IAAI,mBAAmB,WAAW;AACjD,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,WAAW;AACtD,UAAM,aAAa,UAAU,UAAU,kBAAkB;AACzD,UAAM,cAAc,aAAa,WAAW;AAE5C,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe,UAAU;AAE/B,WACE,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,QAAQ;AAAA,UAChB,GAAG,KAAK;AAAA,UACR,UAAU,QAAQ;AAAA,UAClB,OAAO,YAAY,KAAK;AAAA,UACxB,OAAO;AAAA,UACP;AAAA;AAAA,MACF;AAAA,SAjBW,GAAG,YAAY,KAAK,IAAI,GAmBvC;AAAA,EAEJ,CAAC;AACH;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Treemap, hierarchy, treemapSquarify } from "@visx/hierarchy";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
 import {
   forwardRef,
   useMemo
@@ -30,8 +30,16 @@ const TreeMapInternal = forwardRef(
     const { dataForRendering } = useTreeMapAggregationData();
     const highlightingMap = useTreeMapHighlightingMap();
     const hasParentLabels = withParentLabel(labelsDisplay);
-    const root = useMemo(() => hierarchy(dataForRendering), [dataForRendering]);
+    const root = useMemo(
+      () => hierarchy(dataForRendering),
+      [dataForRendering]
+    );
     const highlightedItem = useHighlightedState();
+    const layout = treemap().tile(treemapSquarify).size([roundedWidth, roundedHeight]).padding((node) => nodePadding(node, hasParentLabels)).round(true);
+    if (hasParentLabels) {
+      layout.paddingOuter((node) => nodePaddingOuter(node)).paddingTop((node) => nodePaddingTop(node));
+    }
+    const rootNode = layout(root.sum((d) => d.children ? 0 : d.value));
     return /* @__PURE__ */ jsxs("div", { ref: forwardedRef, "aria-label": TREEMAP_CHART_ARIA_LABEL, role: "img", children: [
       children,
       /* @__PURE__ */ jsx(
@@ -40,36 +48,24 @@ const TreeMapInternal = forwardRef(
           value: {
             shapeRefs: /* @__PURE__ */ new Map()
           },
-          children: /* @__PURE__ */ jsx(Canvas, { width: roundedWidth, height: roundedHeight, children: /* @__PURE__ */ jsx(
-            Treemap,
-            {
-              root,
-              size: [roundedWidth, roundedHeight],
-              tile: treemapSquarify,
-              padding: (node) => nodePadding(node, hasParentLabels),
-              paddingTop: hasParentLabels ? (node) => nodePaddingTop(node) : void 0,
-              paddingOuter: hasParentLabels ? (node) => nodePaddingOuter(node) : void 0,
-              round: true,
-              children: (rootNode) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                hasParentLabels && /* @__PURE__ */ jsx(
-                  TreeMapCluster,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TreeMapCanvas,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                )
-              ] })
-            }
-          ) })
+          children: /* @__PURE__ */ jsxs(Canvas, { width: roundedWidth, height: roundedHeight, children: [
+            hasParentLabels && /* @__PURE__ */ jsx(
+              TreeMapCluster,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TreeMapCanvas,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            )
+          ] })
         }
       )
     ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapInternal.tsx"],
-  "sourcesContent": ["import { Treemap, hierarchy, treemapSquarify } from '@visx/hierarchy';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\n\nimport { TreeMapCanvas } from './TreeMapCanvas.js';\nimport { TreeMapCluster } from './TreeMapCluster.js';\nimport { Canvas } from '../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../core/components/canvas/CanvasContext.js';\nimport { CanvasShape } from '../../core/components/canvas/types/canvas-shape.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { TREEMAP_CHART_ARIA_LABEL } from '../constants.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapAggregationData } from '../context/TreeMapAggregationDataContext.js';\nimport { useTreeMapHighlightingMap } from '../context/TreeMapHighlightingMapContext.js';\nimport { useHighlightedState } from '../store/selectors.js';\nimport {\n  nodePadding,\n  nodePaddingOuter,\n  nodePaddingTop,\n} from '../utils/node-padding.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\nexport const TreeMapInternal = forwardRef<HTMLDivElement, PropsWithChildren>(\n  (props, forwardedRef): JSX.Element => {\n    const { children } = props;\n    const { width, height } = useGraphSize();\n    const roundedWidth = Math.floor(width);\n    const roundedHeight = Math.floor(height);\n    const labelsDisplay = useLabelsDisplay();\n    const { dataForRendering } = useTreeMapAggregationData();\n    const highlightingMap = useTreeMapHighlightingMap();\n\n    const hasParentLabels = withParentLabel(labelsDisplay);\n\n    // build hierarchy with concrete coordinates and width/size of nodes based on tree structure\n    const root = useMemo(() => hierarchy(dataForRendering), [dataForRendering]);\n\n    const highlightedItem = useHighlightedState();\n\n    return (\n      <div ref={forwardedRef} aria-label={TREEMAP_CHART_ARIA_LABEL} role=\"img\">\n        {children}\n        <CanvasContext.Provider\n          value={{\n            shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n          }}\n        >\n          <Canvas width={roundedWidth} height={roundedHeight}>\n            <Treemap\n              root={root}\n              size={[roundedWidth, roundedHeight]}\n              tile={treemapSquarify}\n              padding={(node) => nodePadding(node, hasParentLabels)}\n              paddingTop={\n                hasParentLabels ? (node) => nodePaddingTop(node) : undefined\n              }\n              paddingOuter={\n                hasParentLabels ? (node) => nodePaddingOuter(node) : undefined\n              }\n              round\n            >\n              {(rootNode) => (\n                <>\n                  {hasParentLabels && (\n                    <TreeMapCluster\n                      treeMapData={rootNode}\n                      highlightedItem={highlightedItem}\n                      highlightingMap={highlightingMap}\n                    />\n                  )}\n                  <TreeMapCanvas\n                    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n                    // @ts-ignore Strict mode transition - needs to be investigated\n                    treeMapData={rootNode}\n                    highlightedItem={highlightedItem}\n                    highlightingMap={highlightingMap}\n                  />\n                </>\n              )}\n            </Treemap>\n          </Canvas>\n        </CanvasContext.Provider>\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "AAmEgB,mBAEI,KAFJ;AAnEhB,SAAS,SAAS,WAAW,uBAAuB;AACpD;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAA8B;AACpC,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,UAAM,eAAe,KAAK,MAAM,KAAK;AACrC,UAAM,gBAAgB,KAAK,MAAM,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,EAAE,iBAAiB,IAAI,0BAA0B;AACvD,UAAM,kBAAkB,0BAA0B;AAElD,UAAM,kBAAkB,gBAAgB,aAAa;AAGrD,UAAM,OAAO,QAAQ,MAAM,UAAU,gBAAgB,GAAG,CAAC,gBAAgB,CAAC;AAE1E,UAAM,kBAAkB,oBAAoB;AAE5C,WACE,qBAAC,SAAI,KAAK,cAAc,cAAY,0BAA0B,MAAK,OAChE;AAAA;AAAA,MACD;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACC,OAAO;AAAA,YACL,WAAW,oBAAI,IAA2C;AAAA,UAC5D;AAAA,UAEA,8BAAC,UAAO,OAAO,cAAc,QAAQ,eACnC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,MAAM,CAAC,cAAc,aAAa;AAAA,cAClC,MAAM;AAAA,cACN,SAAS,CAAC,SAAS,YAAY,MAAM,eAAe;AAAA,cACpD,YACE,kBAAkB,CAAC,SAAS,eAAe,IAAI,IAAI;AAAA,cAErD,cACE,kBAAkB,CAAC,SAAS,iBAAiB,IAAI,IAAI;AAAA,cAEvD,OAAK;AAAA,cAEJ,WAAC,aACA,iCACG;AAAA,mCACC;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAa;AAAA,oBACb;AAAA,oBACA;AAAA;AAAA,gBACF;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBAGC,aAAa;AAAA,oBACb;AAAA,oBACA;AAAA;AAAA,gBACF;AAAA,iBACF;AAAA;AAAA,UAEJ,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\n\nimport { TreeMapCanvas } from './TreeMapCanvas.js';\nimport { TreeMapCluster } from './TreeMapCluster.js';\nimport { Canvas } from '../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../core/components/canvas/CanvasContext.js';\nimport { CanvasShape } from '../../core/components/canvas/types/canvas-shape.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { TREEMAP_CHART_ARIA_LABEL } from '../constants.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapAggregationData } from '../context/TreeMapAggregationDataContext.js';\nimport { useTreeMapHighlightingMap } from '../context/TreeMapHighlightingMapContext.js';\nimport { useHighlightedState } from '../store/selectors.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\nimport {\n  nodePadding,\n  nodePaddingOuter,\n  nodePaddingTop,\n} from '../utils/node-padding.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\nexport const TreeMapInternal = forwardRef<HTMLDivElement, PropsWithChildren>(\n  (props, forwardedRef): JSX.Element => {\n    const { children } = props;\n    const { width, height } = useGraphSize();\n    const roundedWidth = Math.floor(width);\n    const roundedHeight = Math.floor(height);\n    const labelsDisplay = useLabelsDisplay();\n    const { dataForRendering } = useTreeMapAggregationData();\n    const highlightingMap = useTreeMapHighlightingMap();\n\n    const hasParentLabels = withParentLabel(labelsDisplay);\n\n    // build hierarchy with concrete coordinates and width/size of nodes based on tree structure\n    const root = useMemo(\n      () => hierarchy<InternalTreeMapNode>(dataForRendering),\n      [dataForRendering],\n    );\n\n    const highlightedItem = useHighlightedState();\n\n    const layout = treemap<InternalTreeMapNode>()\n      .tile(treemapSquarify)\n      .size([roundedWidth, roundedHeight])\n      .padding((node) => nodePadding(node, hasParentLabels))\n      .round(true);\n\n    if (hasParentLabels) {\n      layout\n        .paddingOuter((node) => nodePaddingOuter(node))\n        .paddingTop((node) => nodePaddingTop(node));\n    }\n\n    const rootNode = layout(root.sum((d) => (d.children ? 0 : d.value)));\n\n    return (\n      <div ref={forwardedRef} aria-label={TREEMAP_CHART_ARIA_LABEL} role=\"img\">\n        {children}\n        <CanvasContext.Provider\n          value={{\n            shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n          }}\n        >\n          <Canvas width={roundedWidth} height={roundedHeight}>\n            {hasParentLabels && (\n              <TreeMapCluster\n                treeMapData={rootNode}\n                highlightedItem={highlightedItem}\n                highlightingMap={highlightingMap}\n              />\n            )}\n            <TreeMapCanvas\n              // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n              // @ts-ignore Strict mode transition - needs to be investigated\n              treeMapData={rootNode}\n              highlightedItem={highlightedItem}\n              highlightingMap={highlightingMap}\n            />\n          </Canvas>\n        </CanvasContext.Provider>\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "AAsEU,SAEI,KAFJ;AAtEV,SAAS,WAAW,SAAS,uBAAuB;AACpD;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AAEpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAA8B;AACpC,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,UAAM,eAAe,KAAK,MAAM,KAAK;AACrC,UAAM,gBAAgB,KAAK,MAAM,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,EAAE,iBAAiB,IAAI,0BAA0B;AACvD,UAAM,kBAAkB,0BAA0B;AAElD,UAAM,kBAAkB,gBAAgB,aAAa;AAGrD,UAAM,OAAO;AAAA,MACX,MAAM,UAA+B,gBAAgB;AAAA,MACrD,CAAC,gBAAgB;AAAA,IACnB;AAEA,UAAM,kBAAkB,oBAAoB;AAE5C,UAAM,SAAS,QAA6B,EACzC,KAAK,eAAe,EACpB,KAAK,CAAC,cAAc,aAAa,CAAC,EAClC,QAAQ,CAAC,SAAS,YAAY,MAAM,eAAe,CAAC,EACpD,MAAM,IAAI;AAEb,QAAI,iBAAiB;AACnB,aACG,aAAa,CAAC,SAAS,iBAAiB,IAAI,CAAC,EAC7C,WAAW,CAAC,SAAS,eAAe,IAAI,CAAC;AAAA,IAC9C;AAEA,UAAM,WAAW,OAAO,KAAK,IAAI,CAAC,MAAO,EAAE,WAAW,IAAI,EAAE,KAAM,CAAC;AAEnE,WACE,qBAAC,SAAI,KAAK,cAAc,cAAY,0BAA0B,MAAK,OAChE;AAAA;AAAA,MACD;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACC,OAAO;AAAA,YACL,WAAW,oBAAI,IAA2C;AAAA,UAC5D;AAAA,UAEA,+BAAC,UAAO,OAAO,cAAc,QAAQ,eAClC;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAa;AAAA,gBACb;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBAGC,aAAa;AAAA,gBACb;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
   "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-9-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-9-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-9-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/TreeMapTooltip/TreeMapOverlayTooltip.js

@@ -19,7 +19,7 @@ const TreeMapOverlayTooltip = (props) => {
       value: meta.value,
       childrenCount: meta.children
     };
-    return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: customTooltip.template(payload) });
+    return /* @__PURE__ */ jsx(OverlayTooltip, { template: customTooltip.template(payload) });
   }
   return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),

package/esm/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTreeMapCustomTooltip } from '../../hooks/useTreeMapCustomTooltip.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { TreeMapTooltipPayload } from '../../types/treemap-chart.config.js';\n\ntype SeriesData = Data['series'][number];\n\ntype TreeMapMetadata = {\n  id: string;\n  value: number;\n  path?: string[];\n  children?: string[];\n};\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n  const customTooltip = useTreeMapCustomTooltip();\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n  const meta = data.metadata as TreeMapMetadata;\n  if (customTooltip?.template) {\n    const payload: TreeMapTooltipPayload = {\n      hierarchyPath: meta.path ?? [series.name as string],\n      value: meta.value,\n      childrenCount: meta.children,\n    };\n    return <OverlayTooltip legacyTemplate={customTooltip.template(payload)} />;\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
-  "mappings": "AAyCW,cAIP,YAJO;AAzCX,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAkB3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,gBAAgB,wBAAwB;AAE9C,MAAI,eAAe,UAAU,mBAAmB,IAAI,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAC5B,QAAM,OAAO,KAAK;AAClB,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAiC;AAAA,MACrC,eAAe,KAAK,QAAQ,CAAC,OAAO,IAAc;AAAA,MAClD,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,IACtB;AACA,WAAO,oBAAC,kBAAe,gBAAgB,cAAc,SAAS,OAAO,GAAG;AAAA,EAC1E;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTreeMapCustomTooltip } from '../../hooks/useTreeMapCustomTooltip.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { TreeMapTooltipPayload } from '../../types/treemap-chart.config.js';\n\ntype SeriesData = Data['series'][number];\n\ntype TreeMapMetadata = {\n  id: string;\n  value: number;\n  path?: string[];\n  children?: string[];\n};\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n  const customTooltip = useTreeMapCustomTooltip();\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n  const meta = data.metadata as TreeMapMetadata;\n  if (customTooltip?.template) {\n    const payload: TreeMapTooltipPayload = {\n      hierarchyPath: meta.path ?? [series.name as string],\n      value: meta.value,\n      childrenCount: meta.children,\n    };\n    return <OverlayTooltip template={customTooltip.template(payload)} />;\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
+  "mappings": "AAyCW,cAIP,YAJO;AAzCX,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAkB3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,gBAAgB,wBAAwB;AAE9C,MAAI,eAAe,UAAU,mBAAmB,IAAI,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAC5B,QAAM,OAAO,KAAK;AAClB,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAiC;AAAA,MACrC,eAAe,KAAK,QAAQ,CAAC,OAAO,IAAc;AAAA,MAClD,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,IACtB;AACA,WAAO,oBAAC,kBAAe,UAAU,cAAc,SAAS,OAAO,GAAG;AAAA,EACpE;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "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;