Ensure undefined props do not overwrite defaults

FormidableLabs · carbonrobot · Apr 4, 2024 · Apr 4, 2024 · Apr 4, 2024 · 78ad17ad2f05edf2b88dbb16e94b77f60e885253
commit 78ad17ad2f05edf2b88dbb16e94b77f60e885253
diff --git a/.changeset/lucky-roses-lick.md b/.changeset/lucky-roses-lick.md
@@ -0,0 +1,17 @@
+---
+"victory-area": patch
+"victory-bar": patch
+"victory-candlestick": patch
+"victory-chart": patch
+"victory-core": patch
+"victory-errorbar": patch
+"victory-group": patch
+"victory-line": patch
+"victory-native": patch
+"victory-pie": patch
+"victory-stack": patch
+"victory-tooltip": patch
+"victory-voronoi": patch
+---
+
+Ensure undefined props do not overwrite defaults
diff --git a/packages/victory-area/src/area.tsx b/packages/victory-area/src/area.tsx
@@ -1,5 +1,6 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import React from "react";
+import { defaults } from "lodash";
 import * as d3Shape from "victory-vendor/d3-shape";
 import {
   Helpers,
@@ -100,7 +101,7 @@ const defaultProps = {
  * The area primitive used by VictoryArea
  */
 export const Area: React.FC<AreaProps> = (initialProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const {
     ariaLabel,
     role,

diff --git a/packages/victory-bar/src/bar.tsx b/packages/victory-bar/src/bar.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { defaults } from "lodash";
 import {
   Helpers,
   NumberOrCallback,
@@ -78,7 +79,7 @@ export const Bar = forwardRef<SVGPathElement, BarProps>(function Bar(
   initialProps,
   ref,
 ) {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const { polar, origin, style, barWidth, cornerRadius } = props;
 
   const path = polar

diff --git a/packages/victory-candlestick/src/candle.tsx b/packages/victory-candlestick/src/candle.tsx
@@ -122,7 +122,7 @@ const defaultProps: Partial<CandleProps> = {
 };
 
 export const Candle = (props: CandleProps) => {
-  const modifiedProps = evaluateProps({ ...defaultProps, ...props });
+  const modifiedProps = evaluateProps(defaults({}, props, defaultProps));
   const {
     ariaLabel,
     events,

diff --git a/packages/victory-chart/src/victory-chart.tsx b/packages/victory-chart/src/victory-chart.tsx
@@ -51,7 +51,7 @@ const defaultProps = {
 
 const VictoryChartImpl: React.FC<VictoryChartProps> = (initialProps) => {
   const propsWithDefaults = React.useMemo(
-    () => ({ ...defaultProps, ...initialProps }),
+    () => defaults({}, initialProps, defaultProps),
     [initialProps],
   );
   const role = "chart";

diff --git a/packages/victory-core/src/victory-label/victory-label.tsx b/packages/victory-core/src/victory-label/victory-label.tsx
@@ -584,7 +584,7 @@ export const VictoryLabel: {
   role: string;
   defaultStyles: typeof defaultStyles;
 } & React.FC<VictoryLabelProps> = (initialProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
 
   if (props.text === null || props.text === undefined) {
     return null;

diff --git a/packages/victory-core/src/victory-primitives/arc.tsx b/packages/victory-core/src/victory-primitives/arc.tsx
@@ -1,5 +1,7 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2, 180] }]*/
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 import { Path } from "./path";
@@ -65,7 +67,7 @@ const defaultProps = {
 };
 
 export const Arc = (initialProps: ArcProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
 
   return React.cloneElement(props.pathComponent!, {
     ...props.events,

diff --git a/packages/victory-core/src/victory-primitives/background.tsx b/packages/victory-core/src/victory-primitives/background.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 import { Rect } from "./rect";
@@ -33,7 +35,7 @@ const defaultProps = {
 };
 
 export const Background = (initialProps: BackgroundProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
 
   return props.polar
     ? React.cloneElement(props.circleComponent!, {

diff --git a/packages/victory-core/src/victory-primitives/border.tsx b/packages/victory-core/src/victory-primitives/border.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 import { Rect } from "./rect";
@@ -39,7 +41,7 @@ const defaultProps = {
 };
 
 export const Border = (initialProps: BorderProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
 
   return React.cloneElement(props.rectComponent!, {
     ...props.events,

diff --git a/packages/victory-core/src/victory-primitives/line-segment.tsx b/packages/victory-core/src/victory-primitives/line-segment.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 import { Line } from "./line";
@@ -40,7 +42,7 @@ const defaultProps = {
 };
 
 export const LineSegment = (initialProps: LineSegmentProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
 
   return React.cloneElement(props.lineComponent!, {
     ...props.events,

diff --git a/packages/victory-core/src/victory-primitives/point.tsx b/packages/victory-core/src/victory-primitives/point.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import * as pathHelpers from "../victory-util/point-path-helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
@@ -68,7 +70,7 @@ const defaultProps = {
 };
 
 export const Point = (initialProps: PointProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const userProps = UserProps.getSafeUserProps(props);
 
   return React.cloneElement(props.pathComponent!, {

diff --git a/packages/victory-core/src/victory-primitives/whisker.tsx b/packages/victory-core/src/victory-primitives/whisker.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import * as Helpers from "../victory-util/helpers";
 import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 import { Line } from "./line";
@@ -43,7 +45,7 @@ const defaultProps = {
 };
 
 export const Whisker = (initialProps: WhiskerProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const {
     ariaLabel,
     groupComponent,

diff --git a/packages/victory-errorbar/src/error-bar.tsx b/packages/victory-errorbar/src/error-bar.tsx
@@ -1,5 +1,7 @@
 /* eslint-disable max-statements */
 import React from "react";
+import { defaults } from "lodash";
+
 import {
   Helpers,
   Line,
@@ -116,7 +118,7 @@ const defaultProps = {
 export const ErrorBar = (
   initialProps: ErrorBarProps & typeof ErrorBar.default,
 ) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const { groupComponent } = props;
   const userProps = UserProps.getSafeUserProps(props);
   const { tabIndex, ariaLabel } = props;

diff --git a/packages/victory-group/src/victory-group.tsx b/packages/victory-group/src/victory-group.tsx
@@ -66,7 +66,7 @@ const VictoryGroupBase: React.FC<VictoryGroupProps> = (initialProps) => {
   const { getAnimationProps, setAnimationState, getProps } =
     Hooks.useAnimationState();
   const propsWithDefaults = React.useMemo(
-    () => ({ ...defaultProps, ...initialProps }),
+    () => defaults({}, initialProps, defaultProps),
     [initialProps],
   );
   const props = getProps(propsWithDefaults);

diff --git a/packages/victory-line/src/curve.tsx b/packages/victory-line/src/curve.tsx
@@ -1,5 +1,7 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import React from "react";
+import { defaults } from "lodash";
+
 import {
   Helpers,
   Path,
@@ -39,7 +41,7 @@ const defaultProps = {
 };
 
 export const Curve: React.FC<CurveProps> = (initialProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const userProps = UserProps.getSafeUserProps(props);
   const { polar, origin } = props;
   const lineFunction = LineHelpers.getLineFunction(props);

diff --git a/packages/victory-native/src/helpers/wrap-core-component.tsx b/packages/victory-native/src/helpers/wrap-core-component.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { defaults } from "lodash";
 
 /**
  * Wrap a core component, pass props through.
@@ -11,7 +12,7 @@ export function wrapCoreComponent<TProps extends object>({
   defaultProps: TProps;
 }) {
   const WrappedComponent = (props: TProps) => {
-    const propsWithDefaults = { ...defaultProps, ...props };
+    const propsWithDefaults = defaults({}, props, defaultProps);
     return <Component {...propsWithDefaults} />;
   };
 

diff --git a/packages/victory-pie/src/slice.tsx b/packages/victory-pie/src/slice.tsx
@@ -115,7 +115,7 @@ const defaultProps: SliceProps = {
 };
 
 export const Slice = (initialProps: SliceProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const defaultTransform = props.origin
     ? `translate(${props.origin.x}, ${props.origin.y})`
     : undefined;

diff --git a/packages/victory-stack/src/victory-stack.tsx b/packages/victory-stack/src/victory-stack.tsx
@@ -60,7 +60,7 @@ const defaultProps = {
 const VictoryStackBase = (initialProps: VictoryStackProps) => {
   const { role } = VictoryStack;
   const propsWithDefaults = React.useMemo(
-    () => ({ ...defaultProps, ...initialProps }),
+    () => defaults({}, initialProps, defaultProps),
     [initialProps],
   );
   const { setAnimationState, getAnimationProps, getProps } =

diff --git a/packages/victory-tooltip/src/flyout.tsx b/packages/victory-tooltip/src/flyout.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import {
   Helpers,
   Path,
@@ -142,7 +144,7 @@ const defaultProps = {
 };
 
 export const Flyout: React.FC<FlyoutProps> = (initialProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const userProps = UserProps.getSafeUserProps(props);
 
   // check for required props for this subcomponent

diff --git a/packages/victory-voronoi/src/voronoi.tsx b/packages/victory-voronoi/src/voronoi.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { defaults } from "lodash";
+
 import {
   Helpers,
   ClipPath,
@@ -55,7 +57,7 @@ const defaultProps = {
 };
 
 export const Voronoi = (initialProps: VoronoiProps) => {
-  const props = evaluateProps({ ...defaultProps, ...initialProps });
+  const props = evaluateProps(defaults({}, initialProps, defaultProps));
   const {
     ariaLabel,
     role,