victory-core 36.3.2 → 36.5.0

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

@@ -1,12 +1,89 @@
 /*global setTimeout:false */
 import React from "react";
 import PropTypes from "prop-types";
-import * as d3Ease from "d3-ease";
+import * as d3Ease from "victory-vendor/d3-ease";
 import { victoryInterpolator } from "./util";
 import TimerContext from "../victory-util/timer-context";
 import isEqual from "react-fast-compare";
+import type Timer from "../victory-util/timer";
 
-export default class VictoryAnimation extends React.Component {
+/**
+ * Single animation object to interpolate
+ */
+export type AnimationStyle = { [key: string]: string | number };
+/**
+ * Animation styles to interpolate
+ */
+
+export type AnimationData = AnimationStyle | AnimationStyle[];
+export type AnimationEasing =
+  | "back"
+  | "backIn"
+  | "backOut"
+  | "backInOut"
+  | "bounce"
+  | "bounceIn"
+  | "bounceOut"
+  | "bounceInOut"
+  | "circle"
+  | "circleIn"
+  | "circleOut"
+  | "circleInOut"
+  | "linear"
+  | "linearIn"
+  | "linearOut"
+  | "linearInOut"
+  | "cubic"
+  | "cubicIn"
+  | "cubicOut"
+  | "cubicInOut"
+  | "elastic"
+  | "elasticIn"
+  | "elasticOut"
+  | "elasticInOut"
+  | "exp"
+  | "expIn"
+  | "expOut"
+  | "expInOut"
+  | "poly"
+  | "polyIn"
+  | "polyOut"
+  | "polyInOut"
+  | "quad"
+  | "quadIn"
+  | "quadOut"
+  | "quadInOut"
+  | "sin"
+  | "sinIn"
+  | "sinOut"
+  | "sinInOut";
+
+export interface VictoryAnimationProps {
+  children: (style: AnimationStyle, info: AnimationInfo) => React.ReactNode;
+  duration?: number;
+  easing?: AnimationEasing;
+  delay?: number;
+  onEnd?: () => void;
+  data: AnimationData;
+}
+export interface VictoryAnimationState {
+  data: AnimationStyle;
+  animationInfo: AnimationInfo;
+}
+export interface AnimationInfo {
+  progress: number;
+  animating: boolean;
+  terminating?: boolean;
+}
+
+export interface VictoryAnimation {
+  context: React.ContextType<typeof TimerContext>;
+}
+
+export class VictoryAnimation extends React.Component<
+  VictoryAnimationProps,
+  VictoryAnimationState
+> {
   static displayName = "VictoryAnimation";
 
   static propTypes = {
@@ -67,6 +144,11 @@ export default class VictoryAnimation extends React.Component {
   };
 
   static contextType = TimerContext;
+  private interpolator: null | ((value: number) => AnimationStyle);
+  private queue: AnimationStyle[];
+  private ease: any;
+  private timer: Timer;
+  private loopID?: number;
 
   constructor(props, context) {
     super(props, context);
@@ -84,11 +166,6 @@ export default class VictoryAnimation extends React.Component {
     this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
     /* build easing function */
     this.ease = d3Ease[this.toNewName(this.props.easing)];
-    /*
-      There is no autobinding of this in ES6 classes
-      so we bind functionToBeRunEachFrame to current instance of victory animation class
-    */
-    this.functionToBeRunEachFrame = this.functionToBeRunEachFrame.bind(this);
     this.timer = this.context.animationTimer;
   }
 
@@ -163,13 +240,13 @@ export default class VictoryAnimation extends React.Component {
         setTimeout(() => {
           this.loopID = this.timer.subscribe(
             this.functionToBeRunEachFrame,
-            this.props.duration
+            this.props.duration!
           );
         }, this.props.delay);
       } else {
         this.loopID = this.timer.subscribe(
           this.functionToBeRunEachFrame,
-          this.props.duration
+          this.props.duration!
         );
       }
     } else if (this.props.onEnd) {
@@ -177,7 +254,7 @@ export default class VictoryAnimation extends React.Component {
     }
   }
   /* every frame we... */
-  functionToBeRunEachFrame(elapsed, duration) {
+  functionToBeRunEachFrame = (elapsed, duration) => {
     /*
       step can generate imprecise values, sometimes greater than 1
       if this happens set the state to 1 and return, cancelling the timer
@@ -186,7 +263,7 @@ export default class VictoryAnimation extends React.Component {
     const step = duration ? elapsed / duration : 1;
     if (step >= 1) {
       this.setState({
-        data: this.interpolator(1),
+        data: this.interpolator!(1),
         animationInfo: {
           progress: 1,
           animating: false,
@@ -206,13 +283,13 @@ export default class VictoryAnimation extends React.Component {
       interpolator, which is cached for performance whenever props are received
     */
     this.setState({
-      data: this.interpolator(this.ease(step)),
+      data: this.interpolator!(this.ease(step)),
       animationInfo: {
         progress: step,
         animating: step < 1
       }
     });
-  }
+  };
 
   render() {
     return this.props.children(this.state.data, this.state.animationInfo);

package/src/victory-clip-container/{victory-clip-container.js → victory-clip-container.tsx}

@@ -2,12 +2,36 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as CustomPropTypes from "../victory-util/prop-types";
 import * as Helpers from "../victory-util/helpers";
+import * as UserProps from "../victory-util/user-props";
 import { assign, defaults, isObject, uniqueId } from "lodash";
-import ClipPath from "../victory-primitives/clip-path";
-import Circle from "../victory-primitives/circle";
-import Rect from "../victory-primitives/rect";
+import { ClipPath } from "../victory-primitives/clip-path";
+import { Circle } from "../victory-primitives/circle";
+import { Rect } from "../victory-primitives/rect";
 
-export default class VictoryClipContainer extends React.Component {
+import { BlockProps } from "../victory-theme/victory-theme";
+import { OriginType } from "../victory-label/victory-label";
+
+export interface VictoryClipContainerProps {
+  "aria-label"?: string;
+  children?: React.ReactElement | React.ReactElement[];
+  circleComponent?: React.ReactElement;
+  className?: string;
+  clipHeight?: number;
+  clipId?: number | string;
+  clipPadding?: BlockProps;
+  clipPathComponent?: React.ReactElement;
+  clipWidth?: number;
+  events?: React.DOMAttributes<any>;
+  groupComponent?: React.ReactElement;
+  origin?: OriginType;
+  polar?: boolean;
+  radius?: number;
+  rectComponent?: React.ReactElement;
+  translateX?: number;
+  translateY?: number;
+}
+
+export class VictoryClipContainer extends React.Component<VictoryClipContainerProps> {
   static displayName = "VictoryClipContainer";
   static role = "container";
   static propTypes = {
@@ -49,8 +73,9 @@ export default class VictoryClipContainer extends React.Component {
     clipPathComponent: <ClipPath />,
     groupComponent: <g />
   };
+  private clipId: VictoryClipContainerProps["clipId"];
 
-  constructor(props) {
+  constructor(props: VictoryClipContainerProps) {
     super(props);
     this.clipId =
       !isObject(props) || props.clipId === undefined
@@ -84,6 +109,7 @@ export default class VictoryClipContainer extends React.Component {
   }
 
   renderClippedGroup(props, clipId) {
+    const userProps = UserProps.getSafeUserProps(props);
     const {
       style,
       events,
@@ -106,7 +132,7 @@ export default class VictoryClipContainer extends React.Component {
     );
     return React.cloneElement(
       groupComponent,
-      { ...groupProps, "aria-label": props["aria-label"], tabIndex },
+      { ...groupProps, tabIndex, ...userProps },
       [clipComponent, ...React.Children.toArray(children)]
     );
   }

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

@@ -2,13 +2,48 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as CustomPropTypes from "../victory-util/prop-types";
 import { assign, defaults, uniqueId, isObject, isFunction } from "lodash";
-import Portal from "../victory-portal/portal";
-import PortalContext from "../victory-portal/portal-context";
+import { Portal } from "../victory-portal/portal";
+import { PortalContext } from "../victory-portal/portal-context";
 import TimerContext from "../victory-util/timer-context";
 import * as Helpers from "../victory-util/helpers";
 import * as UserProps from "../victory-util/user-props";
+import { OriginType } from "../victory-label/victory-label";
+import { D3Scale } from "../victory-util/types";
+import { VictoryThemeDefinition } from "../victory-theme/victory-theme-definition";
 
-export default class VictoryContainer extends React.Component {
+export interface VictoryContainerProps {
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  children?: React.ReactElement | React.ReactElement[];
+  className?: string;
+  containerId?: number | string;
+  containerRef?: React.Ref<HTMLElement>;
+  desc?: string;
+  events?: React.DOMAttributes<any>;
+  height?: number;
+  name?: string;
+  origin?: OriginType;
+  ouiaId?: number | string;
+  ouiaSafe?: boolean;
+  ouiaType?: string;
+  polar?: boolean;
+  portalComponent?: React.ReactElement;
+  portalZIndex?: number;
+  preserveAspectRatio?: string;
+  responsive?: boolean;
+  role?: string;
+  scale?: {
+    x?: D3Scale;
+    y?: D3Scale;
+  };
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  theme?: VictoryThemeDefinition;
+  title?: string;
+  width?: number;
+}
+
+export class VictoryContainer extends React.Component<VictoryContainerProps> {
   static displayName = "VictoryContainer";
   static role = "container";
   static propTypes = {
@@ -54,34 +89,39 @@ export default class VictoryContainer extends React.Component {
   };
 
   static contextType = TimerContext;
+  private containerId: VictoryContainerProps["containerId"];
+  // @ts-expect-error Ref will be initialized on mount
+  private portalRef: Portal;
+  // @ts-expect-error Ref will be initialized on mount
+  private containerRef: HTMLElement;
+  private shouldHandleWheel: boolean;
 
-  constructor(props) {
+  constructor(props: VictoryContainerProps) {
     super(props);
     this.containerId =
       !isObject(props) || props.containerId === undefined
         ? uniqueId("victory-container-")
         : props.containerId;
-    this.savePortalRef = (portal) => {
-      this.portalRef = portal;
-      return portal;
-    };
-    this.portalUpdate = (key, el) => this.portalRef.portalUpdate(key, el);
-    this.portalRegister = () => this.portalRef.portalRegister();
-    this.portalDeregister = (key) => this.portalRef.portalDeregister(key);
-
-    this.saveContainerRef =
-      props && isFunction(props.containerRef)
-        ? props.containerRef
-        : (container) => {
-            this.containerRef = container;
-            return container;
-          };
-
-    this.shouldHandleWheel = props && props.events && props.events.onWheel;
-    if (this.shouldHandleWheel) {
-      this.handleWheel = (e) => e.preventDefault();
-    }
+
+    this.shouldHandleWheel = !!(props && props.events && props.events.onWheel);
   }
+  savePortalRef = (portal) => {
+    this.portalRef = portal;
+    return portal;
+  };
+  portalUpdate = (key, el) => this.portalRef.portalUpdate(key, el);
+  portalRegister = () => this.portalRef.portalRegister();
+  portalDeregister = (key) => this.portalRef.portalDeregister(key);
+
+  saveContainerRef = (container: HTMLElement) => {
+    if (isFunction(this.props.containerRef)) {
+      this.props.containerRef(container);
+    }
+    this.containerRef = container;
+    return container;
+  };
+
+  handleWheel = (e) => e.preventDefault();
 
   componentDidMount() {
     if (this.shouldHandleWheel && this.containerRef) {
@@ -131,11 +171,15 @@ export default class VictoryContainer extends React.Component {
       ? { width: "100%", height: "100%" }
       : { width, height };
     const divStyle = assign(
-      { pointerEvents: "none", touchAction: "none", position: "relative" },
+      {
+        pointerEvents: "none",
+        touchAction: "none",
+        position: "relative"
+      } as const,
       dimensions
     );
     const portalDivStyle = assign(
-      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 },
+      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 } as const,
       dimensions
     );
     const svgStyle = assign({ pointerEvents: "all" }, dimensions);

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

@@ -1,17 +1,67 @@
 /*eslint no-magic-numbers: ["error", { "ignore": [-0.5, 0.5, 0, 1, 2] }]*/
-import React from "react";
+import { assign, defaults, isEmpty } from "lodash";
 import PropTypes from "prop-types";
-import VictoryPortal from "../victory-portal/victory-portal";
-import Rect from "../victory-primitives/rect";
-import * as CustomPropTypes from "../victory-util/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 * as Helpers from "../victory-util/helpers";
 import * as LabelHelpers from "../victory-util/label-helpers";
-import * as Style from "../victory-util/style";
 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 TSpan from "../victory-primitives/tspan";
-import Text from "../victory-primitives/text";
-import { assign, defaults, isEmpty } from "lodash";
+import * as UserProps from "../victory-util/user-props";
+import { StringOrCallback, StringOrNumberOrCallback } from "../types";
+import {
+  NumberOrCallback,
+  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",
@@ -47,7 +97,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;
 };
 
@@ -432,9 +482,9 @@ const evaluateProps = (props) => {
   });
 };
 
-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)
@@ -487,6 +537,7 @@ const renderLabel = (calculatedProps, tspanValues) => {
     tspanComponent,
     textComponent
   } = calculatedProps;
+  const userProps = UserProps.getSafeUserProps(calculatedProps);
 
   const textProps = {
     "aria-label": ariaLabel,
@@ -501,7 +552,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) => {
@@ -521,21 +573,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,6 +599,7 @@ 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)
@@ -558,7 +615,7 @@ const VictoryLabel = (props) => {
     );
     const children = [backgroundElement, label];
     const backgroundWithLabel = React.cloneElement(
-      props.groupComponent,
+      props.groupComponent!,
       {},
       children
     );
@@ -599,6 +656,7 @@ VictoryLabel.propTypes = {
   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]),
@@ -615,6 +673,7 @@ VictoryLabel.propTypes = {
     PropTypes.func,
     PropTypes.array
   ]),
+  // @ts-expect-error "x is required in origin"
   origin: PropTypes.shape({
     x: CustomPropTypes.nonNegative,
     y: CustomPropTypes.nonNegative
@@ -633,6 +692,7 @@ VictoryLabel.propTypes = {
     PropTypes.func,
     PropTypes.array
   ]),
+  // @ts-expect-error Function is not assignable to string"
   textAnchor: PropTypes.oneOfType([
     PropTypes.oneOf(["start", "middle", "end", "inherit"]),
     PropTypes.func
@@ -645,11 +705,14 @@ VictoryLabel.propTypes = {
     PropTypes.func
   ]),
   tspanComponent: PropTypes.element,
+  // @ts-expect-error Function is not assignable to string"
   verticalAnchor: PropTypes.oneOfType([
     PropTypes.oneOf(["start", "middle", "end"]),
     PropTypes.func
   ]),
+  // @ts-expect-error Number is not assignable to string
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  // @ts-expect-error Number is not assignable to string
   y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
@@ -662,5 +725,3 @@ VictoryLabel.defaultProps = {
   capHeight: 0.71, // Magic number from d3.
   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 = {
@@ -13,31 +25,30 @@ export default class Portal extends React.Component {
     viewBox: PropTypes.string,
     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;