@dynatrace/strato-components 3.12.1 → 3.13.0

package/charts/meter-bar/shared/styles.css

@@ -1,4 +1,4 @@
-._16sdwow0-3-12-1 {
+._16sdwow0-3-13-0 {
   position: relative;
   z-index: 1;
 }

package/charts/meter-bar/shared/styles.sty.js

@@ -23,4 +23,4 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = "_16sdwow0-3-12-1";
+var container = "_16sdwow0-3-13-0";

package/charts/meter-bar/single-meter-bar/MeterBarChart.js

@@ -176,7 +176,7 @@ const MeterBarChart = Object.assign(MeterBarChartRoot, {
   Min: import_Min.Min,
   Max: import_Max.Max,
   ThresholdIndicator: import_ThresholdIndicator.ThresholdIndicator,
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  // oxlint-disable-next-line typescript/no-deprecated
   ThresholdLegend: import_ThresholdLegend.ThresholdLegend,
   Legend: import_Legend.Legend,
   Tooltip: import_Tooltip.Tooltip,

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.css

@@ -1,4 +1,4 @@
-._n2jd1m0-3-12-1 {
+._n2jd1m0-3-13-0 {
   display: block;
   width: 100%;
   overflow: visible;

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.sty.js

@@ -21,4 +21,4 @@ __export(MeterBarChartThresholdIntervals_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarChartThresholdIntervals_css_exports);
 var import_MeterBarChartThresholdIntervals_css_ts_vanilla = require("./MeterBarChartThresholdIntervals.css");
-var thresholdIntervals = "_n2jd1m0-3-12-1";
+var thresholdIntervals = "_n2jd1m0-3-13-0";

package/charts/meter-bar/single-meter-bar/slots/Label.js

@@ -21,7 +21,7 @@ __export(Label_exports, {
 });
 module.exports = __toCommonJS(Label_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Label = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/meter-bar/single-meter-bar/slots/Max.js

@@ -21,7 +21,7 @@ __export(Max_exports, {
 });
 module.exports = __toCommonJS(Max_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Max = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/meter-bar/single-meter-bar/slots/Min.js

@@ -21,7 +21,7 @@ __export(Min_exports, {
 });
 module.exports = __toCommonJS(Min_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Min = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/meter-bar/single-meter-bar/slots/Value.js

@@ -21,7 +21,7 @@ __export(Value_exports, {
 });
 module.exports = __toCommonJS(Value_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Value = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/meter-bar/single-meter-bar/utils/apply-threshold-defaults.js

@@ -28,7 +28,7 @@ const applyThresholdDefaults = (threshold) => {
     // The deprecated per-threshold `showIndicator` is preserved as-is (an unset
     // flag stays `undefined`) so the chart-level `showThresholdIndicators`
     // fallback can distinguish "not specified" from an explicit `false`.
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     showIndicator: threshold.showIndicator
   };
 };

package/charts/meter-bar/single-meter-bar/utils/resolve-show-threshold-indicators.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(resolve_show_threshold_indicators_exports);
 var import_collapse_threshold_show_indicators = require("../../shared/utils/collapse-threshold-show-indicators.js");
 function resolveShowThresholdIndicators(thresholds) {
   return (0, import_collapse_threshold_show_indicators.collapseThresholdShowIndicators)(
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     thresholds.map((threshold) => threshold.showIndicator),
     "[MeterBarChart] The deprecated per-threshold `showIndicator` config has mixed values and can no longer be represented per threshold. Use the chart-level `showThresholdIndicators` prop to show or hide all threshold indicators at once."
   );

package/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.css

@@ -1,3 +1,3 @@
-._1cob19w0-3-12-1 {
+._1cob19w0-3-13-0 {
   position: absolute;
 }

package/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.sty.js

@@ -21,4 +21,4 @@ __export(InnerContainer_css_exports, {
 });
 module.exports = __toCommonJS(InnerContainer_css_exports);
 var import_InnerContainer_css_ts_vanilla = require("./InnerContainer.css");
-var container = "_1cob19w0-3-12-1";
+var container = "_1cob19w0-3-13-0";

package/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.css

@@ -1,3 +1,3 @@
-._1gn0gqx0-3-12-1 {
+._1gn0gqx0-3-13-0 {
   overflow: hidden;
 }

package/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.sty.js

@@ -21,4 +21,4 @@ __export(InnerDonut_css_exports, {
 });
 module.exports = __toCommonJS(InnerDonut_css_exports);
 var import_InnerDonut_css_ts_vanilla = require("./InnerDonut.css");
-var container = "_1gn0gqx0-3-12-1";
+var container = "_1gn0gqx0-3-13-0";

package/charts/pie/components/PieChartInternal.js

@@ -63,7 +63,7 @@ const PieChartInternal = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     hidden: legendHidden,
     position: legendPosition,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     ratio,
     initialRatio,
     onRatioChange

package/charts/pie/components/PieChartOverlays/PieChartOverlays.css

@@ -1,4 +1,4 @@
-._jxp4cr0-3-12-1 {
+._jxp4cr0-3-13-0 {
   position: relative;
   height: 100%;
   z-index: 1;

package/charts/pie/components/PieChartOverlays/PieChartOverlays.sty.js

@@ -21,4 +21,4 @@ __export(PieChartOverlays_css_exports, {
 });
 module.exports = __toCommonJS(PieChartOverlays_css_exports);
 var import_PieChartOverlays_css_ts_vanilla = require("./PieChartOverlays.css");
-var container = "_jxp4cr0-3-12-1";
+var container = "_jxp4cr0-3-13-0";

package/charts/pie/components/PieChartPlot/PieChartPlot.css

@@ -1,3 +1,3 @@
-._1iotdmn0-3-12-1 {
+._1iotdmn0-3-13-0 {
   position: relative;
 }

package/charts/pie/components/PieChartPlot/PieChartPlot.js

@@ -120,54 +120,63 @@ const PieChartPlot = (0, import_react.forwardRef)(
           visibleIds
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width, height, style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "g",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
         {
-          transform: topCenter !== 0 || leftCenter !== 0 ? `translate(${leftCenter}, ${topCenter})` : void 0,
-          onMouseLeave: dispatchReducer({ type: "SET_OUT_BOUNDS" }),
-          children: [
-            variant === import_constants.CHART_VARIANT.Pie ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "circle",
-              {
-                cx: "0",
-                cy: "0",
-                r: Math.max(radius, 0),
-                fill: "transparent"
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: donutOverlay, fill: "transparent" }),
-            sliceRenderData.map(
-              ({ pieArc, label, isHighlighted, showLabel }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_PieChartSlice.PieChartSlice,
+          width,
+          height,
+          style: { overflow: "visible" },
+          "data-dt-chart-svg": true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "g",
+            {
+              transform: topCenter !== 0 || leftCenter !== 0 ? `translate(${leftCenter}, ${topCenter})` : void 0,
+              onMouseLeave: dispatchReducer({ type: "SET_OUT_BOUNDS" }),
+              children: [
+                variant === import_constants.CHART_VARIANT.Pie ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "circle",
                   {
-                    sliceId: `slice-${pieArc.data.id}`,
-                    arc: pieArc,
-                    data: pieArc.data,
-                    path: pathGenerator,
-                    isHighlighted
+                    cx: "0",
+                    cy: "0",
+                    r: Math.max(radius, 0),
+                    fill: "transparent"
                   }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: donutOverlay, fill: "transparent" }),
+                sliceRenderData.map(
+                  ({ pieArc, label, isHighlighted, showLabel }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_PieChartSlice.PieChartSlice,
+                      {
+                        sliceId: `slice-${pieArc.data.id}`,
+                        arc: pieArc,
+                        data: pieArc.data,
+                        path: pathGenerator,
+                        isHighlighted
+                      }
+                    ),
+                    showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_PieChartLabel.PieChartLabel,
+                      {
+                        x: label.textX,
+                        y: label.textY,
+                        text: label.text,
+                        isHighlighted
+                      }
+                    )
+                  ] }, `slice-${pieArc.data.id}`)
                 ),
-                showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_PieChartLabel.PieChartLabel,
+                subpixelSliceMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "path",
                   {
-                    x: label.textX,
-                    y: label.textY,
-                    text: label.text,
-                    isHighlighted
+                    d: subpixelSliceMarker.path,
+                    fill: subpixelSliceMarker.color
                   }
                 )
-              ] }, `slice-${pieArc.data.id}`)
-            ),
-            subpixelSliceMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "path",
-              {
-                d: subpixelSliceMarker.path,
-                fill: subpixelSliceMarker.color
-              }
-            )
-          ]
+              ]
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
 );

package/charts/pie/components/PieChartPlot/PieChartPlot.sty.js

@@ -21,4 +21,4 @@ __export(PieChartPlot_css_exports, {
 });
 module.exports = __toCommonJS(PieChartPlot_css_exports);
 var import_PieChartPlot_css_ts_vanilla = require("./PieChartPlot.css");
-var container = "_1iotdmn0-3-12-1";
+var container = "_1iotdmn0-3-13-0";

package/charts/pie/providers/PieChartSlicesDataProvider.js

@@ -37,9 +37,13 @@ const PieChartSlicesDataProvider = ({ children }) => {
   const setHighlightedIdState = (0, import_use_set_highlighted_ids_state.useSetHighlightedIdState)();
   const setVisibleSlicesState = (0, import_use_set_visible_slices_state.useSetVisibleSlicesState)();
   const isDataAvailable = !(0, import_lodash_es.isEmpty)(chartData);
+  const groupingKey = (0, import_react.useMemo)(
+    () => JSON.stringify(chartConfig.grouping ?? import_defaults.defaultGrouping),
+    [chartConfig.grouping]
+  );
   const reRenderDependencies = [
     chartConfig.colorPalette,
-    chartConfig.grouping,
+    groupingKey,
     chartData?.slices,
     chartData?.unit,
     isDataAvailable

package/charts/pie/providers/StoreProvider.js

@@ -27,7 +27,7 @@ var import_PieChartStateContext = require("../context/PieChartStateContext.js");
 var import_state = require("../types/state.js");
 const StoreProvider = ({ children }) => {
   const storeRef = (0, import_react.useRef)(null);
-  storeRef.current = (0, import_store.createStore)({
+  storeRef.current ??= (0, import_store.createStore)({
     ...import_state.initialState
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieChartStateContext.PieChartStateContext.Provider, { value: storeRef.current, children });

package/charts/sankey-chart/SankeyChart.css

@@ -1,15 +1,15 @@
-._s3m3d0-3-12-1 {
+._s3m3d0-3-13-0 {
   position: relative;
   width: 100%;
   height: 100%;
 }
-._s3m3d1-3-12-1 {
+._s3m3d1-3-13-0 {
   display: grid;
   grid-template-columns: minmax(0, auto) minmax(60%, 1fr) minmax(0, auto);
   width: 100%;
   height: 100%;
 }
-._s3m3d2-3-12-1 {
+._s3m3d2-3-13-0 {
   position: relative;
   overflow: hidden;
 }

package/charts/sankey-chart/SankeyChart.sty.js

@@ -23,6 +23,6 @@ __export(SankeyChart_css_exports, {
 });
 module.exports = __toCommonJS(SankeyChart_css_exports);
 var import_SankeyChart_css_ts_vanilla = require("./SankeyChart.css");
-var graphAreaCell = "_s3m3d2-3-12-1";
-var graphAreaContainer = "_s3m3d1-3-12-1";
-var graphAreaWrapper = "_s3m3d0-3-12-1";
+var graphAreaCell = "_s3m3d2-3-13-0";
+var graphAreaContainer = "_s3m3d1-3-13-0";
+var graphAreaWrapper = "_s3m3d0-3-13-0";

package/charts/sankey-chart/SankeyChartRoot.js

@@ -25,6 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_constants = require("./constants.js");
 var import_SankeyConfigProvider = require("./providers/SankeyConfigProvider.js");
 var import_SankeyDataProvider = require("./providers/SankeyDataProvider.js");
+var import_SankeyFormatterProvider = require("./providers/SankeyFormatterProvider.js");
 var import_SankeyChart = require("./SankeyChart.js");
 var import_Nodes = require("./slots/Nodes.js");
 var import_iterate_slots = require("./utils/iterate-slots.js");
@@ -45,10 +46,12 @@ const SankeyChartRoot = (props) => {
     loading = false,
     truncationMode = import_constants.DEFAULT_TRUNCATION_MODE,
     colorPalette = "categorical",
+    formatter,
+    unit,
     children
   } = props;
   const { nodes: nodesConfig } = (0, import_iterate_slots.iterateSlots)(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyFormatterProvider.SankeyFormatterProvider, { formatter, unit, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_SankeyConfigProvider.SankeyConfigProvider,
     {
       nodesConfig,
@@ -77,7 +80,7 @@ const SankeyChartRoot = (props) => {
         }
       )
     }
-  );
+  ) });
 };
 SankeyChartRoot.displayName = import_constants.DISPLAY_NAME;
 const SankeyChart = Object.assign(SankeyChartRoot, {

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

@@ -1,4 +1,10 @@
-._1hfx9ue0-3-12-1 {
+._1hfx9ue0-3-13-0 {
   position: absolute;
   inset: 0;
+}
+._1hfx9ue1-3-13-0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 }

package/charts/sankey-chart/components/SankeyCanvas.css.d.ts

@@ -1,2 +1,3 @@
 export declare const canvasContainer: string;
+export declare const highlightCanvas: string;
 //# sourceMappingURL=SankeyCanvas.css.d.ts.map

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

@@ -25,9 +25,15 @@ var import_react = require("react");
 var import_SankeyCanvas_css = require("./SankeyCanvas.sty.js");
 var import_Canvas = require("../../core/components/canvas/Canvas.js");
 var import_CanvasContext = require("../../core/components/canvas/CanvasContext.js");
+var import_constants = require("../constants.js");
 var import_use_draw_sankey = require("../hooks/use-draw-sankey.js");
-function SankeyDraw({ layout, nodeColors }) {
-  (0, import_use_draw_sankey.useDrawSankey)(layout, nodeColors);
+var import_selectors = require("../store/selectors.js");
+function SankeyDraw({
+  layout,
+  nodeColors,
+  overlayCanvasRef
+}) {
+  (0, import_use_draw_sankey.useDrawSankey)(layout, nodeColors, overlayCanvasRef);
   return null;
 }
 SankeyDraw["displayName"] = "SankeyDraw";
@@ -42,6 +48,43 @@ function SankeyCanvas({
     () => ({ shapeRefs: shapeRefs.current }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyCanvas_css.canvasContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CanvasContext.CanvasContext.Provider, { value: canvasContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Canvas.Canvas, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SankeyDraw, { layout, nodeColors }) }) }) });
+  const mainCanvasRef = (0, import_react.useRef)(null);
+  const overlayCanvasRef = (0, import_react.useRef)(null);
+  const activeSet = (0, import_selectors.useSankeyActiveHighlight)();
+  (0, import_react.useEffect)(() => {
+    const overlayCanvas = overlayCanvasRef.current;
+    if (!overlayCanvas || width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = Math.max(1, window.devicePixelRatio) || 1;
+    overlayCanvas.width = width * dpr;
+    overlayCanvas.height = height * dpr;
+    const ctx = overlayCanvas.getContext("2d");
+    if (ctx) {
+      ctx.scale(dpr, dpr);
+    }
+    overlayCanvas.style.width = "100%";
+    overlayCanvas.style.height = "100%";
+  }, [width, height]);
+  (0, import_react.useEffect)(() => {
+    const requestId = requestAnimationFrame(() => {
+      mainCanvasRef.current?.customSetStyle(
+        "opacity",
+        activeSet ? String(import_constants.DIM_CANVAS_ALPHA) : "1"
+      );
+    });
+    return () => cancelAnimationFrame(requestId);
+  }, [activeSet]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_SankeyCanvas_css.canvasContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CanvasContext.CanvasContext.Provider, { value: canvasContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Canvas.Canvas, { ref: mainCanvasRef, width, height, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SankeyDraw,
+      {
+        layout,
+        nodeColors,
+        overlayCanvasRef
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: overlayCanvasRef, className: import_SankeyCanvas_css.highlightCanvas })
+  ] });
 }
 SankeyCanvas["displayName"] = "SankeyCanvas";

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

@@ -17,8 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SankeyCanvas_css_exports = {};
 __export(SankeyCanvas_css_exports, {
-  canvasContainer: () => canvasContainer
+  canvasContainer: () => canvasContainer,
+  highlightCanvas: () => highlightCanvas
 });
 module.exports = __toCommonJS(SankeyCanvas_css_exports);
 var import_SankeyCanvas_css_ts_vanilla = require("./SankeyCanvas.css");
-var canvasContainer = "_1hfx9ue0-3-12-1";
+var canvasContainer = "_1hfx9ue0-3-13-0";
+var highlightCanvas = "_1hfx9ue1-3-13-0";

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

@@ -22,59 +22,14 @@ __export(SankeyGraphArea_exports, {
 module.exports = __toCommonJS(SankeyGraphArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_SankeyChart_css = require("../SankeyChart.sty.js");
-var import_SankeyCanvas = require("./SankeyCanvas.js");
-var import_SankeyLabelOverlay = require("./SankeyLabelOverlay.js");
-var import_SankeyOverlay = require("./SankeyOverlay.js");
+var import_SankeyGraphAreaContent = require("./SankeyGraphAreaContent.js");
 var import_useResizeObserver = require("../../../core/hooks/useResizeObserver.js");
 var import_useGraphSize = require("../../core/components/chart-layout/hooks/useGraphSize.js");
 var import_OverlayContext = require("../../core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_constants = require("../constants.js");
 var import_use_node_colors = require("../hooks/use-node-colors.js");
-var import_use_sankey_layout = require("../hooks/use-sankey-layout.js");
-var import_SankeyHoverStoreProvider = require("../providers/SankeyHoverStoreProvider.js");
 var import_SankeyLayoutProvider = require("../providers/SankeyLayoutProvider.js");
-function SankeyGraphAreaContent({
-  outerRef,
-  canvasRef,
-  canvasWidth,
-  height,
-  maxSideLabelWidth,
-  nodeColors
-}) {
-  const layout = (0, import_use_sankey_layout.useSankeyLayout)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: outerRef, className: import_SankeyChart_css.graphAreaContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_SankeyLabelOverlay.SankeyLabelOverlay,
-      {
-        zone: "left",
-        layout,
-        maxWidth: maxSideLabelWidth
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: canvasRef, className: import_SankeyChart_css.graphAreaCell, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_SankeyCanvas.SankeyCanvas,
-        {
-          width: canvasWidth,
-          height,
-          layout,
-          nodeColors
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyLabelOverlay.SankeyLabelOverlay, { zone: "inside", layout }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyOverlay.SankeyOverlay, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_SankeyLabelOverlay.SankeyLabelOverlay,
-      {
-        zone: "right",
-        layout,
-        maxWidth: maxSideLabelWidth
-      }
-    ) })
-  ] });
-}
-SankeyGraphAreaContent["displayName"] = "SankeyGraphAreaContent";
+var import_SankeyStoreProvider = require("../providers/SankeyStoreProvider.js");
 function SankeyGraphArea() {
   const { height } = (0, import_useGraphSize.useGraphSize)();
   const nodeColors = (0, import_use_node_colors.useNodeColors)();
@@ -82,8 +37,8 @@ function SankeyGraphArea() {
   const { ref: canvasRef, width: measuredWidth } = (0, import_useResizeObserver.useResizeObserver)();
   const canvasWidth = measuredWidth ?? 0;
   const maxSideLabelWidth = outerWidth !== void 0 && outerWidth > 0 ? Math.floor(outerWidth * import_constants.MAX_SIDE_LABEL_WIDTH_RATIO) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyHoverStoreProvider.SankeyHoverStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyLayoutProvider.SankeyLayoutProvider, { width: canvasWidth, height, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SankeyGraphAreaContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyStoreProvider.SankeyStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyLayoutProvider.SankeyLayoutProvider, { width: canvasWidth, height, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_SankeyGraphAreaContent.SankeyGraphAreaContent,
     {
       outerRef,
       canvasRef,

package/charts/sankey-chart/components/SankeyGraphAreaContent.d.ts

@@ -0,0 +1,15 @@
+import { type RefCallback } from 'react';
+interface SankeyGraphAreaContentProps {
+    outerRef: RefCallback<HTMLDivElement | null>;
+    canvasRef: RefCallback<HTMLDivElement | null>;
+    canvasWidth: number;
+    height: number;
+    maxSideLabelWidth: number | undefined;
+    nodeColors: Map<string, string>;
+}
+export declare function SankeyGraphAreaContent({ outerRef, canvasRef, canvasWidth, height, maxSideLabelWidth, nodeColors, }: Readonly<SankeyGraphAreaContentProps>): import("react").JSX.Element;
+export declare namespace SankeyGraphAreaContent {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=SankeyGraphAreaContent.d.ts.map

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

@@ -0,0 +1,80 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyGraphAreaContent_exports = {};
+__export(SankeyGraphAreaContent_exports, {
+  SankeyGraphAreaContent: () => SankeyGraphAreaContent
+});
+module.exports = __toCommonJS(SankeyGraphAreaContent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_SankeyChart_css = require("../SankeyChart.sty.js");
+var import_SankeyCanvas = require("./SankeyCanvas.js");
+var import_SankeyLabelOverlay = require("./SankeyLabelOverlay.js");
+var import_SankeyOverlay = require("./SankeyOverlay.js");
+var import_SankeyHighlight_context = require("../context/SankeyHighlight.context.js");
+var import_use_sankey_layout = require("../hooks/use-sankey-layout.js");
+var import_selectors = require("../store/selectors.js");
+var import_get_active_connected_set = require("../utils/get-active-connected-set.js");
+function SankeyGraphAreaContent({
+  outerRef,
+  canvasRef,
+  canvasWidth,
+  height,
+  maxSideLabelWidth,
+  nodeColors
+}) {
+  const layout = (0, import_use_sankey_layout.useSankeyLayout)();
+  const selected = (0, import_selectors.useSankeySelectedShape)();
+  const hovered = (0, import_selectors.useSankeyHoveredShape)();
+  const highlight = (0, import_react.useMemo)(
+    () => (0, import_get_active_connected_set.getActiveConnectedSet)(layout, selected, hovered),
+    [layout, selected, hovered]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyHighlight_context.SankeyHighlightContext.Provider, { value: highlight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: outerRef, className: import_SankeyChart_css.graphAreaContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_SankeyLabelOverlay.SankeyLabelOverlay,
+      {
+        zone: "left",
+        layout,
+        maxWidth: maxSideLabelWidth
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: canvasRef, className: import_SankeyChart_css.graphAreaCell, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_SankeyCanvas.SankeyCanvas,
+        {
+          width: canvasWidth,
+          height,
+          layout,
+          nodeColors
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyLabelOverlay.SankeyLabelOverlay, { zone: "inside", layout }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyOverlay.SankeyOverlay, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyChart_css.graphAreaCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_SankeyLabelOverlay.SankeyLabelOverlay,
+      {
+        zone: "right",
+        layout,
+        maxWidth: maxSideLabelWidth
+      }
+    ) })
+  ] }) });
+}
+SankeyGraphAreaContent["displayName"] = "SankeyGraphAreaContent";