victory-core 36.5.0 → 36.5.3

package/src/victory-util/selection.ts

@@ -0,0 +1,158 @@
+import React from "react";
+import { Collection, VictoryCommonProps } from "./index";
+import type { DomainPropType, ScaleXYPropType } from "../types/prop-types";
+
+// Private Functions
+
+function transformTarget(
+  target: number,
+  matrix: DOMMatrix,
+  dimension: "x" | "y",
+) {
+  const { a, d, e, f } = matrix;
+  return dimension === "y" ? d * target + f : a * target + e;
+}
+
+function getTransformationMatrix(svg: SVGGraphicsElement): DOMMatrix {
+  return svg.getScreenCTM()!.inverse();
+}
+
+interface ReactNativeTouchEvent extends Event {
+  identifier?: number;
+  locationX: number;
+  locationY: number;
+}
+function isNativeTouchEvent(
+  nativeEvent: Event | undefined,
+): nativeEvent is ReactNativeTouchEvent {
+  return !!(
+    nativeEvent &&
+    (nativeEvent as ReactNativeTouchEvent).identifier !== undefined
+  );
+}
+function isReactTouchEvent(evt: React.SyntheticEvent): evt is React.TouchEvent {
+  return (
+    (evt as React.TouchEvent).changedTouches &&
+    (evt as React.TouchEvent).changedTouches.length > 0
+  );
+}
+
+// Exported Functions
+
+export function getParentSVG(
+  evt: Pick<React.SyntheticEvent, "target"> &
+    Partial<Pick<React.SyntheticEvent, "nativeEvent">>,
+): SVGElement {
+  if (isNativeTouchEvent(evt.nativeEvent)) {
+    // @ts-expect-error Seems like a superfluous check.
+    return undefined;
+  }
+  const getParent = (target) => {
+    if (target.nodeName === "svg") {
+      return target;
+    } else {
+      return target.parentNode ? getParent(target.parentNode) : target;
+    }
+  };
+  return getParent(evt.target);
+}
+
+export function getSVGEventCoordinates(
+  evt: React.SyntheticEvent,
+  svg?: SVGElement,
+): SVGCoordinateType {
+  if (isNativeTouchEvent(evt.nativeEvent)) {
+    // react-native override. relies on the RN.View being the _exact_ same size as its child SVG.
+    // this should be fine: the svg is the only child of View and the View shirks to its children
+    return {
+      x: evt.nativeEvent.locationX,
+      y: evt.nativeEvent.locationY,
+    };
+  }
+  const location = isReactTouchEvent(evt)
+    ? evt.changedTouches[0]
+    : (evt as React.MouseEvent);
+  svg = svg || getParentSVG(location);
+  const matrix = getTransformationMatrix(svg as SVGGraphicsElement);
+  return {
+    x: transformTarget(location.clientX, matrix, "x"),
+    y: transformTarget(location.clientY, matrix, "y"),
+  };
+}
+
+export function getDomainCoordinates(
+  props: Pick<VictoryCommonProps, "scale" | "horizontal">,
+  domain?: DomainPropType,
+): DomainPropType {
+  const { horizontal } = props;
+  const scale = props.scale as ScaleXYPropType;
+  // FIXME: add support for DomainTuple: [number, number]
+  const domainObj: any = domain || {
+    x: scale.x.domain(),
+    y: scale.y.domain(),
+  };
+  return {
+    x: horizontal
+      ? [scale.y(domainObj.y[0]), scale.y(domainObj.y[1])]
+      : [scale.x(domainObj.x[0]), scale.x(domainObj.x[1])],
+    y: horizontal
+      ? [scale.x(domainObj.x[0]), scale.x(domainObj.x[1])]
+      : [scale.y(domainObj.y[0]), scale.y(domainObj.y[1])],
+  };
+}
+
+// eslint-disable-next-line max-params
+export function getDataCoordinates(
+  props: any,
+  scale: ScaleXYPropType,
+  x: number,
+  y: number,
+): SVGCoordinateType {
+  const { polar, horizontal } = props;
+  if (!polar) {
+    return {
+      x: horizontal ? scale.x.invert(y) : scale.x.invert(x),
+      y: horizontal ? scale.y.invert(x) : scale.y.invert(y),
+    };
+  } else {
+    const origin = props.origin || { x: 0, y: 0 };
+    const baseX = x - origin.x;
+    const baseY = y - origin.y;
+    const radius = Math.abs(baseX * Math.sqrt(1 + Math.pow(-baseY / baseX, 2)));
+    const angle = (-Math.atan2(baseY, baseX) + Math.PI * 2) % (Math.PI * 2);
+    return {
+      x: scale.x.invert(angle),
+      y: scale.y.invert(radius),
+    };
+  }
+}
+
+export function getBounds(props: ComputedCommonProps): SVGCoordinateBounds {
+  const { x1, x2, y1, y2, scale } = props;
+  const point1 = getDataCoordinates(props, scale, x1, y1);
+  const point2 = getDataCoordinates(props, scale, x2, y2);
+  const makeBound = (a: number, b: number) => {
+    return [
+      Collection.getMinValue([a, b]) as number,
+      Collection.getMaxValue([a, b]) as number,
+    ] as const;
+  };
+  return {
+    x: makeBound(point1.x, point2.x),
+    y: makeBound(point1.y, point2.y),
+  };
+}
+
+export type SVGCoordinateType = { x: number; y: number };
+export type SVGCoordinateBounds = {
+  x: readonly [number, number];
+  y: readonly [number, number];
+};
+
+type ComputedCommonProps = {
+  scale: ScaleXYPropType;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+};

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

