victory-core 36.4.0 → 36.5.1

package/src/victory-label/{victory-label.js → victory-label.tsx}

@@ -2,23 +2,76 @@
 import { assign, defaults, isEmpty } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
-import VictoryPortal from "../victory-portal/victory-portal";
-import Rect from "../victory-primitives/rect";
-import Text from "../victory-primitives/text";
-import TSpan from "../victory-primitives/tspan";
+import { VictoryPortal } from "../victory-portal/victory-portal";
+import { Rect } from "../victory-primitives/rect";
+import { Text } from "../victory-primitives/text";
+import { TSpan } from "../victory-primitives/tspan";
 import * as Helpers from "../victory-util/helpers";
 import * as LabelHelpers from "../victory-util/label-helpers";
 import * as Log from "../victory-util/log";
 import * as CustomPropTypes from "../victory-util/prop-types";
 import * as Style from "../victory-util/style";
 import * as TextSize from "../victory-util/textsize";
+import * as UserProps from "../victory-util/user-props";
+import {
+  NumberOrCallback,
+  StringOrCallback,
+  StringOrNumberOrCallback,
+} from "../types/callbacks";
+import {
+  PaddingProps,
+  VerticalAnchorType,
+  VictoryLabelStyleObject,
+} from "../victory-theme/victory-theme";
+
+export type TextAnchorType = "start" | "middle" | "end" | "inherit";
+export type OriginType = { x: number; y: number };
+export type LabelOrientationType = "parallel" | "perpendicular" | "vertical";
+
+export interface VictoryLabelProps {
+  angle?: StringOrNumberOrCallback;
+  ariaLabel?: StringOrCallback;
+  backgroundComponent?: React.ReactElement;
+  backgroundStyle?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  backgroundPadding?: PaddingProps | PaddingProps[];
+  capHeight?: StringOrNumberOrCallback;
+  children?: StringOrNumberOrCallback;
+  className?: string;
+  datum?: object;
+  data?: any[];
+  desc?: string;
+  direction?: string;
+  disableInlineStyles?: boolean;
+  events?: React.DOMAttributes<any>;
+  groupComponent?: React.ReactElement;
+  id?: StringOrNumberOrCallback;
+  inline?: boolean;
+  labelPlacement?: LabelOrientationType;
+  lineHeight?: StringOrNumberOrCallback | (string | number)[];
+  origin?: OriginType;
+  polar?: boolean;
+  renderInPortal?: boolean;
+  style?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  tabIndex?: NumberOrCallback;
+  text?: string[] | StringOrNumberOrCallback;
+  textComponent?: React.ReactElement;
+  textAnchor?: TextAnchorType | { (): TextAnchorType };
+  title?: string;
+  transform?: string | object | (() => string | object);
+  tspanComponent?: React.ReactElement;
+  verticalAnchor?: VerticalAnchorType | { (): VerticalAnchorType };
+  x?: number;
+  y?: number;
+  dx?: StringOrNumberOrCallback;
+  dy?: StringOrNumberOrCallback;
+}
 
 const defaultStyles = {
   fill: "#252525",
   fontSize: 14,
   fontFamily:
     "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
-  stroke: "transparent"
+  stroke: "transparent",
 };
 
 const getPosition = (props, dimension) => {
@@ -47,7 +100,7 @@ const getFontSize = (style) => {
   return defaultStyles.fontSize;
 };
 
-const getSingleValue = (prop, index = 0) => {
+const getSingleValue = <T,>(prop: T | T[], index = 0): T => {
   return Array.isArray(prop) ? prop[index] || prop[0] : prop;
 };
 
@@ -64,7 +117,7 @@ const getStyles = (style, props) => {
     const baseStyles = Helpers.evaluateStyle(style, props);
     return {
       // Font size is necessary to calculate the y position of the label
-      fontSize: getFontSize(baseStyles)
+      fontSize: getFontSize(baseStyles),
     };
   }
   const getSingleStyle = (s) => {
@@ -130,10 +183,10 @@ const getDy = (props, verticalAnchor, lineHeight) => {
     ? Helpers.evaluateProp(verticalAnchor, props)
     : "middle";
   const fontSizes = [...Array(length).keys()].map(
-    (i) => getSingleValue(props.style, i).fontSize
+    (i) => getSingleValue(props.style, i).fontSize,
   );
   const lineHeights = [...Array(length).keys()].map((i) =>
-    getSingleValue(lineHeight, i)
+    getSingleValue(lineHeight, i),
   );
 
   if (anchor === "start") {
@@ -220,7 +273,7 @@ const getFullBackground = (calculatedProps, tspanValues) => {
     backgroundStyle,
     inline,
     backgroundPadding,
-    capHeight
+    capHeight,
   } = calculatedProps;
   const textSizes = tspanValues.map((tspan) => {
     return tspan.textSize;
@@ -254,12 +307,12 @@ const getFullBackground = (calculatedProps, tspanValues) => {
     x: inline
       ? xCoordinate - backgroundPadding.left
       : xCoordinate + dx - backgroundPadding.left,
-    y: yCoordinate
+    y: yCoordinate,
   };
 
   return React.cloneElement(
     backgroundComponent,
-    defaults({}, backgroundComponent.props, backgroundProps)
+    defaults({}, backgroundComponent.props, backgroundProps),
   );
 };
 
@@ -298,7 +351,7 @@ const getChildBackgrounds = (calculatedProps, tspanValues) => {
     backgroundPadding,
     backgroundComponent,
     inline,
-    y
+    y,
   } = calculatedProps;
 
   const textElements = tspanValues.map((current, i) => {
@@ -325,14 +378,14 @@ const getChildBackgrounds = (calculatedProps, tspanValues) => {
         labelSize.width + padding.left + padding.right + xOffset,
       y,
       fontSize: current.fontSize,
-      dy: childDy
+      dy: childDy,
     };
   });
 
   return textElements.map((textElement, i) => {
     const xCoordinate = getXCoordinate(
       calculatedProps,
-      textElement.labelSize.width
+      textElement.labelSize.width,
     );
     const yCoordinate = textElements.slice(0, i + 1).reduce((prev, curr) => {
       return prev + curr.dy;
@@ -354,12 +407,12 @@ const getChildBackgrounds = (calculatedProps, tspanValues) => {
       width: textElement.widthWithPadding,
       transform,
       x: xCoord - padding.left,
-      y: yCoord
+      y: yCoord,
     };
 
     return React.cloneElement(
       backgroundComponent,
-      defaults({}, backgroundComponent.props, backgroundProps)
+      defaults({}, backgroundComponent.props, backgroundProps),
     );
   });
 };
@@ -417,10 +470,10 @@ const evaluateProps = (props) => {
   const style = getStyles(props.style, assign({}, props, { text }));
   const backgroundStyle = getBackgroundStyles(
     props.backgroundStyle,
-    assign({}, props, { text, style })
+    assign({}, props, { text, style }),
   );
   const backgroundPadding = getBackgroundPadding(
-    assign({}, props, { text, style, backgroundStyle })
+    assign({}, props, { text, style, backgroundStyle }),
   );
   const id = Helpers.evaluateProp(props.id, props);
   return assign({}, props, {
@@ -428,13 +481,13 @@ const evaluateProps = (props) => {
     backgroundPadding,
     style,
     text,
-    id
+    id,
   });
 };
 
-const getCalculatedProps = (props) => {
+const getCalculatedProps = <T extends VictoryLabelProps>(props: T) => {
   const ariaLabel = Helpers.evaluateProp(props.ariaLabel, props);
-  const style = getSingleValue(props.style);
+  const style = getSingleValue(props.style!);
   const lineHeight = getLineHeight(props);
   const direction = props.direction
     ? Helpers.evaluateProp(props.direction, props)
@@ -462,7 +515,7 @@ const getCalculatedProps = (props) => {
     originalDy: props.dy,
     transform,
     x,
-    y
+    y,
   });
 };
 
@@ -485,8 +538,9 @@ const renderLabel = (calculatedProps, tspanValues) => {
     id,
     tabIndex,
     tspanComponent,
-    textComponent
+    textComponent,
   } = calculatedProps;
+  const userProps = UserProps.getSafeUserProps(calculatedProps);
 
   const textProps = {
     "aria-label": ariaLabel,
@@ -501,7 +555,8 @@ const renderLabel = (calculatedProps, tspanValues) => {
     title,
     desc: Helpers.evaluateProp(desc, calculatedProps),
     tabIndex: Helpers.evaluateProp(tabIndex, calculatedProps),
-    id
+    id,
+    ...userProps,
   };
 
   const tspans = text.map((line, i) => {
@@ -513,7 +568,7 @@ const renderLabel = (calculatedProps, tspanValues) => {
       dy: getTSpanDy(tspanValues, calculatedProps, i),
       textAnchor: currentStyle.textAnchor || textAnchor,
       style: currentStyle,
-      children: line
+      children: line,
     };
     return React.cloneElement(tspanComponent, tspanProps);
   });
@@ -521,21 +576,25 @@ const renderLabel = (calculatedProps, tspanValues) => {
   return React.cloneElement(textComponent, textProps, tspans);
 };
 
-const VictoryLabel = (props) => {
+export const VictoryLabel: {
+  role: string;
+  defaultStyles: typeof defaultStyles;
+} & React.FC<VictoryLabelProps> = (props) => {
   props = evaluateProps(props);
 
   if (props.text === null || props.text === undefined) {
     return null;
   }
   const calculatedProps = getCalculatedProps(props);
+
   const { text, style, capHeight, backgroundPadding, lineHeight } =
     calculatedProps;
 
-  const tspanValues = text.map((line, i) => {
-    const currentStyle = getSingleValue(style, i);
+  const tspanValues = (text as string[]).map((line, i) => {
+    const currentStyle = getSingleValue(style!, i);
     const capHeightPx = TextSize.convertLengthToPixels(
       `${capHeight}em`,
-      currentStyle.fontSize
+      currentStyle.fontSize as number,
     );
     const currentLineHeight = getSingleValue(lineHeight, i);
     return {
@@ -543,9 +602,10 @@ const VictoryLabel = (props) => {
       fontSize: currentStyle.fontSize || defaultStyles.fontSize,
       capHeight: capHeightPx,
       text: line,
+      // @ts-expect-error TODO: This looks like a bug:
       textSize: TextSize.approximateTextSize(line, currentStyle),
       lineHeight: currentLineHeight,
-      backgroundPadding: getSingleValue(backgroundPadding, i)
+      backgroundPadding: getSingleValue(backgroundPadding, i),
     };
   });
 
@@ -554,13 +614,13 @@ const VictoryLabel = (props) => {
   if (props.backgroundStyle) {
     const backgroundElement = getBackgroundElement(
       calculatedProps,
-      tspanValues
+      tspanValues,
     );
     const children = [backgroundElement, label];
     const backgroundWithLabel = React.cloneElement(
-      props.groupComponent,
+      props.groupComponent!,
       {},
-      children
+      children,
     );
 
     return props.renderInPortal ? (
@@ -581,24 +641,25 @@ VictoryLabel.propTypes = {
   angle: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-    PropTypes.func
+    PropTypes.func,
   ]),
   ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   backgroundComponent: PropTypes.element,
   backgroundPadding: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.object,
-    PropTypes.array
+    PropTypes.array,
   ]),
   backgroundStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   capHeight: PropTypes.oneOfType([
     PropTypes.string,
     CustomPropTypes.nonNegative,
-    PropTypes.func
+    PropTypes.func,
   ]),
   className: PropTypes.string,
   data: PropTypes.array,
   datum: PropTypes.any,
+  // @ts-expect-error "Function is not assignable to string"
   desc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   direction: PropTypes.oneOf(["rtl", "ltr", "inherit"]),
   dx: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
@@ -613,17 +674,17 @@ VictoryLabel.propTypes = {
     PropTypes.string,
     CustomPropTypes.nonNegative,
     PropTypes.func,
-    PropTypes.array
+    PropTypes.array,
   ]),
   origin: PropTypes.shape({
-    x: CustomPropTypes.nonNegative,
-    y: CustomPropTypes.nonNegative
+    x: CustomPropTypes.nonNegative.isRequired,
+    y: CustomPropTypes.nonNegative.isRequired,
   }),
   polar: PropTypes.bool,
   renderInPortal: PropTypes.bool,
   scale: PropTypes.shape({
     x: CustomPropTypes.scale,
-    y: CustomPropTypes.scale
+    y: CustomPropTypes.scale,
   }),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
@@ -631,26 +692,30 @@ VictoryLabel.propTypes = {
     PropTypes.string,
     PropTypes.number,
     PropTypes.func,
-    PropTypes.array
+    PropTypes.array,
   ]),
+  // @ts-expect-error Function is not assignable to string"
   textAnchor: PropTypes.oneOfType([
     PropTypes.oneOf(["start", "middle", "end", "inherit"]),
-    PropTypes.func
+    PropTypes.func,
   ]),
   textComponent: PropTypes.element,
   title: PropTypes.string,
   transform: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
-    PropTypes.func
+    PropTypes.func,
   ]),
   tspanComponent: PropTypes.element,
+  // @ts-expect-error Function is not assignable to string"
   verticalAnchor: PropTypes.oneOfType([
     PropTypes.oneOf(["start", "middle", "end"]),
-    PropTypes.func
+    PropTypes.func,
   ]),
+  // @ts-expect-error Number is not assignable to string
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  // @ts-expect-error Number is not assignable to string
+  y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 VictoryLabel.defaultProps = {
@@ -660,7 +725,5 @@ VictoryLabel.defaultProps = {
   textComponent: <Text />,
   tspanComponent: <TSpan />,
   capHeight: 0.71, // Magic number from d3.
-  lineHeight: 1
+  lineHeight: 1,
 };
-
-export default VictoryLabel;

package/src/victory-portal/portal-context.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+export interface PortalContextValue {
+  portalRegister(): number;
+  portalUpdate(key: number, element: React.ReactElement): void;
+  portalDeregister(key: number): void;
+}
+
+/**
+ * The React context object consumers may use to access the context of the
+ * portal.
+ */
+export const PortalContext = React.createContext({} as PortalContextValue);
+PortalContext.displayName = "PortalContext";

package/src/victory-portal/{portal.js → portal.tsx}

@@ -2,8 +2,20 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as CustomPropTypes from "../victory-util/prop-types";
 import { keys } from "lodash";
+import { PortalContextValue } from "./portal-context";
+
+export interface PortalProps {
+  className?: string;
+  height?: number;
+  style?: React.CSSProperties;
+  viewBox?: string;
+  width?: number;
+}
 
-export default class Portal extends React.Component {
+export class Portal
+  extends React.Component<PortalProps>
+  implements PortalContextValue
+{
   static displayName = "Portal";
 
   static propTypes = {
@@ -11,33 +23,32 @@ export default class Portal extends React.Component {
     height: CustomPropTypes.nonNegative,
     style: PropTypes.object,
     viewBox: PropTypes.string,
-    width: CustomPropTypes.nonNegative
+    width: CustomPropTypes.nonNegative,
   };
+  private readonly map: Record<string, React.ReactElement>;
+  private index: number;
 
-  constructor(props) {
+  constructor(props: PortalProps) {
     super(props);
     this.map = {};
     this.index = 1;
-    this.portalUpdate = this.portalUpdate.bind(this);
-    this.portalRegister = this.portalRegister.bind(this);
-    this.portalDeregister = this.portalDeregister.bind(this);
   }
 
-  portalRegister() {
+  public portalRegister = (): number => {
     return ++this.index;
-  }
+  };
 
-  portalUpdate(key, element) {
+  public portalUpdate = (key: number, element: React.ReactElement) => {
     this.map[key] = element;
     this.forceUpdate();
-  }
+  };
 
-  portalDeregister(key) {
+  public portalDeregister = (key: number) => {
     delete this.map[key];
     this.forceUpdate();
-  }
+  };
 
-  getChildren() {
+  private getChildren() {
     return keys(this.map).map((key) => {
       const el = this.map[key];
       return el ? React.cloneElement(el, { key }) : el;

package/src/victory-portal/{victory-portal.js → victory-portal.tsx}

@@ -3,23 +3,36 @@ import PropTypes from "prop-types";
 import { defaults } from "lodash";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
-import PortalContext from "./portal-context";
+import { PortalContext } from "./portal-context";
 
-export default class VictoryPortal extends React.Component {
+export interface VictoryPortalProps {
+  children?: React.ReactElement;
+  groupComponent?: React.ReactElement;
+}
+
+export interface VictoryPortal {
+  context: React.ContextType<typeof PortalContext>;
+}
+
+export class VictoryPortal extends React.Component<VictoryPortalProps> {
   static displayName = "VictoryPortal";
 
   static role = "portal";
 
   static propTypes = {
     children: PropTypes.node,
-    groupComponent: PropTypes.element
+    groupComponent: PropTypes.element,
   };
 
   static defaultProps = {
-    groupComponent: <g />
+    groupComponent: <g />,
   };
 
   static contextType = PortalContext;
+  private checkedContext!: boolean;
+  private renderInPlace!: boolean;
+  private element!: React.ReactElement;
+  private portalKey!: number;
 
   componentDidMount() {
     if (!this.checkedContext) {
@@ -49,7 +62,7 @@ export default class VictoryPortal extends React.Component {
   }
 
   // Overridden in victory-core-native
-  renderPortal(child) {
+  renderPortal(child: React.ReactElement) {
     if (this.renderInPlace) {
       return child;
     }
@@ -58,9 +71,11 @@ export default class VictoryPortal extends React.Component {
   }
 
   render() {
-    const children = Array.isArray(this.props.children)
-      ? this.props.children[0]
-      : this.props.children;
+    const children = (
+      Array.isArray(this.props.children)
+        ? this.props.children[0]
+        : this.props.children
+    ) as React.ReactElement;
     const { groupComponent } = this.props;
     const childProps = (children && children.props) || {};
     const standardProps = childProps.groupComponent
@@ -69,7 +84,7 @@ export default class VictoryPortal extends React.Component {
     const newProps = defaults(
       standardProps,
       childProps,
-      Helpers.omit(this.props, ["children", "groupComponent"])
+      Helpers.omit(this.props, ["children", "groupComponent"]),
     );
     const child = children && React.cloneElement(children, newProps);
     return this.renderPortal(child);

package/src/victory-primitives/{arc.js → arc.tsx}

@@ -3,8 +3,22 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as Helpers from "../victory-util/helpers";
 import { assign } from "lodash";
-import * as CommonProps from "../victory-util/common-props";
-import Path from "./path";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import { Path } from "./path";
+
+export interface ArcProps extends VictoryCommonPrimitiveProps {
+  closedPath?: boolean;
+  cx?: number;
+  cy?: number;
+  datum?: any;
+  endAngle?: number;
+  pathComponent?: React.ReactElement;
+  r?: number;
+  startAngle?: number;
+}
 
 const getArcPath = (props) => {
   const { cx, cy, r, startAngle, endAngle, closedPath } = props;
@@ -41,17 +55,17 @@ const evaluateProps = (props) => {
   const id = Helpers.evaluateProp(props.id, props);
   const style = Helpers.evaluateStyle(
     assign({ stroke: "black", fill: "none" }, props.style),
-    props
+    props,
   );
   const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
 
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const Arc = (props) => {
+export const Arc = (props: ArcProps) => {
   props = evaluateProps(props);
 
-  return React.cloneElement(props.pathComponent, {
+  return React.cloneElement(props.pathComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     d: getArcPath(props),
@@ -62,7 +76,7 @@ const Arc = (props) => {
     role: props.role,
     shapeRendering: props.shapeRendering,
     transform: props.transform,
-    clipPath: props.clipPath
+    clipPath: props.clipPath,
   });
 };
 
@@ -75,13 +89,11 @@ Arc.propTypes = {
   endAngle: PropTypes.number,
   pathComponent: PropTypes.element,
   r: PropTypes.number,
-  startAngle: PropTypes.number
+  startAngle: PropTypes.number,
 };
 
 Arc.defaultProps = {
   pathComponent: <Path />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default Arc;

package/src/victory-primitives/{background.js → background.tsx}

@@ -2,9 +2,23 @@ import React from "react";
 import PropTypes from "prop-types";
 import { assign } from "lodash";
 import * as Helpers from "../victory-util/helpers";
-import * as CommonProps from "../victory-util/common-props";
-import Rect from "./rect";
-import Circle from "./circle";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import { Rect } from "./rect";
+import { Circle } from "./circle";
+
+export interface BackgroundProps extends VictoryCommonPrimitiveProps {
+  circleComponent?: React.ReactElement;
+  height?: number;
+  rectComponent?: React.ReactElement;
+  rx?: number;
+  ry?: number;
+  width?: number;
+  x?: number;
+  y?: number;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -16,11 +30,11 @@ const evaluateProps = (props) => {
   return assign({}, props, { id });
 };
 
-const Background = (props) => {
+export const Background = (props: BackgroundProps) => {
   props = evaluateProps(props);
 
   return props.polar
-    ? React.cloneElement(props.circleComponent, {
+    ? React.cloneElement(props.circleComponent!, {
         ...props.events,
         style: props.style,
         role: props.role,
@@ -28,9 +42,9 @@ const Background = (props) => {
         cx: props.x,
         cy: props.y,
         r: props.height,
-        className: props.className
+        className: props.className,
       })
-    : React.cloneElement(props.rectComponent, {
+    : React.cloneElement(props.rectComponent!, {
         ...props.events,
         style: props.style,
         role: props.role,
@@ -41,7 +55,7 @@ const Background = (props) => {
         ry: props.ry,
         width: props.width,
         height: props.height,
-        className: props.className
+        className: props.className,
       });
 };
 
@@ -54,14 +68,12 @@ Background.propTypes = {
   ry: PropTypes.number,
   width: PropTypes.number,
   x: PropTypes.number,
-  y: PropTypes.number
+  y: PropTypes.number,
 };
 
 Background.defaultProps = {
   circleComponent: <Circle />,
   rectComponent: <Rect />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default Background;