victory-core 36.4.0 → 36.5.1

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

@@ -5,8 +5,85 @@ 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 = {
@@ -54,19 +131,24 @@ export default class VictoryAnimation extends React.Component {
       "sin",
       "sinIn",
       "sinOut",
-      "sinInOut"
+      "sinInOut",
     ]),
-    onEnd: PropTypes.func
+    onEnd: PropTypes.func,
   };
 
   static defaultProps = {
     data: {},
     delay: 0,
     duration: 1000,
-    easing: "quadInOut"
+    easing: "quadInOut",
   };
 
   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);
@@ -77,18 +159,13 @@ export default class VictoryAnimation extends React.Component {
         : this.props.data,
       animationInfo: {
         progress: 0,
-        animating: false
-      }
+        animating: false,
+      },
     };
     this.interpolator = null;
     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;
   }
 
@@ -114,8 +191,8 @@ export default class VictoryAnimation extends React.Component {
           animationInfo: {
             progress: 1,
             animating: false,
-            terminating: true
-          }
+            terminating: true,
+          },
         });
       } else {
         /* cancel existing loop if it exists */
@@ -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,12 +263,12 @@ 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,
-          terminating: true
-        }
+          terminating: true,
+        },
       });
       if (this.loopID) {
         this.timer.unsubscribe(this.loopID);
@@ -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
-      }
+        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,19 +2,43 @@ 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 = {
     "aria-label": PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
+      PropTypes.node,
     ]),
     circleComponent: PropTypes.element,
     className: PropTypes.string,
@@ -24,7 +48,7 @@ export default class VictoryClipContainer extends React.Component {
       top: PropTypes.number,
       bottom: PropTypes.number,
       left: PropTypes.number,
-      right: PropTypes.number
+      right: PropTypes.number,
     }),
     clipPathComponent: PropTypes.element,
     clipWidth: CustomPropTypes.nonNegative,
@@ -32,7 +56,7 @@ export default class VictoryClipContainer extends React.Component {
     groupComponent: PropTypes.element,
     origin: PropTypes.shape({
       x: CustomPropTypes.nonNegative,
-      y: CustomPropTypes.nonNegative
+      y: CustomPropTypes.nonNegative,
     }),
     polar: PropTypes.bool,
     radius: CustomPropTypes.nonNegative,
@@ -40,17 +64,18 @@ export default class VictoryClipContainer extends React.Component {
     tabIndex: PropTypes.number,
     transform: PropTypes.string,
     translateX: PropTypes.number,
-    translateY: PropTypes.number
+    translateY: PropTypes.number,
   };
 
   static defaultProps = {
     circleComponent: <Circle />,
     rectComponent: <Rect />,
     clipPathComponent: <ClipPath />,
-    groupComponent: <g />
+    groupComponent: <g />,
   };
+  private clipId: VictoryClipContainerProps["clipId"];
 
-  constructor(props) {
+  constructor(props: VictoryClipContainerProps) {
     super(props);
     this.clipId =
       !isObject(props) || props.clipId === undefined
@@ -65,7 +90,7 @@ export default class VictoryClipContainer extends React.Component {
       clipWidth = 0,
       clipHeight = 0,
       translateX = 0,
-      translateY = 0
+      translateY = 0,
     } = props;
     const clipPadding = Helpers.getPadding({ padding: props.clipPadding });
     const radius = props.radius || Helpers.getRadius(props);
@@ -74,16 +99,17 @@ export default class VictoryClipContainer extends React.Component {
       y: (polar ? origin.y : translateY) - clipPadding.top,
       width: Math.max(
         (polar ? radius : clipWidth) + clipPadding.left + clipPadding.right,
-        0
+        0,
       ),
       height: Math.max(
         (polar ? radius : clipHeight) + clipPadding.top + clipPadding.bottom,
-        0
-      )
+        0,
+      ),
     };
   }
 
   renderClippedGroup(props, clipId) {
+    const userProps = UserProps.getSafeUserProps(props);
     const {
       style,
       events,
@@ -91,7 +117,7 @@ export default class VictoryClipContainer extends React.Component {
       children,
       className,
       groupComponent,
-      tabIndex
+      tabIndex,
     } = props;
     const clipComponent = this.renderClipComponent(props, clipId);
     const groupProps = assign(
@@ -100,14 +126,14 @@ export default class VictoryClipContainer extends React.Component {
         style,
         transform,
         key: `clipped-group-${clipId}`,
-        clipPath: `url(#${clipId})`
+        clipPath: `url(#${clipId})`,
       },
-      events
+      events,
     );
     return React.cloneElement(
       groupComponent,
-      { ...groupProps, "aria-label": props["aria-label"], tabIndex },
-      [clipComponent, ...React.Children.toArray(children)]
+      { ...groupProps, tabIndex, ...userProps },
+      [clipComponent, ...React.Children.toArray(children)],
     );
   }
 
@@ -119,7 +145,7 @@ export default class VictoryClipContainer extends React.Component {
       children,
       className,
       groupComponent,
-      tabIndex
+      tabIndex,
     } = props;
     return React.cloneElement(
       groupComponent,
@@ -129,11 +155,11 @@ export default class VictoryClipContainer extends React.Component {
           style,
           transform,
           "aria-label": props["aria-label"],
-          tabIndex
+          tabIndex,
         },
-        events
+        events,
       ),
-      children
+      children,
     );
   }
 
