victory-core 36.5.0 → 36.5.3

package/src/victory-util/{events.js → events.ts}

@@ -8,21 +8,52 @@ import {
   omitBy,
   uniq,
   includes,
-  keys
+  keys,
 } from "lodash";
+import type { EventMixinCalculatedValues } from "./add-events";
 
 const GLOBAL_EVENT_REGEX = /^onGlobal(.*)$/;
 
+type ComponentEventKey = string | number;
+export interface ComponentEvent {
+  target?: "parent" | string;
+  eventKey?: ComponentEventKey | ComponentEventKey[];
+  eventHandlers: ComponentEventHandlers;
+}
+export type ComponentEventName = `on${Capitalize<string>}`;
+export interface ComponentEventHandlers {
+  [k: ComponentEventName]: ComponentEventHandler;
+}
+export type ComponentEventHandler = (
+  evt: React.SyntheticEvent,
+  childProps: unknown,
+  eventKey: ComponentEventKey,
+  eventName: ComponentEventName,
+) => UpdatedProps;
+export type UpdatedProps = any;
+
+interface ComponentWithEvents extends EventMixinCalculatedValues {
+  state;
+  setState;
+}
+
 /* Returns all own and shared events that should be attached to a single target element,
  * i.e. an individual bar specified by target: "data", eventKey: [index].
  * Returned events are scoped to the appropriate state. Either that of the component itself
  * (i.e. VictoryBar) in the case of own events, or that of the parent component
  * (i.e. VictoryChart) in the case of shared events
  */
-// eslint-disable-next-line max-params,no-shadow
-export function getEvents(props, target, eventKey, getScopedEvents) {
+// eslint-disable-next-line max-params
+export function getEvents(
+  this: ComponentWithEvents,
+  props,
+  target,
+  eventKey,
+  // eslint-disable-next-line no-shadow
+  getScopedEvents,
+) {
   // Returns all events that apply to a particular target element
-  const getEventsByTarget = (events) => {
+  const getEventsByTarget = (events: Array<ComponentEvent>) => {
     const getSelectedEvents = () => {
       const targetEvents = events.reduce((memo, event) => {
         if (event.target !== undefined) {
@@ -32,7 +63,7 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
           return matchesTarget ? memo.concat(event) : memo;
         }
         return memo.concat(event);
-      }, []);
+      }, [] as ComponentEvent[]);
 
       if (eventKey !== undefined && target !== "parent") {
         return targetEvents.filter((obj) => {
@@ -51,7 +82,7 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
       Array.isArray(selectedEvents) &&
       selectedEvents.reduce((memo, event) => {
         return event ? assign(memo, event.eventHandlers) : memo;
-      }, {})
+      }, {} as ComponentEvent["eventHandlers"])
     );
   };
 
@@ -92,7 +123,13 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
  * element.
  */
 // eslint-disable-next-line max-params
-export function getScopedEvents(events, namespace, childType, baseProps) {
+export function getScopedEvents(
+  this: ComponentWithEvents,
+  events,
+  namespace,
+  childType,
+  baseProps,
+) {
   if (isEmpty(events)) {
     return {};
   }
@@ -149,15 +186,15 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
       }
       const mutationTargetProps = getTargetProps(
         { childName, key, target },
-        "props"
+        "props",
       );
       const mutationTargetState = getTargetProps(
         { childName, key, target },
-        "state"
+        "state",
       );
       const mutatedProps = eventReturn.mutation(
         assign({}, mutationTargetProps, mutationTargetState),
-        baseProps
+        baseProps,
       );
       const childState = baseState[childName] || {};
 
@@ -175,7 +212,7 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
         return target === "parent"
           ? assign(state, { [key]: assign(state[key], mutatedProps) })
           : assign(state, {
-              [key]: assign(state[key], { [target]: mutatedProps })
+              [key]: assign(state[key], { [target]: mutatedProps }),
             });
       };
 
@@ -249,24 +286,38 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
   }, {});
 }
 
-/* Returns a partially applied event handler for a specific target element
+/*
+ * Returns a partially applied event handler for a specific target element
  * This allows event handlers to have access to props controlling each element
  */
