@fluentui/react-charts 0.0.0-nightly-20250702-0405.1 → 0.0.0-nightly-20250703-1103.1

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js

@@ -11,9 +11,12 @@ Object.defineProperty(exports, "ResponsiveContainer", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _getWindow = require("../../utilities/getWindow");
+const _useResponsiveChildStylesstyles = require("./useResponsiveChildStyles.styles");
+const _react1 = require("@griffel/react");
 const ResponsiveContainer = (props)=>{
     const containerRef = _react.useRef(null);
     const onResizeRef = _react.useRef();
+    const childClasses = (0, _useResponsiveChildStylesstyles.useResponsiveChildStyles)();
     const [size, setSize] = _react.useState({});
     onResizeRef.current = props.onResize;
     _react.useEffect(()=>{
@@ -66,37 +69,36 @@ const ResponsiveContainer = (props)=>{
                 calculatedHeight = props.maxHeight;
             }
         }
-        var _props_width, _props_height;
-        return /*#__PURE__*/ _react.createElement("div", {
-            ref: containerRef,
-            style: {
-                width: (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : '100%',
-                height: (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : '100%',
-                minWidth: props.minWidth,
-                minHeight: props.minHeight,
-                maxHeight: props.maxHeight,
-                // Ensure the child element fills the parent container
-                // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
-                '--root-width': calculatedWidth + 'px',
-                '--root-height': calculatedHeight + 'px'
-            }
-        }, _react.Children.map(props.children, (child)=>{
+        return _react.Children.map(props.children, (child)=>{
+            var _child_props_styles, _child_props_styles1, _child_props_styles2;
             return /*#__PURE__*/ _react.cloneElement(child, {
                 width: calculatedWidth,
                 height: calculatedHeight,
-                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0)
+                // For SankeyChart
+                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
+                styles: {
+                    root: (0, _react1.mergeClasses)((_child_props_styles = child.props.styles) === null || _child_props_styles === void 0 ? void 0 : _child_props_styles.root, childClasses.root),
+                    chartWrapper: (0, _react1.mergeClasses)((_child_props_styles1 = child.props.styles) === null || _child_props_styles1 === void 0 ? void 0 : _child_props_styles1.chartWrapper, childClasses.chartWrapper),
+                    chart: (0, _react1.mergeClasses)((_child_props_styles2 = child.props.styles) === null || _child_props_styles2 === void 0 ? void 0 : _child_props_styles2.chart, childClasses.chart)
+                }
             });
-        }));
+        });
     }, [
         size,
         props.aspect,
         props.maxHeight,
-        props.children,
-        props.width,
-        props.height,
-        props.minHeight,
-        props.minWidth
+        props.children
     ]);
-    return chartContent;
+    var _props_width, _props_height;
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: containerRef,
+        style: {
+            width: (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : '100%',
+            height: (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : '100%',
+            minWidth: props.minWidth,
+            minHeight: props.minHeight,
+            maxHeight: props.maxHeight
+        }
+    }, chartContent);
 };
 ResponsiveContainer.displayName = 'ResponsiveContainer';

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        style={\n          {\n            width: props.width ?? '100%',\n            height: props.height ?? '100%',\n            minWidth: props.minWidth,\n            minHeight: props.minHeight,\n            maxHeight: props.maxHeight,\n            // Ensure the child element fills the parent container\n            // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height\n            '--root-width': calculatedWidth + 'px',\n            '--root-height': calculatedHeight + 'px',\n          } as React.CSSProperties\n        }\n      >\n        {React.Children.map(props.children, child => {\n          return React.cloneElement<ResponsiveChildProps>(child, {\n            width: calculatedWidth,\n            height: calculatedHeight,\n            shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n          });\n        })}\n      </div>\n    );\n  }, [size, props.aspect, props.maxHeight, props.children, props.width, props.height, props.minHeight, props.minWidth]);\n\n  return chartContent;\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["ResponsiveContainer","props","containerRef","React","useRef","onResizeRef","size","setSize","useState","current","onResize","useEffect","_window","getWindow","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","createElement","div","ref","style","minWidth","minHeight","Children","map","children","child","cloneElement","shouldResize","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["ResponsiveContainer","props","containerRef","React","useRef","onResizeRef","childClasses","useResponsiveChildStyles","size","setSize","useState","current","onResize","useEffect","_window","getWindow","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","mergeClasses","chartWrapper","chart","createElement","div","ref","style","minWidth","minHeight","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveContainerProps {\n  /**\n   * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n   */\n  aspect?: number;\n\n  /**\n   * Width of the container\n   */\n  width?: number | string;\n\n  /**\n   * Height of the container\n   */\n  height?: number | string;\n\n  /**\n   * Minimum width of the container\n   */\n  minWidth?: number | string;\n\n  /**\n   * Minimum height of the container\n   */\n  minHeight?: number | string;\n\n  /**\n   * Maximum height of the container\n   */\n  maxHeight?: number;\n\n  /**\n   * Callback providing the updated chart width and height values when the container is resized\n   */\n  onResize?: (width: number, height: number) => void;\n\n  /**\n   * Child component to be rendered within the container\n   */\n  children: React.ReactElement<ResponsiveChildProps>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Responsive Child styles\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildStyles {\n  root?: string;\n  chartWrapper?: string;\n  chart?: string;\n}\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n  styles?: ResponsiveChildStyles;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveContainerProps {\n  /**\n   * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n   */\n  aspect?: number;\n\n  /**\n   * Width of the container\n   */\n  width?: number | string;\n\n  /**\n   * Height of the container\n   */\n  height?: number | string;\n\n  /**\n   * Minimum width of the container\n   */\n  minWidth?: number | string;\n\n  /**\n   * Minimum height of the container\n   */\n  minHeight?: number | string;\n\n  /**\n   * Maximum height of the container\n   */\n  maxHeight?: number;\n\n  /**\n   * Callback providing the updated chart width and height values when the container is resized\n   */\n  onResize?: (width: number, height: number) => void;\n\n  /**\n   * Child component to be rendered within the container\n   */\n  children: React.ReactElement<ResponsiveChildProps>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    responsiveChildClassNames: function() {
+        return responsiveChildClassNames;
+    },
+    useResponsiveChildStyles: function() {
+        return useResponsiveChildStyles;
+    }
+});
+const _react = require("@griffel/react");
+const responsiveChildClassNames = {
+    root: 'fui-charts-resp-child__root',
+    chartWrapper: 'fui-charts-resp-child__chartWrapper',
+    chart: 'fui-charts-resp-child__chart'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl"
+    },
+    chartWrapper: {
+        a9b677: "fly5x3f"
+    },
+    chart: {
+        a9b677: "fly5x3f"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}"
+    ]
+});
+const useResponsiveChildStyles = ()=>{
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(responsiveChildClassNames.root, baseStyles.root),
+        chartWrapper: (0, _react.mergeClasses)(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),
+        chart: (0, _react.mergeClasses)(responsiveChildClassNames.chart, baseStyles.chart)
+    };
+}; //# sourceMappingURL=useResponsiveChildStyles.styles.js.map

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"names":["responsiveChildClassNames","useResponsiveChildStyles","root","chartWrapper","chart","useStyles","__styles","a9b677","Bqenvij","d","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAmBAC,wBAAwB;eAAxBA;;;uBApB4B;AAClC,MAAMD,4BAA4B;IACrCE,MAAM;IACNC,cAAc;IACdC,OAAO;AACX;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAJ,MAAA;QAAAK,QAAA;QAAAC,SAAA;IAAA;IAAAL,cAAA;QAAAI,QAAA;IAAA;IAAAH,OAAA;QAAAG,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;KAAA;AAAA;AAcX,MAAMR,2BAA2BA;IACpC,MAAMS,aAAaL;IACnB,OAAO;QACHH,MAAMS,IAAAA,mBAAY,EAACX,0BAA0BE,IAAI,EAAEQ,WAAWR,IAAI;QAClEC,cAAcQ,IAAAA,mBAAY,EAACX,0BAA0BG,YAAY,EAAEO,WAAWP,YAAY;QAC1FC,OAAOO,IAAAA,mBAAY,EAACX,0BAA0BI,KAAK,EAAEM,WAAWN,KAAK;IACzE;AACJ"}