@@ -147,10 +173,10 @@ export default class VictoryClipContainer extends React.Component {
       translateY = 0,
       circleComponent,
       rectComponent,
-      clipPathComponent
+      clipPathComponent,
     } = props;
     const { top, bottom, left, right } = Helpers.getPadding({
-      padding: props.clipPadding
+      padding: props.clipPadding,
     });
     let child;
     if (polar) {
@@ -158,7 +184,7 @@ export default class VictoryClipContainer extends React.Component {
       const circleProps = {
         r: Math.max(radius + left + right, radius + top + bottom, 0),
         cx: origin.x - left,
-        cy: origin.y - top
+        cy: origin.y - top,
       };
       child = React.cloneElement(circleComponent, circleProps);
     } else {
@@ -166,7 +192,7 @@ export default class VictoryClipContainer extends React.Component {
         x: translateX - left,
         y: translateY - top,
         width: Math.max(clipWidth + left + right, 0),
-        height: Math.max(clipHeight + top + bottom, 0)
+        height: Math.max(clipHeight + top + bottom, 0),
       };
       child = React.cloneElement(rectComponent, rectProps);
     }
@@ -174,7 +200,7 @@ export default class VictoryClipContainer extends React.Component {
     return React.cloneElement(
       clipPathComponent,
       assign({ key: `clip-path-${clipId}` }, props, { clipId }),
-      child
+      child,
     );
   }
 
@@ -207,7 +233,7 @@ export default class VictoryClipContainer extends React.Component {
       clipHeight,
       clipWidth,
       translateX,
-      translateY
+      translateY,
     });
     return this.renderClippedGroup(clipProps, this.clipId);
   }

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 "../types/prop-types";
+import { VictoryThemeDefinition } from "../victory-theme/types";
 
