@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/charts/sankey-chart/SankeyChartRoot.js

@@ -1,5 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { DEFAULT_TRUNCATION_MODE, DISPLAY_NAME } from "./constants.js";
+import {
+  DEFAULT_CHART_HEIGHT,
+  DEFAULT_TRUNCATION_MODE,
+  DISPLAY_NAME
+} from "./constants.js";
 import { SankeyConfigProvider } from "./providers/SankeyConfigProvider.js";
 import { SankeyDataProvider } from "./providers/SankeyDataProvider.js";
 import { SankeyFormatterProvider } from "./providers/SankeyFormatterProvider.js";
@@ -8,6 +12,7 @@ import { Nodes } from "./slots/Nodes.js";
 import { iterateSlots } from "./utils/iterate-slots.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
 import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
+import { coerceSizeValue } from "../core/utils/coerceSizeValue.js";
 const SankeyChartRoot = (props) => {
   const {
     data,
@@ -25,15 +30,18 @@ const SankeyChartRoot = (props) => {
     colorPalette = "categorical",
     formatter,
     unit,
+    columnLabels,
     children
   } = props;
   const { nodes: nodesConfig } = iterateSlots(children);
+  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);
   return /* @__PURE__ */ jsx(SankeyFormatterProvider, { formatter, unit, children: /* @__PURE__ */ jsx(
     SankeyConfigProvider,
     {
       nodesConfig,
       truncationMode,
       colorPalette,
+      columnLabels,
       children: /* @__PURE__ */ jsx(
         SankeyDataProvider,
         {
@@ -49,7 +57,7 @@ const SankeyChartRoot = (props) => {
             SankeyChartLayout,
             {
               chartWidth: width,
-              chartHeight: height,
+              chartHeight,
               showLoader: loading,
               children
             }

package/esm/charts/sankey-chart/SankeyChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/sankey-chart/SankeyChartRoot.tsx"],
-  "sourcesContent": ["import { DEFAULT_TRUNCATION_MODE, DISPLAY_NAME } from './constants.js';\nimport { SankeyConfigProvider } from './providers/SankeyConfigProvider.js';\nimport { SankeyDataProvider } from './providers/SankeyDataProvider.js';\nimport { SankeyFormatterProvider } from './providers/SankeyFormatterProvider.js';\nimport { SankeyChartLayout } from './SankeyChart.js';\nimport { Nodes } from './slots/Nodes.js';\nimport type { SankeyChartProps } from './types/sankey-props.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\n\n/**\n * @internal\n */\nexport const SankeyChartRoot = (props: SankeyChartProps) => {\n  const {\n    data,\n    sourceAccessor,\n    targetAccessor,\n    valueAccessor,\n    nodes,\n    nodeIdAccessor,\n    nodeLabelAccessor,\n    columnAccessor,\n    width,\n    height,\n    loading = false,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    colorPalette = 'categorical',\n    formatter,\n    unit,\n    children,\n  } = props;\n\n  const { nodes: nodesConfig } = iterateSlots(children);\n\n  return (\n    <SankeyFormatterProvider formatter={formatter} unit={unit}>\n    <SankeyConfigProvider\n      nodesConfig={nodesConfig}\n      truncationMode={truncationMode}\n      colorPalette={colorPalette}\n    >\n      <SankeyDataProvider\n        data={data}\n        sourceAccessor={sourceAccessor}\n        targetAccessor={targetAccessor}\n        valueAccessor={valueAccessor}\n        nodes={nodes}\n        nodeIdAccessor={nodeIdAccessor}\n        nodeLabelAccessor={nodeLabelAccessor}\n        columnAccessor={columnAccessor}\n      >\n        <SankeyChartLayout\n          chartWidth={width}\n          chartHeight={height}\n          showLoader={loading}\n        >\n          {children}\n        </SankeyChartLayout>\n      </SankeyDataProvider>\n    </SankeyConfigProvider>\n    </SankeyFormatterProvider>\n  );\n};\n\n(\n  SankeyChartRoot as typeof SankeyChartRoot & { displayName: string }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `SankeyChart` visualizes directed flows between nodes across stages.\n * @internal\n */\nexport const SankeyChart = Object.assign(SankeyChartRoot, {\n  Nodes,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n\n(SankeyChart as typeof SankeyChart & { displayName: string }).displayName =\n  'SankeyChart';\n"],
-  "mappings": "AAqDQ;AArDR,SAAS,yBAAyB,oBAAoB;AACtD,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAKxB,MAAM,kBAAkB,CAAC,UAA4B;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,OAAO,YAAY,IAAI,aAAa,QAAQ;AAEpD,SACE,oBAAC,2BAAwB,WAAsB,MAC/C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,aAAa;AAAA,cACb,YAAY;AAAA,cAEX;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAEJ;AAGE,gBACA,cAAc;AAMT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AACd,CAAC;AAEA,YAA6D,cAC5D;",
+  "sourcesContent": ["import {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n  DISPLAY_NAME,\n} from './constants.js';\nimport { SankeyConfigProvider } from './providers/SankeyConfigProvider.js';\nimport { SankeyDataProvider } from './providers/SankeyDataProvider.js';\nimport { SankeyFormatterProvider } from './providers/SankeyFormatterProvider.js';\nimport { SankeyChartLayout } from './SankeyChart.js';\nimport { Nodes } from './slots/Nodes.js';\nimport type { SankeyChartProps } from './types/sankey-props.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * @internal\n */\nexport const SankeyChartRoot = (props: SankeyChartProps) => {\n  const {\n    data,\n    sourceAccessor,\n    targetAccessor,\n    valueAccessor,\n    nodes,\n    nodeIdAccessor,\n    nodeLabelAccessor,\n    columnAccessor,\n    width,\n    height,\n    loading = false,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    colorPalette = 'categorical',\n    formatter,\n    unit,\n    columnLabels,\n    children,\n  } = props;\n\n  const { nodes: nodesConfig } = iterateSlots(children);\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n\n  return (\n    <SankeyFormatterProvider formatter={formatter} unit={unit}>\n      <SankeyConfigProvider\n        nodesConfig={nodesConfig}\n        truncationMode={truncationMode}\n        colorPalette={colorPalette}\n        columnLabels={columnLabels}\n      >\n        <SankeyDataProvider\n          data={data}\n          sourceAccessor={sourceAccessor}\n          targetAccessor={targetAccessor}\n          valueAccessor={valueAccessor}\n          nodes={nodes}\n          nodeIdAccessor={nodeIdAccessor}\n          nodeLabelAccessor={nodeLabelAccessor}\n          columnAccessor={columnAccessor}\n        >\n          <SankeyChartLayout\n            chartWidth={width}\n            chartHeight={chartHeight}\n            showLoader={loading}\n          >\n            {children}\n          </SankeyChartLayout>\n        </SankeyDataProvider>\n      </SankeyConfigProvider>\n    </SankeyFormatterProvider>\n  );\n};\n\n(\n  SankeyChartRoot as typeof SankeyChartRoot & { displayName: string }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `SankeyChart` visualizes directed flows between nodes across stages.\n * @internal\n */\nexport const SankeyChart = Object.assign(SankeyChartRoot, {\n  Nodes,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n\n(SankeyChart as typeof SankeyChart & { displayName: string }).displayName =\n  'SankeyChart';\n"],
+  "mappings": "AA6DU;AA7DV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAKzB,MAAM,kBAAkB,CAAC,UAA4B;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,OAAO,YAAY,IAAI,aAAa,QAAQ;AACpD,QAAM,cAAc,gBAAgB,UAAU,oBAAoB;AAElE,SACE,oBAAC,2BAAwB,WAAsB,MAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ;AAAA,cACA,YAAY;AAAA,cAEX;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAGE,gBACA,cAAc;AAMT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AACd,CAAC;AAEA,YAA6D,cAC5D;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyCanvas.css

@@ -1,8 +1,8 @@
-._1hfx9ue0-3-13-3 {
+._1hfx9ue0-3-14-1 {
   position: absolute;
   inset: 0;
 }
-._1hfx9ue1-3-13-3 {
+._1hfx9ue1-3-14-1 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/sankey-chart/components/SankeyCanvas.sty.js

@@ -1,6 +1,6 @@
 import "./SankeyCanvas.css";
-var canvasContainer = "_1hfx9ue0-3-13-3";
-var highlightCanvas = "_1hfx9ue1-3-13-3";
+var canvasContainer = "_1hfx9ue0-3-14-1";
+var highlightCanvas = "_1hfx9ue1-3-14-1";
 export {
   canvasContainer,
   highlightCanvas

package/esm/charts/sankey-chart/components/SankeyCanvas.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyCanvas.css.ts"],
-  "sourcesContent": ["import './SankeyCanvas.css';\nexport var canvasContainer = '_1hfx9ue0-3-13-3';\nexport var highlightCanvas = '_1hfx9ue1-3-13-3';"],
+  "sourcesContent": ["import './SankeyCanvas.css';\nexport var canvasContainer = '_1hfx9ue0-3-14-1';\nexport var highlightCanvas = '_1hfx9ue1-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyColumnHeaderItem.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  columnHeaderItem,
+  columnHeaderLabel,
+  columnHeaderPin
+} from "./SankeyColumnHeaders.sty.js";
+import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { charsFontWidth12pixelsSize400Map } from "../../core/components/text-ellipsis/chars-font-width-map.js";
+import { truncateString } from "../../core/components/text-ellipsis/truncate-string.js";
+import { getColorByContrast } from "../../core/utils/color-contrast.js";
+import { COLUMN_LABEL_HORIZONTAL_PADDING } from "../constants.js";
+function SankeyColumnHeaderItem({
+  label,
+  color,
+  truncationMode,
+  territoryLeft,
+  territoryWidth,
+  nodeCenter
+}) {
+  const pinLeft = nodeCenter - territoryLeft;
+  const availableWidth = Math.max(
+    0,
+    2 * Math.min(pinLeft, territoryWidth - pinLeft) - COLUMN_LABEL_HORIZONTAL_PADDING
+  );
+  const displayLabel = truncateString(
+    label,
+    availableWidth,
+    charsFontWidth12pixelsSize400Map,
+    truncationMode
+  );
+  const isTruncated = displayLabel !== label;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: columnHeaderItem,
+      style: { left: territoryLeft, width: territoryWidth },
+      children: /* @__PURE__ */ jsx("div", { className: columnHeaderPin, style: { left: pinLeft }, children: /* @__PURE__ */ jsx(Tooltip, { text: label, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: columnHeaderLabel,
+          style: color !== void 0 ? { background: color, color: getColorByContrast(color) } : void 0,
+          children: displayLabel
+        }
+      ) }) })
+    }
+  );
+}
+SankeyColumnHeaderItem["displayName"] = "SankeyColumnHeaderItem";
+export {
+  SankeyColumnHeaderItem
+};
+//# sourceMappingURL=SankeyColumnHeaderItem.js.map

package/esm/charts/sankey-chart/components/SankeyColumnHeaderItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyColumnHeaderItem.tsx"],
+  "sourcesContent": ["import {\n  columnHeaderItem,\n  columnHeaderLabel,\n  columnHeaderPin,\n} from './SankeyColumnHeaders.sty.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../core/components/text-ellipsis/truncate-string.js';\nimport { getColorByContrast } from '../../core/utils/color-contrast.js';\nimport { COLUMN_LABEL_HORIZONTAL_PADDING } from '../constants.js';\n\ninterface SankeyColumnHeaderItemProps {\n  label: string;\n  color: string | undefined;\n  truncationMode: TruncationMode;\n  /** Left edge of the territory reserved for this column header, relative to the chart. */\n  territoryLeft: number;\n  /** Width of the territory reserved for this column header. */\n  territoryWidth: number;\n  /** Horizontal position of the column's nodes, relative to the chart. */\n  nodeCenter: number;\n}\n\n/**\n * @internal\n */\nexport function SankeyColumnHeaderItem({\n  label,\n  color,\n  truncationMode,\n  territoryLeft,\n  territoryWidth,\n  nodeCenter,\n}: Readonly<SankeyColumnHeaderItemProps>) {\n  const pinLeft = nodeCenter - territoryLeft;\n  const availableWidth = Math.max(\n    0,\n    2 * Math.min(pinLeft, territoryWidth - pinLeft) -\n      COLUMN_LABEL_HORIZONTAL_PADDING,\n  );\n  const displayLabel = truncateString(\n    label,\n    availableWidth,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n  const isTruncated = displayLabel !== label;\n\n  return (\n    <div\n      className={columnHeaderItem}\n      style={{ left: territoryLeft, width: territoryWidth }}\n    >\n      <div className={columnHeaderPin} style={{ left: pinLeft }}>\n        <Tooltip text={label} disabled={!isTruncated}>\n          <div\n            className={columnHeaderLabel}\n            style={\n              color !== undefined\n                ? { background: color, color: getColorByContrast(color) }\n                : undefined\n            }\n          >\n            {displayLabel}\n          </div>\n        </Tooltip>\n      </div>\n    </div>\n  );\n}\n\nSankeyColumnHeaderItem['displayName'] = 'SankeyColumnHeaderItem';\n"],
+  "mappings": "AAwDU;AAxDV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uCAAuC;AAiBzC,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,UAAU,aAAa;AAC7B,QAAM,iBAAiB,KAAK;AAAA,IAC1B;AAAA,IACA,IAAI,KAAK,IAAI,SAAS,iBAAiB,OAAO,IAC5C;AAAA,EACJ;AACA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,cAAc,iBAAiB;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,MAAM,eAAe,OAAO,eAAe;AAAA,MAEpD,8BAAC,SAAI,WAAW,iBAAiB,OAAO,EAAE,MAAM,QAAQ,GACtD,8BAAC,WAAQ,MAAM,OAAO,UAAU,CAAC,aAC/B;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,OACE,UAAU,SACN,EAAE,YAAY,OAAO,OAAO,mBAAmB,KAAK,EAAE,IACtD;AAAA,UAGL;AAAA;AAAA,MACH,GACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyColumnHeaders.css

@@ -0,0 +1,35 @@
+._qd3bxc0-3-14-1 {
+  position: relative;
+  height: 40px;
+  flex-shrink: 0;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+._qd3bxc1-3-14-1 {
+  position: absolute;
+  top: var(--dt-spacings-size-8, 8px);
+  height: var(--dt-spacings-size-24, 24px);
+  overflow: hidden;
+  pointer-events: auto;
+}
+._qd3bxc2-3-14-1 {
+  position: absolute;
+  transform: translateX(-50%);
+}
+._qd3bxc3-3-14-1 {
+  height: var(--dt-spacings-size-24, 24px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  padding-left: var(--dt-spacings-size-4, 4px);
+  padding-right: var(--dt-spacings-size-4, 4px);
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}

package/esm/charts/sankey-chart/components/SankeyColumnHeaders.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { SankeyColumnHeaderItem } from "./SankeyColumnHeaderItem.js";
+import { columnHeadersBand } from "./SankeyColumnHeaders.sty.js";
+import { SankeyColumnLabelsContext } from "../context/SankeyColumnLabels.context.js";
+import { SankeyTruncationModeContext } from "../context/SankeyTruncationMode.context.js";
+import { useNodeColors } from "../hooks/use-node-colors.js";
+import { useSankeyLayout } from "../hooks/use-sankey-layout.js";
+import {
+  buildDepthToXRangeMap,
+  getXRangeForDepth
+} from "../utils/get-column-x-range.js";
+function SankeyColumnHeaders({
+  leftOffset,
+  outerWidth
+}) {
+  const columnLabels = useContext(SankeyColumnLabelsContext);
+  const truncationMode = useContext(SankeyTruncationModeContext);
+  const layout = useSankeyLayout();
+  const nodeColors = useNodeColors();
+  const depthToXRange = buildDepthToXRangeMap(layout.nodes);
+  const sortedDepths = [...depthToXRange.keys()].sort((a, b) => a - b);
+  const depthToColor = /* @__PURE__ */ new Map();
+  for (const node of layout.nodes) {
+    if (node.depth === void 0) {
+      continue;
+    }
+    if (depthToColor.has(node.depth)) {
+      continue;
+    }
+    const color = nodeColors.get(node.id);
+    if (color !== void 0) {
+      depthToColor.set(node.depth, color);
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: columnHeadersBand, children: Object.entries(columnLabels ?? {}).map(([depthStr, label]) => {
+    const depth = Number(depthStr);
+    const range = getXRangeForDepth(depth, depthToXRange, sortedDepths);
+    if (range === void 0) {
+      return null;
+    }
+    const prevDepth = sortedDepths.filter((d) => d < depth).at(-1);
+    const nextDepth = sortedDepths.find((d) => d > depth);
+    const prevRange = prevDepth !== void 0 ? depthToXRange.get(prevDepth) : void 0;
+    const nextRange = nextDepth !== void 0 ? depthToXRange.get(nextDepth) : void 0;
+    const territoryLeft = prevRange !== void 0 ? leftOffset + (prevRange.x1 + range.x0) / 2 : 0;
+    const territoryRight = nextRange !== void 0 ? leftOffset + (range.x1 + nextRange.x0) / 2 : outerWidth;
+    const territoryWidth = territoryRight - territoryLeft;
+    if (territoryWidth <= 0) {
+      return null;
+    }
+    const nodeCenter = leftOffset + (range.x0 + range.x1) / 2;
+    return /* @__PURE__ */ jsx(
+      SankeyColumnHeaderItem,
+      {
+        label,
+        color: depthToColor.get(depth),
+        truncationMode,
+        territoryLeft,
+        territoryWidth,
+        nodeCenter
+      },
+      depthStr
+    );
+  }) });
+}
+SankeyColumnHeaders["displayName"] = "SankeyColumnHeaders";
+export {
+  SankeyColumnHeaders
+};
+//# sourceMappingURL=SankeyColumnHeaders.js.map

package/esm/charts/sankey-chart/components/SankeyColumnHeaders.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyColumnHeaders.tsx"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { SankeyColumnHeaderItem } from './SankeyColumnHeaderItem.js';\nimport { columnHeadersBand } from './SankeyColumnHeaders.sty.js';\nimport { SankeyColumnLabelsContext } from '../context/SankeyColumnLabels.context.js';\nimport { SankeyTruncationModeContext } from '../context/SankeyTruncationMode.context.js';\nimport { useNodeColors } from '../hooks/use-node-colors.js';\nimport { useSankeyLayout } from '../hooks/use-sankey-layout.js';\nimport {\n  buildDepthToXRangeMap,\n  getXRangeForDepth,\n} from '../utils/get-column-x-range.js';\n\ninterface SankeyColumnHeadersProps {\n  leftOffset: number;\n  outerWidth: number;\n}\n\nexport function SankeyColumnHeaders({\n  leftOffset,\n  outerWidth,\n}: Readonly<SankeyColumnHeadersProps>) {\n  const columnLabels = useContext(SankeyColumnLabelsContext);\n  const truncationMode = useContext(SankeyTruncationModeContext);\n  const layout = useSankeyLayout();\n  const nodeColors = useNodeColors();\n\n  const depthToXRange = buildDepthToXRangeMap(layout.nodes);\n  const sortedDepths = [...depthToXRange.keys()].sort((a, b) => a - b);\n\n  const depthToColor = new Map<number, string>();\n  for (const node of layout.nodes) {\n    if (node.depth === undefined) {\n      continue;\n    }\n    if (depthToColor.has(node.depth)) {\n      continue;\n    }\n    const color = nodeColors.get(node.id);\n    if (color !== undefined) {\n      depthToColor.set(node.depth, color);\n    }\n  }\n\n  return (\n    <div className={columnHeadersBand}>\n      {Object.entries(columnLabels ?? {}).map(([depthStr, label]) => {\n        const depth = Number(depthStr);\n        const range = getXRangeForDepth(depth, depthToXRange, sortedDepths);\n\n        if (range === undefined) {\n          return null;\n        }\n\n        const prevDepth = sortedDepths.filter((d) => d < depth).at(-1);\n        const nextDepth = sortedDepths.find((d) => d > depth);\n        const prevRange =\n          prevDepth !== undefined ? depthToXRange.get(prevDepth) : undefined;\n        const nextRange =\n          nextDepth !== undefined ? depthToXRange.get(nextDepth) : undefined;\n\n        const territoryLeft =\n          prevRange !== undefined\n            ? leftOffset + (prevRange.x1 + range.x0) / 2\n            : 0;\n        const territoryRight =\n          nextRange !== undefined\n            ? leftOffset + (range.x1 + nextRange.x0) / 2\n            : outerWidth;\n        const territoryWidth = territoryRight - territoryLeft;\n\n        if (territoryWidth <= 0) {\n          return null;\n        }\n\n        const nodeCenter = leftOffset + (range.x0 + range.x1) / 2;\n\n        return (\n          <SankeyColumnHeaderItem\n            key={depthStr}\n            label={label}\n            color={depthToColor.get(depth)}\n            truncationMode={truncationMode}\n            territoryLeft={territoryLeft}\n            territoryWidth={territoryWidth}\n            nodeCenter={nodeCenter}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nSankeyColumnHeaders['displayName'] = 'SankeyColumnHeaders';\n"],
+  "mappings": "AA8EU;AA9EV,SAAS,kBAAkB;AAE3B,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,iCAAiC;AAC1C,SAAS,mCAAmC;AAC5C,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,eAAe,WAAW,yBAAyB;AACzD,QAAM,iBAAiB,WAAW,2BAA2B;AAC7D,QAAM,SAAS,gBAAgB;AAC/B,QAAM,aAAa,cAAc;AAEjC,QAAM,gBAAgB,sBAAsB,OAAO,KAAK;AACxD,QAAM,eAAe,CAAC,GAAG,cAAc,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAEnE,QAAM,eAAe,oBAAI,IAAoB;AAC7C,aAAW,QAAQ,OAAO,OAAO;AAC/B,QAAI,KAAK,UAAU,QAAW;AAC5B;AAAA,IACF;AACA,QAAI,aAAa,IAAI,KAAK,KAAK,GAAG;AAChC;AAAA,IACF;AACA,UAAM,QAAQ,WAAW,IAAI,KAAK,EAAE;AACpC,QAAI,UAAU,QAAW;AACvB,mBAAa,IAAI,KAAK,OAAO,KAAK;AAAA,IACpC;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,mBACb,iBAAO,QAAQ,gBAAgB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,KAAK,MAAM;AAC7D,UAAM,QAAQ,OAAO,QAAQ;AAC7B,UAAM,QAAQ,kBAAkB,OAAO,eAAe,YAAY;AAElE,QAAI,UAAU,QAAW;AACvB,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,aAAa,OAAO,CAAC,MAAM,IAAI,KAAK,EAAE,GAAG,EAAE;AAC7D,UAAM,YAAY,aAAa,KAAK,CAAC,MAAM,IAAI,KAAK;AACpD,UAAM,YACJ,cAAc,SAAY,cAAc,IAAI,SAAS,IAAI;AAC3D,UAAM,YACJ,cAAc,SAAY,cAAc,IAAI,SAAS,IAAI;AAE3D,UAAM,gBACJ,cAAc,SACV,cAAc,UAAU,KAAK,MAAM,MAAM,IACzC;AACN,UAAM,iBACJ,cAAc,SACV,cAAc,MAAM,KAAK,UAAU,MAAM,IACzC;AACN,UAAM,iBAAiB,iBAAiB;AAExC,QAAI,kBAAkB,GAAG;AACvB,aAAO;AAAA,IACT;AAEA,UAAM,aAAa,cAAc,MAAM,KAAK,MAAM,MAAM;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,aAAa,IAAI,KAAK;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAOP;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyColumnHeaders.sty.js

@@ -0,0 +1,12 @@
+import "./SankeyColumnHeaders.css";
+var columnHeaderItem = "_qd3bxc1-3-14-1";
+var columnHeaderLabel = "_qd3bxc3-3-14-1";
+var columnHeaderPin = "_qd3bxc2-3-14-1";
+var columnHeadersBand = "_qd3bxc0-3-14-1";
+export {
+  columnHeaderItem,
+  columnHeaderLabel,
+  columnHeaderPin,
+  columnHeadersBand
+};
+//# sourceMappingURL=SankeyColumnHeaders.sty.js.map

package/esm/charts/sankey-chart/components/SankeyColumnHeaders.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyColumnHeaders.css.ts"],
+  "sourcesContent": ["import './SankeyColumnHeaders.css';\nexport var columnHeaderItem = '_qd3bxc1-3-14-1';\nexport var columnHeaderLabel = '_qd3bxc3-3-14-1';\nexport var columnHeaderPin = '_qd3bxc2-3-14-1';\nexport var columnHeadersBand = '_qd3bxc0-3-14-1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,oBAAoB;AACxB,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyGraphArea.js

@@ -1,27 +1,35 @@
 import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { graphAreaWrapper } from "../SankeyChart.sty.js";
 import { SankeyGraphAreaContent } from "./SankeyGraphAreaContent.js";
 import { useResizeObserver } from "../../../core/hooks/useResizeObserver.js";
 import { useGraphSize } from "../../core/components/chart-layout/hooks/useGraphSize.js";
 import { OverlayProvider } from "../../core/components/overlay-tooltip/contexts/OverlayContext.js";
-import { MAX_SIDE_LABEL_WIDTH_RATIO } from "../constants.js";
+import {
+  COLUMN_HEADER_HEIGHT,
+  MAX_SIDE_LABEL_WIDTH_RATIO
+} from "../constants.js";
+import { SankeyColumnLabelsContext } from "../context/SankeyColumnLabels.context.js";
 import { useNodeColors } from "../hooks/use-node-colors.js";
 import { SankeyLayoutProvider } from "../providers/SankeyLayoutProvider.js";
 import { SankeyStoreProvider } from "../providers/SankeyStoreProvider.js";
 function SankeyGraphArea() {
   const { height } = useGraphSize();
   const nodeColors = useNodeColors();
+  const columnLabels = useContext(SankeyColumnLabelsContext);
   const { ref: outerRef, width: outerWidth } = useResizeObserver();
   const { ref: canvasRef, width: measuredWidth } = useResizeObserver();
   const canvasWidth = measuredWidth ?? 0;
   const maxSideLabelWidth = outerWidth !== void 0 && outerWidth > 0 ? Math.floor(outerWidth * MAX_SIDE_LABEL_WIDTH_RATIO) : void 0;
-  return /* @__PURE__ */ jsx("div", { className: graphAreaWrapper, children: /* @__PURE__ */ jsx(SankeyStoreProvider, { children: /* @__PURE__ */ jsx(SankeyLayoutProvider, { width: canvasWidth, height, children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(
+  const layoutHeight = columnLabels ? Math.max(0, height - COLUMN_HEADER_HEIGHT) : height;
+  return /* @__PURE__ */ jsx("div", { className: graphAreaWrapper, children: /* @__PURE__ */ jsx(SankeyStoreProvider, { children: /* @__PURE__ */ jsx(SankeyLayoutProvider, { width: canvasWidth, height: layoutHeight, children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(
     SankeyGraphAreaContent,
     {
       outerRef,
       canvasRef,
       canvasWidth,
-      height,
+      outerWidth: outerWidth ?? 0,
+      height: layoutHeight,
       maxSideLabelWidth,
       nodeColors
     }

package/esm/charts/sankey-chart/components/SankeyGraphArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyGraphArea.tsx"],
-  "sourcesContent": ["import { graphAreaWrapper } from '../SankeyChart.sty.js';\nimport { SankeyGraphAreaContent } from './SankeyGraphAreaContent.js';\nimport { useResizeObserver } from '../../../core/hooks/useResizeObserver.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { OverlayProvider } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { MAX_SIDE_LABEL_WIDTH_RATIO } from '../constants.js';\nimport { useNodeColors } from '../hooks/use-node-colors.js';\nimport { SankeyLayoutProvider } from '../providers/SankeyLayoutProvider.js';\nimport { SankeyStoreProvider } from '../providers/SankeyStoreProvider.js';\n\nexport function SankeyGraphArea() {\n  const { height } = useGraphSize();\n  const nodeColors = useNodeColors();\n\n  const { ref: outerRef, width: outerWidth } =\n    useResizeObserver<HTMLDivElement>();\n  const { ref: canvasRef, width: measuredWidth } =\n    useResizeObserver<HTMLDivElement>();\n  const canvasWidth = measuredWidth ?? 0;\n\n  const maxSideLabelWidth =\n    outerWidth !== undefined && outerWidth > 0\n      ? Math.floor(outerWidth * MAX_SIDE_LABEL_WIDTH_RATIO)\n      : undefined;\n\n  return (\n    <div className={graphAreaWrapper}>\n      <SankeyStoreProvider>\n        <SankeyLayoutProvider width={canvasWidth} height={height}>\n          <OverlayProvider>\n            <SankeyGraphAreaContent\n              outerRef={outerRef}\n              canvasRef={canvasRef}\n              canvasWidth={canvasWidth}\n              height={height}\n              maxSideLabelWidth={maxSideLabelWidth}\n              nodeColors={nodeColors}\n            />\n          </OverlayProvider>\n        </SankeyLayoutProvider>\n      </SankeyStoreProvider>\n    </div>\n  );\n}\n\nSankeyGraphArea['displayName'] = 'SankeyGraphArea';\n"],
-  "mappings": "AA8BY;AA9BZ,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,SAAS,kBAAkB;AAChC,QAAM,EAAE,OAAO,IAAI,aAAa;AAChC,QAAM,aAAa,cAAc;AAEjC,QAAM,EAAE,KAAK,UAAU,OAAO,WAAW,IACvC,kBAAkC;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,cAAc,IAC3C,kBAAkC;AACpC,QAAM,cAAc,iBAAiB;AAErC,QAAM,oBACJ,eAAe,UAAa,aAAa,IACrC,KAAK,MAAM,aAAa,0BAA0B,IAClD;AAEN,SACE,oBAAC,SAAI,WAAW,kBACd,8BAAC,uBACC,8BAAC,wBAAqB,OAAO,aAAa,QACxC,8BAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF,GACF,GACF,GACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { graphAreaWrapper } from '../SankeyChart.sty.js';\nimport { SankeyGraphAreaContent } from './SankeyGraphAreaContent.js';\nimport { useResizeObserver } from '../../../core/hooks/useResizeObserver.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { OverlayProvider } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport {\n  COLUMN_HEADER_HEIGHT,\n  MAX_SIDE_LABEL_WIDTH_RATIO,\n} from '../constants.js';\nimport { SankeyColumnLabelsContext } from '../context/SankeyColumnLabels.context.js';\nimport { useNodeColors } from '../hooks/use-node-colors.js';\nimport { SankeyLayoutProvider } from '../providers/SankeyLayoutProvider.js';\nimport { SankeyStoreProvider } from '../providers/SankeyStoreProvider.js';\n\nexport function SankeyGraphArea() {\n  const { height } = useGraphSize();\n  const nodeColors = useNodeColors();\n  const columnLabels = useContext(SankeyColumnLabelsContext);\n\n  const { ref: outerRef, width: outerWidth } =\n    useResizeObserver<HTMLDivElement>();\n  const { ref: canvasRef, width: measuredWidth } =\n    useResizeObserver<HTMLDivElement>();\n  const canvasWidth = measuredWidth ?? 0;\n\n  const maxSideLabelWidth =\n    outerWidth !== undefined && outerWidth > 0\n      ? Math.floor(outerWidth * MAX_SIDE_LABEL_WIDTH_RATIO)\n      : undefined;\n\n  const layoutHeight = columnLabels\n    ? Math.max(0, height - COLUMN_HEADER_HEIGHT)\n    : height;\n\n  return (\n    <div className={graphAreaWrapper}>\n      <SankeyStoreProvider>\n        <SankeyLayoutProvider width={canvasWidth} height={layoutHeight}>\n          <OverlayProvider>\n            <SankeyGraphAreaContent\n              outerRef={outerRef}\n              canvasRef={canvasRef}\n              canvasWidth={canvasWidth}\n              outerWidth={outerWidth ?? 0}\n              height={layoutHeight}\n              maxSideLabelWidth={maxSideLabelWidth}\n              nodeColors={nodeColors}\n            />\n          </OverlayProvider>\n        </SankeyLayoutProvider>\n      </SankeyStoreProvider>\n    </div>\n  );\n}\n\nSankeyGraphArea['displayName'] = 'SankeyGraphArea';\n"],
+  "mappings": "AAyCY;AAzCZ,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,SAAS,kBAAkB;AAChC,QAAM,EAAE,OAAO,IAAI,aAAa;AAChC,QAAM,aAAa,cAAc;AACjC,QAAM,eAAe,WAAW,yBAAyB;AAEzD,QAAM,EAAE,KAAK,UAAU,OAAO,WAAW,IACvC,kBAAkC;AACpC,QAAM,EAAE,KAAK,WAAW,OAAO,cAAc,IAC3C,kBAAkC;AACpC,QAAM,cAAc,iBAAiB;AAErC,QAAM,oBACJ,eAAe,UAAa,aAAa,IACrC,KAAK,MAAM,aAAa,0BAA0B,IAClD;AAEN,QAAM,eAAe,eACjB,KAAK,IAAI,GAAG,SAAS,oBAAoB,IACzC;AAEJ,SACE,oBAAC,SAAI,WAAW,kBACd,8BAAC,uBACC,8BAAC,wBAAqB,OAAO,aAAa,QAAQ,cAChD,8BAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,QAAQ;AAAA,MACR;AAAA,MACA;AAAA;AAAA,EACF,GACF,GACF,GACF,GACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyGraphAreaContent.js

@@ -1,9 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { graphAreaCell, graphAreaContainer } from "../SankeyChart.sty.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import {
+  canvasAreaCell,
+  canvasZone,
+  graphAreaCell,
+  graphAreaContainer
+} from "../SankeyChart.sty.js";
 import { SankeyCanvas } from "./SankeyCanvas.js";
+import { SankeyColumnHeaders } from "./SankeyColumnHeaders.js";
 import { SankeyLabelOverlay } from "./SankeyLabelOverlay.js";
 import { SankeyOverlay } from "./SankeyOverlay.js";
+import { useResizeObserver } from "../../../core/hooks/useResizeObserver.js";
+import { SankeyColumnLabelsContext } from "../context/SankeyColumnLabels.context.js";
 import { SankeyHighlightContext } from "../context/SankeyHighlight.context.js";
 import { useSankeyLayout } from "../hooks/use-sankey-layout.js";
 import {
@@ -15,6 +23,7 @@ function SankeyGraphAreaContent({
   outerRef,
   canvasRef,
   canvasWidth,
+  outerWidth,
   height,
   maxSideLabelWidth,
   nodeColors
@@ -22,41 +31,52 @@ function SankeyGraphAreaContent({
   const layout = useSankeyLayout();
   const selected = useSankeySelectedShape();
   const hovered = useSankeyHoveredShape();
+  const columnLabels = useContext(SankeyColumnLabelsContext);
+  const { ref: leftCellRef, width: leftCellWidth } = useResizeObserver();
   const highlight = useMemo(
     () => getActiveConnectedSet(layout, selected, hovered),
     [layout, selected, hovered]
   );
-  return /* @__PURE__ */ jsx(SankeyHighlightContext.Provider, { value: highlight, children: /* @__PURE__ */ jsxs("div", { ref: outerRef, className: graphAreaContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: graphAreaCell, children: /* @__PURE__ */ jsx(
-      SankeyLabelOverlay,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    columnLabels && /* @__PURE__ */ jsx(
+      SankeyColumnHeaders,
       {
-        zone: "left",
-        layout,
-        maxWidth: maxSideLabelWidth
+        leftOffset: leftCellWidth ?? 0,
+        outerWidth
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { ref: canvasRef, className: graphAreaCell, children: [
-      /* @__PURE__ */ jsx(
-        SankeyCanvas,
+    ),
+    /* @__PURE__ */ jsx(SankeyHighlightContext.Provider, { value: highlight, children: /* @__PURE__ */ jsxs("div", { ref: outerRef, className: graphAreaContainer, children: [
+      /* @__PURE__ */ jsx("div", { ref: leftCellRef, className: graphAreaCell, children: /* @__PURE__ */ jsx(
+        SankeyLabelOverlay,
         {
-          width: canvasWidth,
-          height,
+          zone: "left",
           layout,
-          nodeColors
+          maxWidth: maxSideLabelWidth
         }
-      ),
-      /* @__PURE__ */ jsx(SankeyLabelOverlay, { zone: "inside", layout }),
-      /* @__PURE__ */ jsx(SankeyOverlay, {})
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: graphAreaCell, children: /* @__PURE__ */ jsx(
-      SankeyLabelOverlay,
-      {
-        zone: "right",
-        layout,
-        maxWidth: maxSideLabelWidth
-      }
-    ) })
-  ] }) });
+      ) }),
+      /* @__PURE__ */ jsx("div", { ref: canvasRef, className: canvasAreaCell, children: /* @__PURE__ */ jsxs("div", { className: canvasZone, children: [
+        /* @__PURE__ */ jsx(
+          SankeyCanvas,
+          {
+            width: canvasWidth,
+            height,
+            layout,
+            nodeColors
+          }
+        ),
+        /* @__PURE__ */ jsx(SankeyLabelOverlay, { zone: "inside", layout }),
+        /* @__PURE__ */ jsx(SankeyOverlay, {})
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: graphAreaCell, children: /* @__PURE__ */ jsx(
+        SankeyLabelOverlay,
+        {
+          zone: "right",
+          layout,
+          maxWidth: maxSideLabelWidth
+        }
+      ) })
+    ] }) })
+  ] });
 }
 SankeyGraphAreaContent["displayName"] = "SankeyGraphAreaContent";
 export {

package/esm/charts/sankey-chart/components/SankeyGraphAreaContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyGraphAreaContent.tsx"],
-  "sourcesContent": ["import { type RefCallback, useMemo } from 'react';\n\nimport { graphAreaCell, graphAreaContainer } from '../SankeyChart.sty.js';\nimport { SankeyCanvas } from './SankeyCanvas.js';\nimport { SankeyLabelOverlay } from './SankeyLabelOverlay.js';\nimport { SankeyOverlay } from './SankeyOverlay.js';\nimport { SankeyHighlightContext } from '../context/SankeyHighlight.context.js';\nimport { useSankeyLayout } from '../hooks/use-sankey-layout.js';\nimport {\n  useSankeyHoveredShape,\n  useSankeySelectedShape,\n} from '../store/selectors.js';\nimport { getActiveConnectedSet } from '../utils/get-active-connected-set.js';\n\ninterface SankeyGraphAreaContentProps {\n  outerRef: RefCallback<HTMLDivElement | null>;\n  canvasRef: RefCallback<HTMLDivElement | null>;\n  canvasWidth: number;\n  height: number;\n  maxSideLabelWidth: number | undefined;\n  nodeColors: Map<string, string>;\n}\n\nexport function SankeyGraphAreaContent({\n  outerRef,\n  canvasRef,\n  canvasWidth,\n  height,\n  maxSideLabelWidth,\n  nodeColors,\n}: Readonly<SankeyGraphAreaContentProps>) {\n  const layout = useSankeyLayout();\n  const selected = useSankeySelectedShape();\n  const hovered = useSankeyHoveredShape();\n\n  const highlight = useMemo(\n    () => getActiveConnectedSet(layout, selected, hovered),\n    [layout, selected, hovered],\n  );\n\n  return (\n    <SankeyHighlightContext.Provider value={highlight}>\n      <div ref={outerRef} className={graphAreaContainer}>\n        <div className={graphAreaCell}>\n          <SankeyLabelOverlay\n            zone=\"left\"\n            layout={layout}\n            maxWidth={maxSideLabelWidth}\n          />\n        </div>\n        <div ref={canvasRef} className={graphAreaCell}>\n          <SankeyCanvas\n            width={canvasWidth}\n            height={height}\n            layout={layout}\n            nodeColors={nodeColors}\n          />\n          <SankeyLabelOverlay zone=\"inside\" layout={layout} />\n          <SankeyOverlay />\n        </div>\n        <div className={graphAreaCell}>\n          <SankeyLabelOverlay\n            zone=\"right\"\n            layout={layout}\n            maxWidth={maxSideLabelWidth}\n          />\n        </div>\n      </div>\n    </SankeyHighlightContext.Provider>\n  );\n}\n\nSankeyGraphAreaContent['displayName'] = 'SankeyGraphAreaContent';\n"],
-  "mappings": "AA4CU,cAMF,YANE;AA5CV,SAA2B,eAAe;AAE1C,SAAS,eAAe,0BAA0B;AAClD,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AAW/B,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,SAAS,gBAAgB;AAC/B,QAAM,WAAW,uBAAuB;AACxC,QAAM,UAAU,sBAAsB;AAEtC,QAAM,YAAY;AAAA,IAChB,MAAM,sBAAsB,QAAQ,UAAU,OAAO;AAAA,IACrD,CAAC,QAAQ,UAAU,OAAO;AAAA,EAC5B;AAEA,SACE,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,WACtC,+BAAC,SAAI,KAAK,UAAU,WAAW,oBAC7B;AAAA,wBAAC,SAAI,WAAW,eACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA;AAAA,IACZ,GACF;AAAA,IACA,qBAAC,SAAI,KAAK,WAAW,WAAW,eAC9B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,sBAAmB,MAAK,UAAS,QAAgB;AAAA,MAClD,oBAAC,iBAAc;AAAA,OACjB;AAAA,IACA,oBAAC,SAAI,WAAW,eACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA;AAAA,IACZ,GACF;AAAA,KACF,GACF;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import { type RefCallback, useContext, useMemo } from 'react';\n\nimport {\n  canvasAreaCell,\n  canvasZone,\n  graphAreaCell,\n  graphAreaContainer,\n} from '../SankeyChart.sty.js';\nimport { SankeyCanvas } from './SankeyCanvas.js';\nimport { SankeyColumnHeaders } from './SankeyColumnHeaders.js';\nimport { SankeyLabelOverlay } from './SankeyLabelOverlay.js';\nimport { SankeyOverlay } from './SankeyOverlay.js';\nimport { useResizeObserver } from '../../../core/hooks/useResizeObserver.js';\nimport { SankeyColumnLabelsContext } from '../context/SankeyColumnLabels.context.js';\nimport { SankeyHighlightContext } from '../context/SankeyHighlight.context.js';\nimport { useSankeyLayout } from '../hooks/use-sankey-layout.js';\nimport {\n  useSankeyHoveredShape,\n  useSankeySelectedShape,\n} from '../store/selectors.js';\nimport { getActiveConnectedSet } from '../utils/get-active-connected-set.js';\n\ninterface SankeyGraphAreaContentProps {\n  outerRef: RefCallback<HTMLDivElement | null>;\n  canvasRef: RefCallback<HTMLDivElement | null>;\n  canvasWidth: number;\n  outerWidth: number;\n  height: number;\n  maxSideLabelWidth: number | undefined;\n  nodeColors: Map<string, string>;\n}\n\nexport function SankeyGraphAreaContent({\n  outerRef,\n  canvasRef,\n  canvasWidth,\n  outerWidth,\n  height,\n  maxSideLabelWidth,\n  nodeColors,\n}: Readonly<SankeyGraphAreaContentProps>) {\n  const layout = useSankeyLayout();\n  const selected = useSankeySelectedShape();\n  const hovered = useSankeyHoveredShape();\n  const columnLabels = useContext(SankeyColumnLabelsContext);\n  const { ref: leftCellRef, width: leftCellWidth } =\n    useResizeObserver<HTMLDivElement>();\n\n  const highlight = useMemo(\n    () => getActiveConnectedSet(layout, selected, hovered),\n    [layout, selected, hovered],\n  );\n\n  return (\n    <>\n      {columnLabels && (\n        <SankeyColumnHeaders\n          leftOffset={leftCellWidth ?? 0}\n          outerWidth={outerWidth}\n        />\n      )}\n      <SankeyHighlightContext.Provider value={highlight}>\n        <div ref={outerRef} className={graphAreaContainer}>\n          <div ref={leftCellRef} className={graphAreaCell}>\n            <SankeyLabelOverlay\n              zone=\"left\"\n              layout={layout}\n              maxWidth={maxSideLabelWidth}\n            />\n          </div>\n          <div ref={canvasRef} className={canvasAreaCell}>\n            <div className={canvasZone}>\n              <SankeyCanvas\n                width={canvasWidth}\n                height={height}\n                layout={layout}\n                nodeColors={nodeColors}\n              />\n              <SankeyLabelOverlay zone=\"inside\" layout={layout} />\n              <SankeyOverlay />\n            </div>\n          </div>\n          <div className={graphAreaCell}>\n            <SankeyLabelOverlay\n              zone=\"right\"\n              layout={layout}\n              maxWidth={maxSideLabelWidth}\n            />\n          </div>\n        </div>\n      </SankeyHighlightContext.Provider>\n    </>\n  );\n}\n\nSankeyGraphAreaContent['displayName'] = 'SankeyGraphAreaContent';\n"],
+  "mappings": "AAsDI,mBAEI,KAeI,YAjBR;AAtDJ,SAA2B,YAAY,eAAe;AAEtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AAY/B,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,SAAS,gBAAgB;AAC/B,QAAM,WAAW,uBAAuB;AACxC,QAAM,UAAU,sBAAsB;AACtC,QAAM,eAAe,WAAW,yBAAyB;AACzD,QAAM,EAAE,KAAK,aAAa,OAAO,cAAc,IAC7C,kBAAkC;AAEpC,QAAM,YAAY;AAAA,IAChB,MAAM,sBAAsB,QAAQ,UAAU,OAAO;AAAA,IACrD,CAAC,QAAQ,UAAU,OAAO;AAAA,EAC5B;AAEA,SACE,iCACG;AAAA,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,iBAAiB;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA,IAEF,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,WACtC,+BAAC,SAAI,KAAK,UAAU,WAAW,oBAC7B;AAAA,0BAAC,SAAI,KAAK,aAAa,WAAW,eAChC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA;AAAA,MACZ,GACF;AAAA,MACA,oBAAC,SAAI,KAAK,WAAW,WAAW,gBAC9B,+BAAC,SAAI,WAAW,YACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,sBAAmB,MAAK,UAAS,QAAgB;AAAA,QAClD,oBAAC,iBAAc;AAAA,SACjB,GACF;AAAA,MACA,oBAAC,SAAI,WAAW,eACd;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA;AAAA,MACZ,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.css

@@ -1,16 +1,16 @@
-._1wbek5q0-3-13-3 {
+._1wbek5q0-3-14-1 {
   position: relative;
   height: 100%;
   pointer-events: none;
 }
-._1wbek5q1-3-13-3 {
+._1wbek5q1-3-14-1 {
   position: absolute;
   left: 0;
   right: 0;
   display: flex;
   align-items: center;
 }
-._1wbek5q2-3-13-3 {
+._1wbek5q2-3-14-1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -22,10 +22,11 @@
   letter-spacing: 0px;
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
+  user-select: none;
   width: 100%;
   text-align: right;
 }
-._1wbek5q3-3-13-3 {
+._1wbek5q3-3-14-1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -37,21 +38,22 @@
   letter-spacing: 0px;
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
+  user-select: none;
   width: 100%;
 }
-._1wbek5q4-3-13-3 {
+._1wbek5q4-3-14-1 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._1wbek5q5-3-13-3 {
+._1wbek5q5-3-14-1 {
   position: absolute;
   display: flex;
   align-items: center;
   pointer-events: none;
 }
-._1wbek5q6-3-13-3 {
+._1wbek5q6-3-14-1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -63,16 +65,17 @@
   letter-spacing: 0px;
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
+  user-select: none;
   max-width: 100%;
   -webkit-text-stroke: 3px var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
   paint-order: stroke fill;
   padding-left: 1px;
 }
-._1wbek5q7-3-13-3 {
+._1wbek5q7-3-14-1 {
   position: relative;
   pointer-events: auto;
   z-index: 1;
 }
-._1wbek5q8-3-13-3 {
+._1wbek5q8-3-14-1 {
   opacity: 0.3;
 }

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.sty.js

@@ -1,13 +1,13 @@
 import "./SankeyLabelOverlay.css";
-var dimmedLabel = "_1wbek5q8-3-13-3";
-var insideLabelPositioner = "_1wbek5q5-3-13-3";
-var insideZoneLabel = "_1wbek5q6-3-13-3";
-var insideZoneOverlay = "_1wbek5q4-3-13-3";
-var interactiveLabel = "_1wbek5q7-3-13-3";
-var leftZoneLabel = "_1wbek5q2-3-13-3";
-var rightZoneLabel = "_1wbek5q3-3-13-3";
-var sideLabelContainer = "_1wbek5q0-3-13-3";
-var sideLabelPositioner = "_1wbek5q1-3-13-3";
+var dimmedLabel = "_1wbek5q8-3-14-1";
+var insideLabelPositioner = "_1wbek5q5-3-14-1";
+var insideZoneLabel = "_1wbek5q6-3-14-1";
+var insideZoneOverlay = "_1wbek5q4-3-14-1";
+var interactiveLabel = "_1wbek5q7-3-14-1";
+var leftZoneLabel = "_1wbek5q2-3-14-1";
+var rightZoneLabel = "_1wbek5q3-3-14-1";
+var sideLabelContainer = "_1wbek5q0-3-14-1";
+var sideLabelPositioner = "_1wbek5q1-3-14-1";
 export {
   dimmedLabel,
   insideLabelPositioner,