package/lib-commonjs/components/SankeyChart/SankeyChart.js

@@ -302,22 +302,20 @@ function linkValue(originalLinks, link) {
 }
 function preRenderLayout(margins, containerWidth, containerHeight, isRtl) {
     const { left, right, top, bottom } = margins;
-    const width = containerWidth - right;
-    const height = containerHeight - bottom > 0 ? containerHeight - bottom : 0;
     const sankey = (0, _d3sankey.sankey)().nodeWidth(NODE_WIDTH).extent([
         [
             left,
             top
         ],
         [
-            width - 1,
-            height - 6
+            containerWidth - right,
+            containerHeight - bottom
         ]
     ]).nodeAlign(isRtl ? _d3sankey.sankeyRight : _d3sankey.sankeyJustify);
     return {
         sankey,
-        height,
-        width
+        height: containerHeight,
+        width: containerWidth
     };
 }
 const elipsis = '...';
@@ -444,6 +442,7 @@ function nodeTextColor(state, singleNode) {
     return !(!state.selectedState || state.selectedNodes.has(singleNode.index) && state.selectedNode || !state.selectedNode) ? DEFAULT_TEXT_COLOR : NON_SELECTED_TEXT_COLOR;
 }
 const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_reflowProps;
     const classes = (0, _useSankeyChartStylesstyles.useSankeyChartStyles)(props);
     const chartContainer = _react.useRef(null);
     const _reqID = _react.useRef();