-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 = {
@@ -16,7 +51,7 @@ export default class VictoryContainer extends React.Component {
     "aria-labelledby": PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
+      PropTypes.node,
     ]),
     className: PropTypes.string,
     containerId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -27,7 +62,7 @@ export default class VictoryContainer extends React.Component {
     name: PropTypes.string,
     origin: PropTypes.shape({
       x: CustomPropTypes.nonNegative,
-      y: CustomPropTypes.nonNegative
+      y: CustomPropTypes.nonNegative,
     }),
     ouiaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ouiaSafe: PropTypes.bool,
@@ -42,7 +77,7 @@ export default class VictoryContainer extends React.Component {
     tabIndex: PropTypes.number,
     theme: PropTypes.object,
     title: PropTypes.string,
-    width: CustomPropTypes.nonNegative
+    width: CustomPropTypes.nonNegative,
   };
 
   static defaultProps = {
@@ -50,38 +85,43 @@ export default class VictoryContainer extends React.Component {
     portalComponent: <Portal />,
     portalZIndex: 99,
     responsive: true,
-    role: "img"
+    role: "img",
   };
 
   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) {
@@ -111,7 +151,7 @@ export default class VictoryContainer extends React.Component {
     return {
       ...(ouiaId && { "data-ouia-component-id": ouiaId }),
       ...(ouiaType && { "data-ouia-component-type": ouiaType }),
-      ...(ouiaSafe !== undefined && { "data-ouia-safe": ouiaSafe })
+      ...(ouiaSafe !== undefined && { "data-ouia-safe": ouiaSafe }),
     };
   }
 
@@ -124,19 +164,23 @@ export default class VictoryContainer extends React.Component {
       width,
       height,
       portalZIndex,
-      responsive
+      responsive,
     } = props;
     const children = this.getChildren(props);
     const dimensions = responsive
       ? { width: "100%", height: "100%" }
       : { width, height };
     const divStyle = assign(
-      { pointerEvents: "none", touchAction: "none", position: "relative" },
-      dimensions
+      {
+        pointerEvents: "none",
+        touchAction: "none",
+        position: "relative",
+      } as const,
+      dimensions,
     );
     const portalDivStyle = assign(
-      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 },
-      dimensions
+      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 } as const,
+      dimensions,
     );
     const svgStyle = assign({ pointerEvents: "all" }, dimensions);
     const portalSvgStyle = assign({ overflow: "visible" }, dimensions);
@@ -145,14 +189,14 @@ export default class VictoryContainer extends React.Component {
       height,
       viewBox: svgProps.viewBox,
       preserveAspectRatio: svgProps.preserveAspectRatio,
-      style: portalSvgStyle
+      style: portalSvgStyle,
     };
     return (
       <PortalContext.Provider
         value={{
           portalUpdate: this.portalUpdate,
           portalRegister: this.portalRegister,
-          portalDeregister: this.portalDeregister
+          portalDeregister: this.portalDeregister,
         }}
       >
         <div
@@ -173,7 +217,7 @@ export default class VictoryContainer extends React.Component {
           <div style={portalDivStyle}>
             {React.cloneElement(portalComponent, {
               ...portalProps,
-              ref: this.savePortalRef
+              ref: this.savePortalRef,
             })}
           </div>
         </div>
@@ -191,12 +235,12 @@ export default class VictoryContainer extends React.Component {
       desc,
       tabIndex,
       preserveAspectRatio,
-      role
+      role,
     } = this.props;
 
     const style = responsive
       ? this.props.style
-      : Helpers.omit(this.props.style, ["height", "width"]);
+      : Helpers.omit(this.props.style!, ["height", "width"]);
 
     const userProps = UserProps.getSafeUserProps(this.props);
 
@@ -209,7 +253,7 @@ export default class VictoryContainer extends React.Component {
         "aria-labelledby":
           [
             title && this.getIdForElement("title"),
-            this.props["aria-labelledby"]
+            this.props["aria-labelledby"],
           ]
             .filter(Boolean)
             .join(" ") || undefined,
@@ -219,9 +263,9 @@ export default class VictoryContainer extends React.Component {
             .join(" ") || undefined,
         viewBox: responsive ? `0 0 ${width} ${height}` : undefined,
         preserveAspectRatio: responsive ? preserveAspectRatio : undefined,
-        ...userProps
+        ...userProps,
       },
-      events
+      events,
     );
     return this.renderContainer(this.props, svgProps, style);
   }