-export function getPartialEvents(events, eventKey, childProps) {
-  return events
-    ? keys(events).reduce((memo, eventName) => {
-        const appliedEvent = (evt) =>
-          events[eventName](evt, childProps, eventKey, eventName);
-        memo[eventName] = appliedEvent;
-        return memo;
-      }, {})
-    : {};
+export function getPartialEvents(
+  events: ComponentEventHandlers,
+  eventKey: ComponentEventKey,
+  childProps: unknown,
+): PartialEvents {
+  if (!events) return {};
+
+  return keys(events).reduce((memo, eventName) => {
+    const appliedEvent = (evt) =>
+      events[eventName](evt, childProps, eventKey, eventName);
+    memo[eventName] = appliedEvent;
+    return memo;
+  }, {} as PartialEvents);
+}
+export interface PartialEvents {
+  [eventName: ComponentEventName]: (evt: React.SyntheticEvent) => UpdatedProps;
 }
 
 /* Returns the property of the state object corresponding to event changes for
  * a particular element
  */
-export function getEventState(eventKey, namespace, childType) {
+// eslint-disable-next-line max-params
+export function getEventState(
+  this: ComponentWithEvents,
+  eventKey: ComponentEventKey,
+  namespace: string,
+  childType?: string,
+) {
   // Mandatory usage: `getEventState.bind(this)`
   // eslint-disable-next-line no-invalid-this
   const state = this.state || {};
@@ -297,7 +348,7 @@ export function getExternalMutationsWithChildren(
   mutations,
   baseProps,
   baseState,
-  childNames
+  childNames,
 ) {
   baseProps = baseProps || {};
   baseState = baseState || {};
@@ -308,7 +359,7 @@ export function getExternalMutationsWithChildren(
       mutations,
       baseProps[childName],
       baseState[childName],
-      childName
+      childName,
     );
     memo[childName] = mutation ? mutation : childState;
     return pickBy(memo, (v) => !isEmpty(v));
@@ -330,7 +381,7 @@ export function getExternalMutations(
   mutations,
   baseProps,
   baseState,
-  childName
+  childName?,
 ) {
   baseProps = baseProps || {};
   baseState = baseState || {};
@@ -345,7 +396,7 @@ export function getExternalMutations(
         mutations,
         keyProps,
         keyState,
-        identifier
+        identifier,
       );
       memo[eventKey] =
         mutation !== undefined ? assign({}, keyState, mutation) : keyState;
@@ -359,7 +410,7 @@ export function getExternalMutations(
           mutations,
           keyProps[target],
           keyState[target],
-          identifier
+          identifier,
         );
         m[target] =
           mutation !== undefined
@@ -387,7 +438,7 @@ export function getExternalMutation(
   mutations,
   baseProps,
   baseState,
-  identifier
+  identifier,
 ) {
   const filterMutations = (mutation, type) => {
     if (typeof mutation[type] === "string") {
@@ -408,13 +459,13 @@ export function getExternalMutation(
   }
   // find any mutation objects that match the target
   const targetMutations = scopedMutations.filter((m) =>
-    filterMutations(m, "target")
+    filterMutations(m, "target"),
   );
   if (isEmpty(targetMutations)) {
     return undefined;
   }
   const keyMutations = targetMutations.filter((m) =>
-    filterMutations(m, "eventKey")
+    filterMutations(m, "eventKey"),
   );
   if (isEmpty(keyMutations)) {
     return undefined;
@@ -444,7 +495,7 @@ export function getComponentEvents(props, components) {
         ? memo.concat(...componentEvents)
         : memo;
       return memo;
-    }, []);
+    }, [] as ComponentEvent[]);
   return events && events.length ? events : undefined;
 }
 

package/src/victory-util/{helpers.js → helpers.ts}

@@ -27,15 +27,19 @@ function getPolarRange(props, axis) {
 
 /**
  * creates an object with some keys excluded
- * replacement for lodash.omit for performance. does not mimick the entire lodash.omit api
+ * replacement for lodash.omit for performance. does not mimic the entire lodash.omit api
  * @param {Object} originalObject: created object will be based on this object
  * @param {Array<String>} ks: an array of keys to omit from the new object
  * @returns {Object} new object with same properties as originalObject
  */
-export function omit(originalObject, ks = []) {
+export function omit<T, Keys extends keyof T>(
+  originalObject: T,
+  ks: Array<Keys> = [],
+): Omit<T, Keys> {
   // code based on babel's _objectWithoutProperties
-  const newObject = {};
+  const newObject = {} as T;
   for (const key in originalObject) {
+    // @ts-expect-error String is not assignable to Key
     if (ks.indexOf(key) >= 0) {
       continue;
     }
@@ -56,7 +60,7 @@ export function getPoint(datum) {
     x: exists(_voronoiX) ? _voronoiX : defaultX,
     x0: exists(_x0) ? _x0 : _x,
     y: exists(_voronoiY) ? _voronoiY : defaultY,
-    y0: exists(_y0) ? _y0 : _y
+    y0: exists(_y0) ? _y0 : _y,
   };
   return defaults({}, point, datum);
 }
@@ -73,7 +77,7 @@ export function scalePoint(props, datum) {
     x: polar ? y * Math.cos(x) + origin.x : x,
     x0: polar ? y0 * Math.cos(x0) + origin.x : x0,
     y: polar ? -y * Math.sin(x) + origin.y : y,
-    y0: polar ? -y0 * Math.sin(x0) + origin.x : y0
+    y0: polar ? -y0 * Math.sin(x0) + origin.x : y0,
   };
 }
 
@@ -85,7 +89,7 @@ export function getPadding(props, name = "padding") {
     top: paddingObj.top || paddingVal,
     bottom: paddingObj.bottom || paddingVal,
     left: paddingObj.left || paddingVal,
-    right: paddingObj.right || paddingVal
+    right: paddingObj.right || paddingVal,
   };
 }
 
@@ -118,7 +122,7 @@ export function getStyles(style, defaultStyles) {
   return {
     parent: defaults({}, parent, defaultParent, { width, height }),
     labels: defaults({}, labels, defaultLabels),
-    data: defaults({}, data, defaultData)
+    data: defaults({}, data, defaultData),
   };
 }
 
@@ -161,7 +165,7 @@ export function getPolarOrigin(props) {
   const offsetHeight = height / 2 + top - bottom;
   return {
     x: offsetWidth + radius > width ? radius + left - right : offsetWidth,
-    y: offsetHeight + radius > height ? radius + top - bottom : offsetHeight
+    y: offsetHeight + radius > height ? radius + top - bottom : offsetHeight,
   };
 }
 
@@ -189,7 +193,7 @@ export function createAccessor(key) {
   return property(key);
 }
 
-export function modifyProps(props, fallbackProps, role) {
+export function modifyProps(props, fallbackProps?, role?) {
   const theme = props.theme && props.theme[role] ? props.theme[role] : {};
   const themeProps = omit(theme, ["style"]);
   const horizontal = isHorizontal(props);
@@ -218,13 +222,24 @@ export function getCurrentAxis(axis, horizontal) {
  * @returns {Array} returns an array of results from calling the iteratee on all nested children
  */
 /* eslint-disable max-params */
-export function reduceChildren(
-  children,
-  iteratee,
+export function reduceChildren<
+  TChildren extends React.ReactNode,
+  TItem,
+  TResult = TItem[],
+>(
+  children: TChildren[],
+  iteratee: (
+    child: TChildren,
+    childName: string,
+    parent?: TChildren,
+  ) => TItem | null,
   parentProps = {},
-  initialMemo = [],
-  combine = (memo, item) => memo.concat(item)
-) {
+  // @ts-expect-error These defaults are hard to type
+  initialMemo: TResult = [],
+  combine: (memo: TResult, item: TItem) => TResult = (memo, item) =>
+    // @ts-expect-error These defaults are hard to type
+    memo.concat(item),
+): TResult {
   const sharedProps = [
     "data",
     "domain",
@@ -234,9 +249,9 @@ export function reduceChildren(
     "endAngle",
     "minDomain",
     "maxDomain",
-    "horizontal"
+    "horizontal",
   ];
-  const traverseChildren = (childArray, names, parent) => {
+  const traverseChildren = (childArray, names, parent?) => {
     return childArray.reduce((memo, child, index) => {
       const childRole = child.type && child.type.role;
       const childName = child.props.name || `${childRole}-${names[index]}`;
@@ -244,7 +259,7 @@ export function reduceChildren(
         const childProps = assign(
           {},
           child.props,
-          pick(parentProps, sharedProps)
+          pick(parentProps, sharedProps),
         );
 
         const nestedChildren =
@@ -252,11 +267,15 @@ export function reduceChildren(
           child.type.role === "stack" &&
           isFunction(child.type.getChildren)
             ? child.type.getChildren(childProps)
-            : React.Children.toArray(child.props.children).map((c) => {
+            : (
+                React.Children.toArray(
+                  child.props.children,
+                ) as Array<React.ReactElement>
+              ).map((c) => {
                 const nestedChildProps = assign(
                   {},
                   c.props,
-                  pick(childProps, sharedProps)
+                  pick(childProps, sharedProps),
                 );
                 return React.cloneElement(c, nestedChildProps);
               });
@@ -265,7 +284,7 @@ export function reduceChildren(
         const nestedResults = traverseChildren(
           nestedChildren,
           childNames,
-          child
+          child,
         );
         memo = combine(memo, nestedResults);
       } else {
@@ -284,7 +303,7 @@ export function reduceChildren(
 /**
  * @param {Object} props: the props object
  * @returns {Boolean} returns true if the props object contains `horizontal: true` of if any
- * children or nested children are hoizontal
+ * children or nested children are horizontal
  */
 export function isHorizontal(props) {
   if (props.horizontal !== undefined || !props.children) {

package/src/victory-util/hooks/use-animation-state.js

@@ -7,7 +7,7 @@ import * as Transitions from "../transitions";
 const INITIAL_STATE = {
   nodesShouldLoad: false,
   nodesDoneLoad: false,
-  animating: true
+  animating: true,
 };
 
 export const useAnimationState = (initialState = INITIAL_STATE) => {
@@ -18,13 +18,13 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
     (newState) => {
       _setState((oldState) => ({ ...oldState, ...newState }));
     },
-    [_setState]
+    [_setState],
   );
 
   // This is a copy of Wrapper.getAnimationProps
   const getAnimationProps = React.useCallback(
     (props, child, index) => {
-      if (!props.animate) {
+      if (!props?.animate) {
         return child.props.animate;
       }
       const getFilteredState = () => {
@@ -43,7 +43,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         const getTransitionProps = Transitions.getTransitionPropsFactory(
           props,
           filteredState,
-          (newState) => setState(newState)
+          (newState) => setState(newState),
         );
         getTransitions = (childComponent) =>
           getTransitionProps(childComponent, index);
@@ -51,16 +51,16 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
       return defaults(
         { getTransitions, parentState },
         props.animate,
-        child.props.animate
+        child.props.animate,
       );
     },
-    [state, setState]
+    [state, setState],
   );
 
   // This is a copy of Wrapper.setAnimationState
   const setAnimationState = React.useCallback(
     (props, nextProps) => {
-      if (!props.animate) {
+      if (!props || !props.animate) {
         return;
       }
       if (props.animate.parentState) {
@@ -68,7 +68,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         const oldProps = nodesWillExit ? props : null;
         const newState = defaults(
           { oldProps, nextProps },
-          props.animate.parentState
+          props.animate.parentState,
         );
         setState(newState);
       } else {
@@ -91,7 +91,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
           nodesWillExit,
           nodesWillEnter,
           childrenTransitions,
-          nodesShouldEnter
+          nodesShouldEnter,
         } = Transitions.getInitialTransitionState(oldChildren, nextChildren);
 
         setState({
@@ -103,11 +103,11 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
             : childrenTransitions,
           oldProps: nodesWillExit ? props : null,
           nextProps,
-          continuous
+          continuous,
         });
       }
     },
-    [setState]
+    [setState],
   );
 
   const getProps = React.useCallback(
@@ -116,7 +116,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         ? state.oldProps || initialProps
         : initialProps;
     },
-    [state]
+    [state],
   );
 
   return { state, setState, getAnimationProps, setAnimationState, getProps };

package/src/victory-util/hooks/use-previous-props.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function usePreviousProps<T>(props: T): T | undefined {
+  const ref = React.useRef<T>();
+  React.useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}

package/src/victory-util/{immutable.js → immutable.ts}

@@ -1,39 +1,43 @@
+import type { Iterable, Record, List, Map } from "immutable";
+
 export const IMMUTABLE_ITERABLE = "@@__IMMUTABLE_ITERABLE__@@";
 export const IMMUTABLE_RECORD = "@@__IMMUTABLE_RECORD__@@";
 export const IMMUTABLE_LIST = "@@__IMMUTABLE_LIST__@@";
 export const IMMUTABLE_MAP = "@@__IMMUTABLE_MAP__@@";
 
-export function isIterable(x) {
+export function isIterable(x): x is Iterable<unknown, unknown> {
   return !!(x && x[IMMUTABLE_ITERABLE]);
 }
 
-export function isRecord(x) {
+export function isRecord(x): x is Record<string, unknown> {
   return !!(x && x[IMMUTABLE_RECORD]);
 }
 
-export function isImmutable(x) {
+export function isImmutable(
+  x,
+): x is Iterable<unknown, unknown> | Record<string, unknown> {
   return isIterable(x) || isRecord(x);
 }
 
-export function isList(x) {
+export function isList(x): x is List<unknown> {
   return !!(x && x[IMMUTABLE_LIST]);
 }
 
-export function isMap(x) {
+export function isMap(x): x is Map<unknown, unknown> {
   return !!(x && x[IMMUTABLE_MAP]);
 }
 
-export function shallowToJS(x, whitelist) {
+export function shallowToJS(x, whitelist?: Record<string, boolean | unknown>) {
   return isIterable(x)
     ? x.reduce(
-        (prev, curr, key) => {
+        (result: any, curr: any, key: any) => {
           if (whitelist && whitelist[key]) {
             curr = shallowToJS(curr);
           }
-          prev[key] = curr;
-          return prev;
+          result[key] = curr;
+          return result;
         },
-        isList(x) ? [] : {}
+        isList(x) ? [] : {},
       )
     : x;
 }

package/src/victory-util/index.ts

@@ -0,0 +1,28 @@
+export * from "./add-events";
+export * as Axis from "./axis";
+export * as Collection from "./collection";
+export * from "./common-props";
+export * as Data from "./data";
+export * as DefaultTransitions from "./default-transitions";
+export * as Domain from "./domain";
+export * as Events from "./events";
+export * as Helpers from "./helpers";
+export * as Hooks from "./hooks";
+export * as Immutable from "./immutable";
+export * as LabelHelpers from "./label-helpers";
+export * as LineHelpers from "./line-helpers";
+export * as Log from "./log";
+export * as PointPathHelpers from "./point-path-helpers";
+export * as PropTypes from "./prop-types";
+export * as Scale from "./scale";
+export * as Selection from "./selection";
+export type { SVGCoordinateType, SVGCoordinateBounds } from "./selection";
+export * as Style from "./style";
+export * as TextSize from "./textsize";
+export type { TextSizeStyleInterface } from "./textsize";
+export { default as Timer } from "./timer";
+export { default as TimerContext } from "./timer-context";
+export * as Transitions from "./transitions";
+export * as UserProps from "./user-props";
+export * as Wrapper from "./wrapper";
+export * from "./with-container";

package/src/victory-util/{label-helpers.js → label-helpers.ts}

@@ -45,7 +45,7 @@ function getPadding(props, datum) {
   const sign = datum._y < 0 ? -1 : 1;
   return {
     x: horizontal ? sign * defaultPadding : 0,
-    y: horizontal ? 0 : -1 * sign * defaultPadding
+    y: horizontal ? 0 : -1 * sign * defaultPadding,
   };
 }
 
@@ -57,7 +57,7 @@ function getOffset(props, datum) {
 
   return {
     dx: padding.x,
-    dy: padding.y
+    dy: padding.y,
   };
 }
 
@@ -70,7 +70,7 @@ function getPosition(props, datum) {
     const polarPadding = getPolarPadding(props, datum);
     return {
       x: x + polarPadding.x,
-      y: y + polarPadding.y
+      y: y + polarPadding.y,
     };
   }
 }
@@ -83,7 +83,7 @@ function getPolarPadding(props, datum) {
   const angle = Helpers.degreesToRadians(degrees);
   return {
     x: padding * Math.cos(angle),
-    y: -padding * Math.sin(angle)
+    y: -padding * Math.sin(angle),
   };
 }
 
@@ -145,7 +145,7 @@ export function getPolarVerticalAnchor(props, degrees) {
   return orientation === "top" ? "end" : "start";
 }
 
-export function getPolarAngle(props, baseAngle) {
+export function getPolarAngle(props, baseAngle?) {
   const { labelPlacement, datum } = props;
   if (!labelPlacement || labelPlacement === "vertical") {
     return 0;
@@ -181,7 +181,7 @@ export function getProps(props, index) {
     height,
     theme,
     labelComponent,
-    disableInlineStyles
+    disableInlineStyles,
   } = props;
   const datum = data[index];
   const degrees = getDegrees(props, datum);
@@ -215,7 +215,7 @@ export function getProps(props, index) {
     dy,
     width,
     height,
-    style: style.labels
+    style: style.labels,
   };
   if (!Helpers.isTooltip(labelComponent)) {
     return labelProps;