@@ -490,7 +489,8 @@ const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             // NOTE: Calls to this method trigger a re-render.
             const container = props.parentRef ? props.parentRef : chartContainer.current;
             if (container) {
-                const currentContainerWidth = props.enableReflow ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
+                var _props_reflowProps;
+                const currentContainerWidth = ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
                 const currentContainerHeight = container.getBoundingClientRect().height;
                 setContainerWidth(currentContainerWidth);
                 setContainerHeight(currentContainerHeight);
@@ -498,7 +498,7 @@ const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         });
     }, [
         _window,
-        props.enableReflow,
+        (_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode,
         props.parentRef
     ]);
     _react.useEffect(()=>{
@@ -607,7 +607,7 @@ const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         const nodeValues = valuesOfNodes(transformed.nodes);
         const linkValues = valuesOfLinks(transformed.links);
         adjustOnePercentHeightNodes(nodesInColumn, nodeValues, linkValues);
-        adjustPadding(sankey, height - 6, nodesInColumn);
+        adjustPadding(sankey, containerHeight - _margins.current.top - _margins.current.bottom, nodesInColumn);
         // `sankey` is called a second time, probably to re-layout the nodes with the one-percent adjusted weights.
         // NOTE: The second call to `sankey` is required to allow links to be hoverable.
         // Without the second call, the links are not hoverable.
@@ -1000,7 +1000,8 @@ const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         }, /*#__PURE__*/ _react.createElement("svg", {
             width: width,
             height: height,
-            id: _chartId
+            id: _chartId,
+            className: classes.chart
         }, nodeLinkDomOrderArray.map((item)=>{
             if (item.type === 'node') {
                 return /*#__PURE__*/ _react.createElement("g", {
@@ -1034,6 +1035,3 @@ const SankeyChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     });
 });
 SankeyChart.displayName = 'SankeyChart';
-SankeyChart.defaultProps = {
-    enableReflow: true
-};