victory-core 37.0.2 → 37.1.0

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

@@ -1,13 +1,13 @@
-import React from "react";
-import { defaults, uniqueId, isObject } from "lodash";
+import React, { useRef } from "react";
+import { uniqueId } 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";
+import { PortalOutlet } from "../victory-portal/portal-outlet";
+import { PortalProvider } from "../victory-portal/portal-context";
 
 export interface VictoryContainerProps {
   "aria-describedby"?: string;
@@ -21,9 +21,6 @@ export interface VictoryContainerProps {
   height?: number;
   name?: string;
   origin?: OriginType;
-  ouiaId?: number | string;
-  ouiaSafe?: boolean;
-  ouiaType?: string;
   polar?: boolean;
   portalComponent?: React.ReactElement;
   portalZIndex?: number;
@@ -39,201 +36,176 @@ 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;
 }
 
-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;
+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);
+
+  // 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,
+    localContainerRef,
   };
-  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;
-  };
-
-  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 }),
+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,
+    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);
     };
-  }
-
-  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(
-      {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...style,
+        width: responsive ? style?.width : dimensions.width,
+        height: responsive ? style?.height : dimensions.height,
         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,
-    };
-    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])}
+    >
+      <PortalProvider>
+        <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={defaults({}, style, divStyle)}
-          className={className}
-          ref={this.saveContainerRef}
-          {...this.getOUIAProps(props)}
+          style={{
+            ...dimensions,
+            zIndex: portalZIndex,
+            position: "absolute",
+            top: 0,
+            left: 0,
+          }}
         >
-          <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>
+          <PortalOutlet
+            as={portalComponent}
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            preserveAspectRatio={preserveAspectRatio}
+            style={{
+              ...dimensions,
+              overflow: "visible",
+            }}
+          />
         </div>
-      </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);
-  }
-}
+      </PortalProvider>
+    </div>
+  );
+};
+
+VictoryContainer.role = "container";

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

@@ -0,0 +1,63 @@
+import React from "react";
+
+export interface PortalContextValue {
+  addChild: (id: string, node: React.ReactElement) => void;
+  removeChild: (id: string) => void;
+  children: Map<string, React.ReactElement>;
+}
+
+export const PortalContext = React.createContext<
+  PortalContextValue | undefined
+>(undefined);
+PortalContext.displayName = "PortalContext";
+
+export const usePortalContext = () => {
+  const context = React.useContext(PortalContext);
+  return context;
+};
+
+export interface PortalProviderProps {
+  children?: React.ReactNode;
+}
+
+export const PortalProvider = ({ children }: PortalProviderProps) => {
+  const [portalChildren, setPortalChildren] = React.useState<
+    Map<string, React.ReactElement>
+  >(new Map());
+  const addChild = React.useCallback(
+    (id: string, element: React.ReactElement) => {
+      setPortalChildren((prevChildren) => {
+        const nextChildren = new Map(prevChildren);
+        nextChildren.set(id, element);
+        return nextChildren;
+      });
+    },
+    [setPortalChildren],
+  );
+
+  const removeChild = React.useCallback(
+    (id: string) => {
+      setPortalChildren((prevChildren) => {
+        const nextChildren = new Map(prevChildren);
+        nextChildren.delete(id);
+        return nextChildren;
+      });
+    },
+    [setPortalChildren],
+  );
+
+  const contextValue: PortalContextValue = React.useMemo(
+    () => ({
+      addChild,
+      removeChild,
+      children: portalChildren,
+    }),
+    [addChild, removeChild, portalChildren],
+  );
+
+  return (
+    <PortalContext.Provider value={contextValue}>
+      {children}
+    </PortalContext.Provider>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { usePortalContext } from "./portal-context";
+
+export interface PortalOutletProps {
+  as: React.ReactElement;
+  width?: number;
+  height?: number;
+  viewBox?: string;
+  preserveAspectRatio?: string;
+  style?: React.CSSProperties;
+  children?: (children: React.ReactElement[]) => React.ReactNode | undefined;
+}
+
+export const PortalOutlet = ({
+  as: portalComponent,
+  ...props
+}: PortalOutletProps) => {
+  const portalContext = usePortalContext();
+
+  if (!portalContext) {
+    return null;
+  }
+
+  const children = Array.from(portalContext.children.values());
+  return React.cloneElement(portalComponent, props, children);
+};

package/src/victory-portal/portal.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { PortalContextValue } from "./portal-context";
 
 export interface PortalProps {
   className?: string;
@@ -9,44 +8,8 @@ export interface PortalProps {
   width?: number;
 }
 
-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>;
-  }
-}
+export const Portal = React.forwardRef<SVGSVGElement, PortalProps>(
+  (props, ref) => {
+    return <svg ref={ref} {...props} />;
+  },
+);

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

@@ -2,85 +2,56 @@ import React from "react";
 import { defaults } from "lodash";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
-import { PortalContext } from "./portal-context";
+import { usePortalContext } from "./portal-context";
 
 export interface VictoryPortalProps {
-  children?: React.ReactElement;
+  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";
-
-  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);
-    }
-  }
+const defaultProps: Partial<VictoryPortalProps> = {
+  groupComponent: <g />,
+};
 
-  componentWillUnmount() {
-    if (this.context && this.context.portalDeregister) {
-      this.context.portalDeregister(this.portalKey);
-    }
-  }
+export const VictoryPortal = (initialProps: VictoryPortalProps) => {
+  const props = { ...defaultProps, ...initialProps };
+  const id = React.useId();
+  const portalContext = usePortalContext();
 
-  // Overridden in victory-core-native
-  renderPortal(child: React.ReactElement) {
-    if (this.renderInPlace) {
-      return child;
-    }
-    this.element = child;
-    return null;
+  if (!portalContext) {
+    const msg =
+      "`renderInPortal` is not supported outside of `VictoryContainer`. " +
+      "Component will be rendered in place";
+    Log.warn(msg);
   }
 
-  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);
-  }
-}
+  const children = Array.isArray(props.children)
+    ? props.children[0]
+    : props.children;
+  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"]),
+    { key: childProps.key ?? id },
+  );
+  const child = children && React.cloneElement(children, newProps);
+
+  React.useEffect(() => {
+    portalContext?.addChild(id, child);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.children]);
+
+  React.useEffect(() => {
+    return () => portalContext?.removeChild(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return portalContext ? null : child;
+};
+
+VictoryPortal.role = "portal";

package/src/victory-util/index.ts

@@ -1,4 +1,5 @@
 export * from "./add-events";
+export * from "./merge-refs";
 export * as Axis from "./axis";
 export * as Collection from "./collection";
 export * from "./common-props";