victory-core 36.9.2-next.3 → 36.9.2

package/src/victory-container/victory-container.tsx

@@ -1,12 +1,13 @@
-import React, { useRef } from "react";
-import { uniqueId } from "lodash";
+import React from "react";
+import { defaults, uniqueId, isObject } from "lodash";
 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";
-import { mergeRefs } from "../victory-util";
 
 export interface VictoryContainerProps {
   "aria-describedby"?: string;
@@ -20,6 +21,9 @@ export interface VictoryContainerProps {
   height?: number;
   name?: string;
   origin?: OriginType;
+  ouiaId?: number | string;
+  ouiaSafe?: boolean;
+  ouiaType?: string;
   polar?: boolean;
   portalComponent?: React.ReactElement;
   portalZIndex?: number;
@@ -35,181 +39,201 @@ export interface VictoryContainerProps {
   theme?: VictoryThemeDefinition;
   title?: string;
   width?: number;
-  // Props defined by the Open UI Automation (OUIA) 1.0-RC spec
-  // See https://ouia.readthedocs.io/en/latest/README.html#ouia-component
-  ouiaId?: number | string;
-  ouiaSafe?: boolean;
-  ouiaType?: string;
 }
 
-const defaultProps = {
-  className: "VictoryContainer",
-  portalComponent: <Portal />,
-  portalZIndex: 99,
-  responsive: true,
-  role: "img",
-};
-
-export function useVictoryContainer<TProps extends VictoryContainerProps>(
-  initialProps: TProps,
-) {
-  const props = { ...defaultProps, ...initialProps };
-  const { title, desc, width, height, responsive } = props;
-
-  const localContainerRef = useRef<HTMLDivElement>(null);
-
-  const [portalElement, setPortalElement] = React.useState<SVGSVGElement>();
-
-  const portalRef = (element: SVGSVGElement) => setPortalElement(element);
-
-  // Generated ID stored in ref because it needs to persist across renders
-  const generatedId = useRef(uniqueId("victory-container-"));
-  const containerId = props.containerId ?? generatedId.current;
-
-  const getIdForElement = (elName: string) => `${containerId}-${elName}`;
-
-  const userProps = UserProps.getSafeUserProps(props);
-
-  const dimensions = responsive
-    ? { width: "100%", height: "100%" }
-    : { width, height };
-
-  const viewBox = responsive ? `0 0 ${width} ${height}` : undefined;
-
-  const preserveAspectRatio = responsive
-    ? props.preserveAspectRatio
-    : undefined;
-
-  const ariaLabelledBy =
-    [title && getIdForElement("title"), props["aria-labelledby"]]
-      .filter(Boolean)
-      .join(" ") || undefined;
-
-  const ariaDescribedBy =
-    [desc && getIdForElement("desc"), props["aria-describedby"]]
-      .filter(Boolean)
-      .join(" ") || undefined;
-
-  const titleId = getIdForElement("title");
-  const descId = getIdForElement("desc");
-
-  return {
-    ...props,
-    titleId,
-    descId,
-    dimensions,
-    viewBox,
-    preserveAspectRatio,
-    ariaLabelledBy,
-    ariaDescribedBy,
-    userProps,
-    portalRef,
-    portalElement,
-    localContainerRef,
+export class VictoryContainer<
+  TProps extends VictoryContainerProps,
+> extends React.Component<TProps> {
+  static displayName = "VictoryContainer";
+  static role = "container";
+
+  static defaultProps = {
+    className: "VictoryContainer",
+    portalComponent: <Portal />,
+    portalZIndex: 99,
+    responsive: true,
+    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: TProps) {
+    super(props);
+    this.containerId =
+      !isObject(props) || props.containerId === undefined
+        ? uniqueId("victory-container-")
+        : props.containerId;
+
+    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 (Helpers.isFunction(this.props.containerRef)) {
+      this.props.containerRef(container);
+    }
+    this.containerRef = container;
+    return container;
   };
-}
 
-export const VictoryContainer = (initialProps: VictoryContainerProps) => {
-  const {
-    role,
-    title,
-    desc,
-    children,
-    className,
-    portalZIndex,
-    portalComponent,
-    width,
-    height,
-    style,
-    tabIndex,
-    responsive,
-    events,
-    ouiaId,
-    ouiaSafe,
-    ouiaType,
-    dimensions,
-    ariaDescribedBy,
-    ariaLabelledBy,
-    viewBox,
-    preserveAspectRatio,
-    userProps,
-    titleId,
-    descId,
-    portalElement,
-    portalRef,
-    containerRef,
-    localContainerRef,
-  } = useVictoryContainer(initialProps);
-
-  React.useEffect(() => {
-    if (!events?.onWheel) return;
-
-    const handleWheel = (e: WheelEvent) => e.preventDefault();
-
-    const container = localContainerRef?.current;
-    container?.addEventListener("wheel", handleWheel);
-
-    return () => {
-      container?.removeEventListener("wheel", handleWheel);
+  handleWheel = (e) => e.preventDefault();
+
+  componentDidMount() {
+    if (this.shouldHandleWheel && this.containerRef) {
+      this.containerRef.addEventListener("wheel", this.handleWheel);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.shouldHandleWheel && this.containerRef) {
+      this.containerRef.removeEventListener("wheel", this.handleWheel);
+    }
+  }
+
+  getIdForElement(elementName) {
+    return `${this.containerId}-${elementName}`;
+  }
+
+  // overridden in custom containers
+  getChildren(props) {
+    return props.children;
+  }
+
+  // Get props defined by the Open UI Automation (OUIA) 1.0-RC spec
+  // See https://ouia.readthedocs.io/en/latest/README.html#ouia-component
+  getOUIAProps(props) {
+    const { ouiaId, ouiaSafe, ouiaType } = props;
+    return {
+      ...(ouiaId && { "data-ouia-component-id": ouiaId }),
+      ...(ouiaType && { "data-ouia-component-type": ouiaType }),
+      ...(ouiaSafe !== undefined && { "data-ouia-safe": ouiaSafe }),
+    };
+  }
+
+  renderContainer(props, svgProps, style) {
+    const {
+      title,
+      desc,
+      portalComponent,
+      className,
+      width,
+      height,
+      portalZIndex,
+      responsive,
+    } = props;
+    const children = this.getChildren(props);
+    const dimensions = responsive
+      ? { width: "100%", height: "100%" }
+      : { width, height };
+    const divStyle = Object.assign(
+      {
+        pointerEvents: "none",
+        touchAction: "none",
+        position: "relative",
+      } as const,
+      dimensions,
+    );
+    const portalDivStyle = Object.assign(
+      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 } as const,
+      dimensions,
+    );
+    const svgStyle = Object.assign({ pointerEvents: "all" }, dimensions);
+    const portalSvgStyle = Object.assign({ overflow: "visible" }, dimensions);
+    const portalProps = {
+      width,
+      height,
+      viewBox: svgProps.viewBox,
+      preserveAspectRatio: svgProps.preserveAspectRatio,
+      style: portalSvgStyle,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <PortalContext.Provider value={{ portalElement }}>
-      <div
-        className={className}
-        style={{
-          ...style,
-          width: responsive ? style?.width : dimensions.width,
-          height: responsive ? style?.height : dimensions.height,
-          pointerEvents: "none",
-          touchAction: "none",
-          position: "relative",
+    return (
+      <PortalContext.Provider
+        value={{
+          portalUpdate: this.portalUpdate,
+          portalRegister: this.portalRegister,
+          portalDeregister: this.portalDeregister,
         }}
-        data-ouia-component-id={ouiaId}
-        data-ouia-component-type={ouiaType}
-        data-ouia-safe={ouiaSafe}
-        ref={mergeRefs([localContainerRef, containerRef])}
       >
-        <svg
-          width={width}
-          height={height}
-          tabIndex={tabIndex}
-          role={role}
-          aria-labelledby={ariaLabelledBy}
-          aria-describedby={ariaDescribedBy}
-          viewBox={viewBox}
-          preserveAspectRatio={preserveAspectRatio}
-          style={{ ...dimensions, pointerEvents: "all" }}
-          {...userProps}
-          {...events}
-        >
-          {title ? <title id={titleId}>{title}</title> : null}
-          {desc ? <desc id={descId}>{desc}</desc> : null}
-          {children}
-        </svg>
         <div
-          style={{
-            ...dimensions,
-            zIndex: portalZIndex,
-            position: "absolute",
-            top: 0,
-            left: 0,
-          }}
+          style={defaults({}, style, divStyle)}
+          className={className}
+          ref={this.saveContainerRef}
+          {...this.getOUIAProps(props)}
         >
-          {React.cloneElement(portalComponent, {
-            width,
-            height,
-            viewBox,
-            preserveAspectRatio,
-            style: { ...dimensions, overflow: "visible" },
-            ref: portalRef,
-          })}
+          <svg {...svgProps} style={svgStyle}>
+            {title ? (
+              <title id={this.getIdForElement("title")}>{title}</title>
+            ) : null}
+            {desc ? (
+              <desc id={this.getIdForElement("desc")}>{desc}</desc>
+            ) : null}
+            {children}
+          </svg>
+          <div style={portalDivStyle}>
+            {React.cloneElement(portalComponent, {
+              ...portalProps,
+              ref: this.savePortalRef,
+            })}
+          </div>
         </div>
-      </div>
-    </PortalContext.Provider>
-  );
-};
-
-VictoryContainer.role = "container";
+      </PortalContext.Provider>
+    );
+  }
+
+  render() {
+    const {
+      width,
+      height,
+      responsive,
+      events,
+      title,
+      desc,
+      tabIndex,
+      preserveAspectRatio,
+      role,
+    } = this.props;
+
+    const style = responsive
+      ? this.props.style
+      : Helpers.omit(this.props.style!, ["height", "width"]);
+
+    const userProps = UserProps.getSafeUserProps(this.props);
+
+    const svgProps = Object.assign(
+      {
+        width,
+        height,
+        tabIndex,
+        role,
+        "aria-labelledby":
+          [
+            title && this.getIdForElement("title"),
+            this.props["aria-labelledby"],
+          ]
+            .filter(Boolean)
+            .join(" ") || undefined,
+        "aria-describedby":
+          [desc && this.getIdForElement("desc"), this.props["aria-describedby"]]
+            .filter(Boolean)
+            .join(" ") || undefined,
+        viewBox: responsive ? `0 0 ${width} ${height}` : undefined,
+        preserveAspectRatio: responsive ? preserveAspectRatio : undefined,
+        ...userProps,
+      },
+      events,
+    );
+    return this.renderContainer(this.props, svgProps, style);
+  }
+}

package/src/victory-portal/portal-context.ts

@@ -1,15 +1,14 @@
 import React from "react";
 
 export interface PortalContextValue {
-  portalElement: SVGSVGElement | undefined;
+  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<
-  PortalContextValue | undefined
->(undefined);
-
+export const PortalContext = React.createContext({} as PortalContextValue);
 PortalContext.displayName = "PortalContext";

package/src/victory-portal/portal.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { PortalContextValue } from "./portal-context";
 
 export interface PortalProps {
   className?: string;
@@ -8,8 +9,44 @@ export interface PortalProps {
   width?: number;
 }
 
-export const Portal = React.forwardRef<SVGSVGElement, PortalProps>(
-  (props, ref) => {
-    return <svg ref={ref} {...props} />;
-  },
-);
+export class Portal
+  extends React.Component<PortalProps>
+  implements PortalContextValue
+{
+  static displayName = "Portal";
+
+  private readonly map: Record<string, React.ReactElement>;
+  private index: number;
+
+  constructor(props: PortalProps) {
+    super(props);
+    this.map = {};
+    this.index = 1;
+  }
+
+  public portalRegister = (): number => {
+    return ++this.index;
+  };
+
+  public portalUpdate = (key: number, element: React.ReactElement) => {
+    this.map[key] = element;
+    this.forceUpdate();
+  };
+
+  public portalDeregister = (key: number) => {
+    delete this.map[key];
+    this.forceUpdate();
+  };
+
+  public getChildren() {
+    return Object.keys(this.map).map((key) => {
+      const el = this.map[key];
+      return el ? React.cloneElement(el, { key }) : el;
+    });
+  }
+
+  // Overridden in victory-core-native
+  render() {
+    return <svg {...this.props}>{this.getChildren()}</svg>;
+  }
+}

package/src/victory-portal/victory-portal.tsx

@@ -3,47 +3,84 @@ import { defaults } from "lodash";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
 import { PortalContext } from "./portal-context";
-import { createPortal } from "react-dom";
 
 export interface VictoryPortalProps {
   children?: React.ReactElement;
   groupComponent?: React.ReactElement;
 }
 
-const defaultProps: VictoryPortalProps = {
-  groupComponent: <g />,
-};
+export interface VictoryPortal {
+  context: React.ContextType<typeof PortalContext>;
+}
+
+export class VictoryPortal extends React.Component<VictoryPortalProps> {
+  static displayName = "VictoryPortal";
+
+  static role = "portal";
+
+  static defaultProps = {
+    groupComponent: <g />,
+  };
+
+  static contextType = PortalContext;
+  private checkedContext!: boolean;
+  private portalKey!: number;
+  public renderInPlace!: boolean;
+  public element!: React.ReactElement;
+
+  componentDidMount() {
+    if (!this.checkedContext) {
+      if (typeof this.context.portalUpdate !== "function") {
+        const msg =
+          "`renderInPortal` is not supported outside of `VictoryContainer`. " +
+          "Component will be rendered in place";
+        Log.warn(msg);
+        this.renderInPlace = true;
+      }
+      this.checkedContext = true;
+    }
+    this.forceUpdate();
+  }
+
+  componentDidUpdate() {
+    if (!this.renderInPlace) {
+      this.portalKey = this.portalKey || this.context.portalRegister();
+      this.context.portalUpdate(this.portalKey, this.element);
+    }
+  }
 
-export const VictoryPortal = (initialProps: VictoryPortalProps) => {
-  const props = { ...defaultProps, ...initialProps };
-  const portalContext = React.useContext(PortalContext);
+  componentWillUnmount() {
+    if (this.context && this.context.portalDeregister) {
+      this.context.portalDeregister(this.portalKey);
+    }
+  }
 
-  if (!portalContext) {
-    const msg =
-      "`renderInPortal` is not supported outside of `VictoryContainer`. " +
-      "Component will be rendered in place";
-    Log.warn(msg);
+  // Overridden in victory-core-native
+  renderPortal(child: React.ReactElement) {
+    if (this.renderInPlace) {
+      return child;
+    }
+    this.element = child;
+    return null;
   }
 
-  const children = (
-    Array.isArray(props.children) ? props.children[0] : props.children
-  ) as React.ReactElement;
-  const { groupComponent } = props;
-  const childProps = (children && children.props) || {};
-  const standardProps = childProps.groupComponent
-    ? { groupComponent, standalone: false }
-    : {};
-  const newProps = defaults(
-    standardProps,
-    childProps,
-    Helpers.omit(props, ["children", "groupComponent"]),
-  );
-  const child = children && React.cloneElement(children, newProps);
-
-  // If there is no portal context, render the child in place
-  return portalContext?.portalElement
-    ? createPortal(child, portalContext.portalElement)
-    : child;
-};
-
-VictoryPortal.role = "portal";
+  render() {
+    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
+      ? { groupComponent, standalone: false }
+      : {};
+    const newProps = defaults(
+      standardProps,
+      childProps,
+      Helpers.omit(this.props, ["children", "groupComponent"]),
+    );
+    const child = children && React.cloneElement(children, newProps);
+    return this.renderPortal(child);
+  }
+}

package/src/victory-util/add-events.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { defaults, difference, isEmpty, pick } from "lodash";
-import type { ComponentEvent } from "./events";
-import * as Events from "./events";
+import { defaults, isEmpty, pick } from "lodash";
 import isEqual from "react-fast-compare";
+
+import { VictoryLabelableProps } from "../types/prop-types";
 import { VictoryTransition } from "../victory-transition/victory-transition";
 import { VictoryCommonProps, VictoryDatableProps } from "./common-props";
-import { VictoryLabelableProps } from "../types/prop-types";
+import { difference } from "./collection";
+import type { ComponentEvent } from "./events";
+import * as Events from "./events";
 import { isFunction, isNil } from "./helpers";
 
 // DISCLAIMER:

package/src/victory-util/axis.tsx

@@ -1,10 +1,19 @@
 import React from "react";
-import { defaults, identity, isObject, invert, uniq, orderBy } from "lodash";
+import { defaults, isObject, uniq, orderBy } from "lodash";
 import * as Collection from "./collection";
 import * as Domain from "./domain";
 import * as Helpers from "./helpers";
 import { D3Scale } from "../types/prop-types";
 
+/**
+ * Returns the first argument it receives
+ * @param value The value to return
+ * @returns The value given
+ */
+function identity<T>(value: T): T {
+  return value;
+}
+
 /**
  * Returns the axis (x or y) of a particular axis component
  * @param {Object} props: the props object.
@@ -146,7 +155,7 @@ function getDefaultTickFormat(props) {
       ? (x, index) => tickValues[index]
       : fallbackFormat;
   }
-  const invertedStringMap = stringMap && invert(stringMap);
+  const invertedStringMap = stringMap && Helpers.invert(stringMap);
   const tickValueArray = orderBy(Object.values(stringMap), (n) => n);
   const dataNames = tickValueArray.map((tick: any) => invertedStringMap[tick]);
   // string ticks should have one tick of padding at the beginning
@@ -252,7 +261,7 @@ export function getTickFormat(props, scale) {
     return (x, index) => filteredTickFormat[index];
   } else if (tickFormat && Helpers.isFunction(tickFormat)) {
     const applyStringTicks = (tick, index, ticks) => {
-      const invertedStringMap = invert(stringMap);
+      const invertedStringMap = Helpers.invert(stringMap);
       const stringTickArray = ticks.map((t) => invertedStringMap[t]);
       return props.tickFormat(invertedStringMap[tick], index, stringTickArray);
     };

package/src/victory-util/collection.tsx

@@ -34,6 +34,19 @@ export function containsOnlyStrings(
   );
 }
 
+/**
+ * Creates an array of array values not included in the other given arrays
+ * @param a The array to inspect
+ * @param b The values to exclude
+ * @returns The new array of filtered values
+ */
+export function difference<T>(a: Array<T>, b: Array<T>): Array<T> {
+  if (a && b) {
+    return a.filter((value) => !b.includes(value));
+  }
+  return [];
+}
+
 export function isArrayOfArrays<T>(
   collection: Array<T> | Array<Array<T>> | unknown,
 ): collection is Array<Array<T>> {