fix(charts): defaultProps deprecation warning (#11019) (#11028)

Author: dlabrecq

packages/react-charts/src/components/ChartArea/examples/ChartArea.md

@@ -127,7 +127,7 @@ class BottomAlignedLegend extends React.Component {
           themeColor={ChartThemeColor.cyan}
           width={650}
         >
-          <ChartAxis label="Years"/>
+          <ChartAxis label="Years" fixAxisLabelHeight />
           <ChartAxis dependentAxis showGrid/>
           <ChartGroup>
             <ChartArea

packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx

@@ -239,7 +239,6 @@ export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerP
   );
 };
 ChartCursorContainer.displayName = 'ChartCursorContainer';
-ChartCursorContainer.defaultProps = (VictoryCursorContainer as any).defaultProps;
 
 // Note: VictoryCursorContainer.defaultEvents & VictoryContainer.role must be hoisted
 hoistNonReactStatics(ChartCursorContainer, VictoryCursorContainer);

packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx

@@ -111,7 +111,12 @@ interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps {
 }
 
 const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => {
-  props = evaluateProps(props);
+  props = evaluateProps({
+    pathComponent: <Path />,
+    role: 'presentation',
+    shapeRendering: 'auto',
+    ...props
+  });
 
   return React.cloneElement(props.pathComponent, {
     ...props.events,
@@ -125,10 +130,4 @@ const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => {
   });
 };
 
-ChartCursorFlyout.defaultProps = {
-  pathComponent: <Path />,
-  role: 'presentation',
-  shapeRendering: 'auto'
-};
-
 export { ChartCursorFlyout };

packages/react-charts/src/components/ChartUtils/chart-container.tsx

@@ -26,25 +26,30 @@ import { LineSegment } from 'victory-core';
  * @public
  */
 export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerType) => {
-  const container: any = victoryCreateContainer(behaviorA, behaviorB);
+  const Container: any = victoryCreateContainer(behaviorA, behaviorB);
   const isCursor = behaviorA === 'cursor' || behaviorB === 'cursor';
   const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi';
 
-  if (!container?.defaultProps) {
-    container.defaultProps = {};
-  }
-  if (isCursor) {
-    container.defaultProps.cursorLabelComponent = <ChartLabel textAnchor="start" />;
-    container.defaultProps.cursorComponent = (
-      <LineSegment
-        style={{
-          stroke: chart_container_cursor_line_Fill.var
-        }}
-      />
-    );
-  }
-  if (isVoronoi) {
-    container.defaultProps.labelComponent = <ChartCursorTooltip />;
-  }
-  return container;
+  const containerWrapper = (props: any) => {
+    const containerProps = {
+      ...(isCursor && {
+        cursorLabelComponent: <ChartLabel textAnchor="start" />,
+        cursorComponent: (
+          <LineSegment
+            style={{
+              stroke: chart_container_cursor_line_Fill.var
+            }}
+          />
+        )
+      }),
+      ...(isVoronoi && { labelComponent: <ChartCursorTooltip /> }),
+      ...props
+    };
+    return <Container {...containerProps} />;
+  };
+  containerWrapper.defaultEvents = Container.defaultEvents;
+  containerWrapper.displayName = Container.displayName;
+  containerWrapper.role = Container.role;
+
+  return containerWrapper;
 };

packages/react-charts/src/components/ChartUtils/chart-tooltip.ts

@@ -92,7 +92,7 @@ export const getCursorTooltipPoniterOrientation = ({
  * Returns props associated with legend data
  * @private
  */
-export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) =>
+export const getLegendTooltipDataProps = (props: ChartLegendProps) =>
   merge(
     {
       borderPadding: 0,
@@ -112,7 +112,7 @@ export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) =>
         }
       }
     },
-    { ...defaultProps }
+    { ...props }
   );
 
 /**

packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx

@@ -249,7 +249,6 @@ export const ChartVoronoiContainer: React.FunctionComponent<ChartVoronoiContaine
   );
 };
 ChartVoronoiContainer.displayName = 'ChartVoronoiContainer';
-ChartVoronoiContainer.defaultProps = (VictoryVoronoiContainer as any).defaultProps;
 
 // Note: VictoryVoronoiContainer.defaultEvents & VictoryContainer.role must be hoisted
 hoistNonReactStatics(ChartVoronoiContainer, VictoryVoronoiContainer);