@@ -18,7 +18,7 @@ export const toTransformString = function (obj, ...more) {
     if (obj === undefined || obj === null || typeof obj === "string") {
       return obj;
     }
-    const transforms = [];
+    const transforms = [] as string[];
     for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
         const value = obj[key];
@@ -49,14 +49,14 @@ export function getColorScale(name) {
       "#55DBC1",
       "#EFDA97",
       "#E2A37F",
-      "#DF948A"
+      "#DF948A",
     ],
     heatmap: ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"],
     warm: ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"],
     cool: ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"],
     red: ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"],
     blue: ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"],
-    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"]
+    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"],
   };
   return name ? scales[name] : scales.grayscale;
 }

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

@@ -120,23 +120,23 @@ const absoluteMeasurementUnitsToPixels = {
   pt: 1.33,
   pc: 16,
   in: 96,
-  px: 1
+  px: 1,
 };
 const relativeMeasurementUnitsCoef = {
   em: 1,
-  ex: 0.5
+  ex: 0.5,
 };
 
 const coefficients = {
   heightOverlapCoef: 1.05, // Coefficient for height value to prevent overlap.
-  lineCapitalCoef: 1.15 // Coefficient for height value. Reserve space for capital chars.
+  lineCapitalCoef: 1.15, // Coefficient for height value. Reserve space for capital chars.
 };
 const defaultStyle = {
   lineHeight: 1,
   letterSpacing: "0px",
   fontSize: 0,
   angle: 0,
-  fontFamily: ""
+  fontFamily: "",
 };
 
 const _degreeToRadian = (angle) => (angle * Math.PI) / 180;
@@ -147,7 +147,7 @@ const _getFontData = (fontFamily) => {
   return fonts[fontMatch];
 };
 
