extract ResponsiveContainer into a separate component + remove relate…

…d props

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -63,7 +63,7 @@ export interface Basestate {
     }[];
 }
 
-// @public (undocumented)
+// @public
 export const CartesianChart: React_2.FunctionComponent<ModifiedCartesianChartProps>;
 
 // @public
@@ -86,9 +86,7 @@ export interface CartesianChartProps {
     legendsOverflowText?: any;
     margins?: Margins;
     noOfCharsToTruncate?: number;
-    onResize?: (width: number, height: number) => void;
     parentRef?: HTMLElement | null;
-    responsive?: boolean;
     rotateXAxisLables?: boolean;
     secondaryYAxistitle?: string;
     secondaryYScaleOptions?: {
@@ -353,7 +351,7 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
-// @public (undocumented)
+// @public
 export const DonutChart: React_2.FunctionComponent<DonutChartProps>;
 
 // @public
@@ -764,6 +762,9 @@ export interface RefArrayData {
     refElement?: SVGGElement;
 }
 
+// @public (undocumented)
+export const ResponsiveContainer: React_2.FC<ResponsiveContainerProps>;
+
 // @public (undocumented)
 export const Shape: React_2.FunctionComponent<ShapeProps>;
 

packages/charts/react-charts/library/src/ResponsiveContainer.ts

@@ -0,0 +1 @@
+export * from './components/ResponsiveContainer/index';

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -25,13 +25,12 @@ import {
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { ChartPopover } from './ChartPopover';
 import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { ResponsiveContainer } from './ResponsiveContainer';
 
 /**
  * Cartesian Chart component
  * {@docCategory CartesianChart}
  */
-const CartesianChartBase: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<
+export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<
   HTMLDivElement,
   ModifiedCartesianChartProps
 >((props, forwardedRef) => {
@@ -620,21 +619,4 @@ const CartesianChartBase: React.FunctionComponent<ModifiedCartesianChartProps> =
     </div>
   );
 });
-
-export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = props => {
-  if (!props.responsive) {
-    return <CartesianChartBase {...props} />;
-  }
-
-  return (
-    <ResponsiveContainer onResize={props.onResize} width={props.width} height={props.height}>
-      {({ containerWidth, containerHeight }) => (
-        <CartesianChartBase {...props} width={containerWidth} height={containerHeight} />
-      )}
-    </ResponsiveContainer>
-  );
-};
 CartesianChart.displayName = 'CartesianChart';
-CartesianChart.defaultProps = {
-  responsive: true,
-};

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -407,19 +407,6 @@ export interface CartesianChartProps {
    */
   useUTC?: string | boolean;
 
-  /**
-   * Enables the chart to automatically adjust its size based on the container's dimensions.
-   * @default true
-   */
-  responsive?: boolean;
-
-  /**
-   * The function that is called when the chart is resized.
-   * @param width - The new width of the chart.
-   * @param height - The new height of the chart.
-   */
-  onResize?: (width: number, height: number) => void;
-
   /**
    * Determines whether overlapping x-axis tick labels should be hidden.
    * @default false

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx

@@ -10,7 +10,6 @@ import { Legend, Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { ResponsiveContainer } from '../CommonComponents/ResponsiveContainer';
 
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 
@@ -19,7 +18,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
  * Donutchart component.
  * {@docCategory DonutChart}
  */
-const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(
+export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(
   (props, forwardedRef) => {
     const _rootElem = React.useRef<HTMLDivElement | null>(null);
     const _uniqText: string = useId('_Pie_');
@@ -321,22 +320,8 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
   },
 );
 
-export const DonutChart: React.FunctionComponent<DonutChartProps> = props => {
-  if (!props.responsive) {
-    return <DonutChartBase {...props} />;
-  }
-
-  return (
-    <ResponsiveContainer onResize={props.onResize} width={props.width} height={props.height}>
-      {({ containerWidth, containerHeight }) => (
-        <DonutChartBase {...props} width={containerWidth} height={containerHeight} />
-      )}
-    </ResponsiveContainer>
-  );
-};
 DonutChart.displayName = 'DonutChart';
 DonutChart.defaultProps = {
   innerRadius: 0,
   hideLabels: true,
-  responsive: true,
 };

packages/charts/react-charts/library/src/components/CommonComponents/ResponsiveContainer/ResponsiveContainer.tsx → packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx

@@ -55,7 +55,12 @@ export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props =>
 
   return (
     <div ref={containerRef} className={classes.root} style={{ width: props.width, height: props.height }}>
-      {props.children(size)}
+      {React.Children.map(props.children, child => {
+        return React.cloneElement(child, {
+          width: size.containerWidth,
+          height: size.containerHeight,
+        });
+      })}
     </div>
   );
 };

packages/charts/react-charts/library/src/components/CommonComponents/ResponsiveContainer/ResponsiveContainer.types.ts → packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface ResponsiveContainerProps {
-  children: (props: { containerWidth?: number; containerHeight?: number }) => React.ReactNode;
+  children: React.ReactElement;
   onResize?: (width: number, height: number) => void;
   width?: number | string;
   height?: number | string;

packages/charts/react-charts/library/src/index.ts

@@ -8,3 +8,4 @@ export * from './types/index';
 export * from './Sparkline';
 export * from './utilities/colors';
 export * from './Popover';
+export * from './ResponsiveContainer';