victory-core 36.4.1 → 36.5.0

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}

@@ -2,10 +2,10 @@
 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";
@@ -13,6 +13,55 @@ 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 { 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",
@@ -48,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;
 };
 
@@ -433,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)
@@ -524,7 +573,10 @@ 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) {
@@ -535,11 +587,11 @@ const VictoryLabel = (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 {
@@ -547,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)
@@ -562,7 +615,7 @@ const VictoryLabel = (props) => {
     );
     const children = [backgroundElement, label];
     const backgroundWithLabel = React.cloneElement(
-      props.groupComponent,
+      props.groupComponent!,
       {},
       children
     );
@@ -603,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]),
@@ -619,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
@@ -637,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
@@ -649,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])
 };
 
@@ -666,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;

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

@@ -3,9 +3,18 @@ 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";
@@ -20,6 +29,10 @@ export default class VictoryPortal extends React.Component {
   };
 
   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

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

@@ -4,7 +4,19 @@ 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 { Path } from "./path";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+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;
@@ -48,10 +60,10 @@ const evaluateProps = (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),
@@ -83,5 +95,3 @@ Arc.defaultProps = {
   role: "presentation",
   shapeRendering: "auto"
 };
-
-export default Arc;

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

@@ -3,8 +3,20 @@ 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 { Rect } from "./rect";
+import { Circle } from "./circle";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+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 +28,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,
@@ -30,7 +42,7 @@ const Background = (props) => {
         r: props.height,
         className: props.className
       })
-    : React.cloneElement(props.rectComponent, {
+    : React.cloneElement(props.rectComponent!, {
         ...props.events,
         style: props.style,
         role: props.role,
@@ -63,5 +75,3 @@ Background.defaultProps = {
   role: "presentation",
   shapeRendering: "auto"
 };
-
-export default Background;

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

@@ -3,7 +3,16 @@ 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 Rect from "./rect";
+import { Rect } from "./rect";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+export interface BorderProps extends VictoryCommonPrimitiveProps {
+  width?: number;
+  height?: number;
+  rectComponent?: React.ReactElement;
+  x?: number;
+  y?: number;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -26,10 +35,10 @@ const evaluateProps = (props) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const Border = (props) => {
+export const Border = (props: BorderProps) => {
   props = evaluateProps(props);
 
-  return React.cloneElement(props.rectComponent, {
+  return React.cloneElement(props.rectComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     style: props.style,
@@ -61,5 +70,3 @@ Border.defaultProps = {
   role: "presentation",
   shapeRendering: "auto"
 };
-
-export default Border;

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

@@ -1,15 +1,16 @@
 import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
 
-const Circle = (props) => {
+export const Circle = (props: VictoryPrimitiveShapeProps) => {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <circle vectorEffect="non-scaling-stroke" {...rest}>
       <desc>{desc}</desc>
     </circle>
   ) : (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <circle vectorEffect="non-scaling-stroke" {...rest} />
   );
 };
-
-export default Circle;

package/src/victory-primitives/clip-path.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+export interface ClipPathProps extends VictoryCommonPrimitiveProps {
+  children?: React.ReactNode[] | React.ReactNode;
+  clipId?: number | string;
+}
+
+export const ClipPath = (props: ClipPathProps) => (
+  <defs>
+    {
+      // @ts-expect-error FIXME: "id cannot be a number"
+      <clipPath id={props.clipId}>{props.children}</clipPath>
+    }
+  </defs>
+);
+
+ClipPath.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  clipId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};

package/src/victory-primitives/index.ts

@@ -0,0 +1,14 @@
+export * from "./arc";
+export * from "./background";
+export * from "./border";
+export * from "./circle";
+export * from "./clip-path";
+export * from "./line";
+export * from "./line-segment";
+export * from "./path";
+export * from "./point";
+export * from "./rect";
+export * from "./text";
+export * from "./tspan";
+export * from "./types";
+export * from "./whisker";

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

@@ -3,7 +3,17 @@ 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 Line from "./line";
+import { Line } from "./line";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+export interface LineSegmentProps extends VictoryCommonPrimitiveProps {
+  datum?: any;
+  lineComponent?: React.ReactElement;
+  x1?: number;
+  x2?: number;
+  y1?: number;
+  y2?: number;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -26,10 +36,10 @@ const evaluateProps = (props) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const LineSegment = (props) => {
+export const LineSegment = (props: LineSegmentProps) => {
   props = evaluateProps(props);
 
-  return React.cloneElement(props.lineComponent, {
+  return React.cloneElement(props.lineComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     style: props.style,
@@ -62,5 +72,3 @@ LineSegment.defaultProps = {
   role: "presentation",
   shapeRendering: "auto"
 };
-
-export default LineSegment;