-const _splitToLines = (text) => {
+const _splitToLines = (text: string | string[]) => {
   return Array.isArray(text) ? text : text.toString().split(/\r\n|\r|\n/g);
 };
 
@@ -165,9 +165,12 @@ const _getSizeWithRotate = (axisSize, dependentSize, angle) => {
  * @param  {number} fontSize Current text font-size.
  * @returns {number} Approximate Css length in pixels.
  */
-export const convertLengthToPixels = (length, fontSize) => {
-  const attribute = length.match(/[a-zA-Z%]+/) && length.match(/[a-zA-Z%]+/)[0];
-  const value = length.match(/[0-9.,]+/);
+export const convertLengthToPixels = (
+  length: string,
+  fontSize?: number,
+): number => {
+  const attribute = length.match(/[a-zA-Z%]+/)?.[0];
+  const value = Number(length.match(/[0-9.,]+/));
   let result;
   if (!attribute) {
     result = value || 0;
@@ -195,11 +198,11 @@ const _prepareParams = (inputStyle, index) => {
     fontSize:
       typeof style.fontSize === "number"
         ? style.fontSize
-        : convertLengthToPixels(String(style.fontSize))
+        : convertLengthToPixels(String(style.fontSize)),
   });
 };
 
-const _approximateTextWidthInternal = (text, style) => {
+const _approximateTextWidthInternal = (text: string | string[], style) => {
   if (text === undefined || text === "" || text === null) {
     return 0;
   }
@@ -208,7 +211,7 @@ const _approximateTextWidthInternal = (text, style) => {
     const len = line.toString().length;
     const { fontSize, letterSpacing, fontFamily } = _prepareParams(
       style,
-      index
+      index,
     );
     const fontData = _getFontData(fontFamily);
     const width =
@@ -226,7 +229,7 @@ const _approximateTextWidthInternal = (text, style) => {
   return Math.max(...widths);
 };
 
-const _approximateTextHeightInternal = (text, style) => {
+const _approximateTextHeightInternal = (text: string | string[], style) => {
   if (text === undefined || text === "" || text === null) {
     return 0;
   }
@@ -240,9 +243,18 @@ const _approximateTextHeightInternal = (text, style) => {
   }, 0);
 };
 
+export interface TextSizeStyleInterface {
+  angle?: number;
+  characterConstant?: string;
+  fontFamily?: string;
+  fontSize?: number | string;
+  letterSpacing?: string;
+  lineHeight?: number;
+}
+
 // Stubbable implementation.
 export const _approximateTextSizeInternal = {
-  impl: (text, style) => {
+  impl: (text: string | string[], style?: TextSizeStyleInterface) => {
     const angle = Array.isArray(style)
       ? style[0] && style[0].angle
       : style && style.angle;
@@ -256,14 +268,14 @@ export const _approximateTextSizeInternal = {
       : height;
     return {
       width: widthWithRotate,
-      height: heightWithRotate * coefficients.heightOverlapCoef
+      height: heightWithRotate * coefficients.heightOverlapCoef,
     };
-  }
+  },
 };
 
 /**
  * Predict text size by font params.
- * @param {string} text Content for width calculation.
+ * @param {string|string[]} text Content for width calculation.
  * @param {Object} style Text styles, ,fontFamily, fontSize, etc.
  * @param {string} style.fontFamily Text fontFamily.
  * @param {(number|string)} style.fontSize Text fontSize.
@@ -272,5 +284,8 @@ export const _approximateTextSizeInternal = {
  * @param {number} style.lineHeight Line height coefficient.
  * @returns {number} Approximate text label height.
  */
-export const approximateTextSize = (text, style) =>
+export const approximateTextSize = (
+  text: string | string[],
+  style?: TextSizeStyleInterface,
+): { width: number; height: number } =>
   _approximateTextSizeInternal.impl(text, style);

package/src/victory-util/timer-context.ts

@@ -7,7 +7,7 @@ import Timer from "./timer";
  */
 const TimerContext = React.createContext({
   transitionTimer: new Timer(),
-  animationTimer: new Timer()
+  animationTimer: new Timer(),
 });
 TimerContext.displayName = "TimerContext";
 

package/src/victory-util/timer.ts

@@ -1,16 +1,11 @@
-import { timer, now } from "victory-vendor/d3-timer";
+import { timer, now, Timer as D3Timer } from "victory-vendor/d3-timer";
 
-interface D3Timer {
-  new (callback): void;
-  stop(): void;
-}
-
-type Callback = (elapsed: number, duration: number) => void;
+type TimerCallback = (elapsed: number, duration: number) => void;
 
 export default class Timer {
   private shouldAnimate: boolean;
   private readonly subscribers: Array<{
-    callback: Callback;
+    callback: TimerCallback;
     startTime: number;
     duration: number;
   }>;
@@ -51,12 +46,12 @@ export default class Timer {
     }
   }
 
-  subscribe(callback: Callback, duration: number) {
+  subscribe(callback: TimerCallback, duration: number) {
     duration = this.shouldAnimate ? duration : 0;
     const subscriptionID = this.subscribers.push({
       startTime: now(),
       callback,
-      duration
+      duration,
     });
     this.activeSubscriptions++;
     this.start();

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

@@ -1,5 +1,6 @@
 import { assign, defaults, identity, keys } from "lodash";
 import React from "react";
+import { AnimatePropTypeInterface } from "../types/prop-types";
 
 function getDatumKey(datum, idx) {
   return (datum.key || idx).toString();
@@ -46,7 +47,7 @@ function getNodeTransitions(oldData, nextData) {
     entering:
       oldDataKeyed && getKeyedDataDifference(nextDataKeyed, oldDataKeyed),
     exiting:
-      nextDataKeyed && getKeyedDataDifference(oldDataKeyed, nextDataKeyed)
+      nextDataKeyed && getKeyedDataDifference(oldDataKeyed, nextDataKeyed),
   };
 }
 
@@ -59,7 +60,7 @@ function getChildData(child) {
 
 /**
  * If a parent component has animation enabled, calculate the transitions
- * for any data of any child component that supports data transitions
+ * for any data of any child component that supports data transitions.
  * Data transitions are defined as any two datasets where data nodes exist
  * in the first set and not the second, in the second and not the first,
  * or both.
@@ -95,7 +96,7 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
       if (child && child.props && child.props.children && next[idx]) {
         return getTransitionsFromChildren(
           React.Children.toArray(old[idx].props.children),
-          React.Children.toArray(next[idx].props.children)
+          React.Children.toArray(next[idx].props.children),
         );
       }
       // get Transition entering and exiting nodes
@@ -105,7 +106,7 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
 
   const childrenTransitions = getTransitionsFromChildren(
     React.Children.toArray(oldChildren),
-    React.Children.toArray(nextChildren)
+    React.Children.toArray(nextChildren),
   );
   return {
     nodesWillExit,
@@ -116,20 +117,26 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
     //       is a perfect match for the previous data and domain except
     //       for new nodes. In this case, we wouldn't want a delay before
     //       the new nodes appear.
-    nodesShouldEnter: false
+    nodesShouldEnter: false,
   };
 }
 
-function getInitialChildProps(animate, data) {
+type TransitionProps = {
+  data;
+  animate?: AnimatePropTypeInterface;
+  clipWidth?: number;
+};
+
+function getInitialChildProps(animate, data): TransitionProps {
   const after =
     animate.onEnter && animate.onEnter.after ? animate.onEnter.after : identity;
   return {
-    data: data.map((datum, idx) => assign({}, datum, after(datum, idx, data)))
+    data: data.map((datum, idx) => assign({}, datum, after(datum, idx, data))),
   };
 }
 
 // eslint-disable-next-line max-params
-function getChildBeforeLoad(animate, child, data, cb) {
+function getChildBeforeLoad(animate, child, data, cb): TransitionProps {
   animate = assign({}, animate, { onEnd: cb });
   if (animate && animate.onLoad && !animate.onLoad.duration) {
     return { animate, data };
@@ -145,7 +152,7 @@ function getChildBeforeLoad(animate, child, data, cb) {
 }
 
 // eslint-disable-next-line max-params
-function getChildOnLoad(animate, data, cb) {
+function getChildOnLoad(animate, data, cb): TransitionProps {
   animate = assign({}, animate, { onEnd: cb });
   if (animate && animate.onLoad && !animate.onLoad.duration) {
     return { animate, data };
@@ -161,7 +168,13 @@ function getChildOnLoad(animate, data, cb) {
 }
 
 // eslint-disable-next-line max-params, max-len
-function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
+function getChildPropsOnExit(
+  animate,
+  child,
+  data,
+  exitingNodes,
+  cb,
+): TransitionProps {
   // Whether or not _this_ child has exiting nodes, we want the exit-
   // transition for all children to have the same duration, delay, etc.
   const onExit = animate && animate.onExit;
@@ -169,7 +182,7 @@ function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
 
   if (exitingNodes) {
     // After the exit transition occurs, trigger the animations for
-    // nodes that are neither exiting or entering.
+    // nodes that are neither exiting nor entering.
     animate.onEnd = cb;
     const before =
       animate.onExit && animate.onExit.before
@@ -188,7 +201,13 @@ function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
 }
 
 // eslint-disable-next-line max-params,max-len
-function getChildPropsBeforeEnter(animate, child, data, enteringNodes, cb) {
+function getChildPropsBeforeEnter(
+  animate,
+  child,
+  data,
+  enteringNodes,
+  cb,
+): TransitionProps {
   if (enteringNodes) {
     // Perform a normal animation here, except - when it finishes - trigger
     // the transition for entering nodes.
@@ -212,7 +231,12 @@ function getChildPropsBeforeEnter(animate, child, data, enteringNodes, cb) {
 }
 
 // eslint-disable-next-line max-params, max-len
-function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
+function getChildPropsOnEnter(
+  animate,
+  data,
+  enteringNodes,
+  cb,
+): TransitionProps {
   // Whether or not _this_ child has entering nodes, we want the entering-
   // transition for all children to have the same duration, delay, etc.
   const onEnter = animate && animate.onEnter;
@@ -243,7 +267,7 @@ function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
  * and its index in the parent's children array.
  *
  * In particular, this will include an `animate` object that is set appropriately
- * so that each child will be synchoronized for each stage of a transition
+ * so that each child will be synchronized for each stage of a transition
  * animation.  It will also include a transformed `data` object, where each datum
  * is transformed by `animate.onExit` and `animate.onEnter` `before` and `after`
  * functions.
@@ -269,7 +293,7 @@ export function getTransitionPropsFactory(props, state, setState) {
       props.animate && props.animate.onExit && props.animate.onExit.duration,
     load:
       props.animate && props.animate.onLoad && props.animate.onLoad.duration,
-    move: props.animate && props.animate.duration
+    move: props.animate && props.animate.duration,
   };
 
   const onLoad = (child, data, animate) => {
@@ -324,9 +348,13 @@ export function getTransitionPropsFactory(props, state, setState) {
   };
 
   // eslint-disable-next-line max-statements, complexity, max-len
-  return function getTransitionProps(child, index) {
+  return function getTransitionProps(child, index): TransitionProps {
     const data = getChildData(child) || [];
-    const animate = defaults({}, props.animate, child.props.animate);
+    const animate: AnimatePropTypeInterface = defaults(
+      {},
+      props.animate,
+      child.props.animate,
+    );
     const defaultTransitions = child.props.polar
       ? child.type.defaultPolarTransitions || child.type.defaultTransitions
       : child.type.defaultTransitions;
@@ -334,17 +362,17 @@ export function getTransitionPropsFactory(props, state, setState) {
     animate.onExit = defaults(
       {},
       animate.onExit,
-      defaultTransitions && defaultTransitions.onExit
+      defaultTransitions && defaultTransitions.onExit,
     );
     animate.onEnter = defaults(
       {},
       animate.onEnter,
-      defaultTransitions && defaultTransitions.onEnter
+      defaultTransitions && defaultTransitions.onEnter,
     );
     animate.onLoad = defaults(
       {},
       animate.onLoad,
-      defaultTransitions && defaultTransitions.onLoad
+      defaultTransitions && defaultTransitions.onLoad,
     );
 
     const childTransitions =
@@ -377,13 +405,13 @@ export function getTransitionPropsFactory(props, state, setState) {
           ? transitionDurations.move
           : child.props.animate && child.props.animate.duration;
       const animation = {
-        duration: nodesShouldEnter && enteringNodes ? enter : move
+        duration: nodesShouldEnter && enteringNodes ? enter : move,
       };
       return onEnter(
         enteringNodes,
         child,
         data,
-        assign({}, animate, animation)
+        assign({}, animate, animation),
       );
     } else if (!state && animate && animate.onExit) {
       // This is the initial render, and nodes may enter when props change. Because

package/src/victory-util/type-helpers.ts

@@ -0,0 +1,50 @@
+import {
+  ForAxes,
+  AxisType,
+  Tuple,
+  Datum,
+  DatumValue,
+} from "../types/prop-types";
+
+export function hasValueForAxis<T = unknown>(
+  value: unknown | ForAxes<T>,
+  axis: AxisType,
+): value is ForAxes<T> {
+  if (typeof value === "object" && value !== null) {
+    return axis in value;
+  }
+  return false;
+}
+
+export function isTuple<T = unknown>(value: unknown): value is Tuple<T> {
+  return Array.isArray(value) && value.length === 2;
+}
+
+export function getValueForAxis<T = unknown>(
+  value: T | ForAxes<T> | undefined,
+  axis: AxisType,
+): T | undefined {
+  if (hasValueForAxis<T>(value, axis)) {
+    return value[axis] as T;
+  }
+  return value;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction<T = Function>(func?: unknown): func is T {
+  return typeof func === "function";
+}
+
+export function isDate(value: unknown): value is Date {
+  return value instanceof Date;
+}
+
+export function isKeyValueObject(
+  datum: Datum,
+): datum is { [key: string]: DatumValue } {
+  return (
+    typeof datum === "object" &&
+    !Array.isArray(datum) &&
+    !(datum instanceof Date)
+  );
+}

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

@@ -2,15 +2,17 @@ import * as React from "react";
 
 /*
   USER_PROPS_SAFELIST is to contain any string deemed safe for user props.
-  The startsWidth array will contain the start of any accepted user-prop that 
+  The startsWidth array will contain the start of any accepted user-prop that
   starts with these characters.
   The exactMatch will contain a list of exact prop names that are accepted.
 */
 const USER_PROPS_SAFELIST = {
-  startsWith: ["data-", "aria-"],
-  exactMatch: []
+  startsWith: ["data-", "aria-"] as const,
+  exactMatch: [] as string[],
 };
 
+type SafeAttribute = `data-${string}` | `aria-${string}`;
+
 /**
  * doesPropStartWith: Function that takes a prop's key and runs it against all
  * options in the USER_PROPS_SAFELIST and checks to see if it starts with any
@@ -19,7 +21,7 @@ const USER_PROPS_SAFELIST = {
  * @returns {Boolean}: returns true if the key starts with an option or false if
  * otherwise
  */
-const doesPropStartWith = (key) => {
+const doesPropStartWith = (key: string): key is SafeAttribute => {
   let startsWith = false;
 
   USER_PROPS_SAFELIST.startsWith.forEach((starterString) => {
@@ -38,14 +40,15 @@ const doesPropStartWith = (key) => {
  * @returns {Boolean}: return true if whitelist contains that key, otherwise
  * returns false.
  */
-const isExactMatch = (key) => USER_PROPS_SAFELIST.exactMatch.includes(key);
+const isExactMatch = (key: string): key is SafeAttribute =>
+  USER_PROPS_SAFELIST.exactMatch.includes(key);
 
 /**
  * testIfSafeProp: tests prop's key against both startsWith and exactMatch values
  * @param {String} key: prop key to be tested against the whitelist
  * @returns {Boolean}: returns true if found in whitelist, otherwise returns false
  */
-const testIfSafeProp = (key) => {
+const testIfSafeProp = (key: string): key is SafeAttribute => {
   if (doesPropStartWith(key) || isExactMatch(key)) return true;
   return false;
 };
@@ -71,24 +74,26 @@ const getValue = (value, props) => {
  * @param {Object} props: props to be filtered against USER_PROPS_SAFELIST
  * @returns {Object}: object containing remaining acceptable props
  */
-export const getSafeUserProps = (props) => {
+export const getSafeUserProps = <T>(
+  props: T,
+): Record<SafeAttribute, string> => {
   const propsToFilter = { ...props };
   return Object.fromEntries(
     Object.entries(propsToFilter)
       .filter(([key]) => testIfSafeProp(key))
       .map(([key, value]) => {
         return [key, getValue(value, props)];
-      })
+      }),
   );
 };
 
 /**
  * Wraps a component and adds safe user props
  *
- * @param {ReactNode} component: parent component
+ * @param {ReactElement} component: parent component
  * @param {Object} props: props to be filtered
- * @returns {ReactNode} modified component
+ * @returns {ReactElement} modified component
  */
-export const withSafeUserProps = (component, props) => {
+export const withSafeUserProps = (component: React.ReactElement, props) => {
   return React.cloneElement(component, getSafeUserProps(props));
 };