victory-core 37.0.2 → 37.1.0

package/es/victory-portal/victory-portal.js

@@ -2,57 +2,42 @@ import _defaults from "lodash/defaults";
 import React from "react";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
-import { PortalContext } from "./portal-context";
-export class VictoryPortal extends React.Component {
-  static displayName = "VictoryPortal";
-  static role = "portal";
-  static defaultProps = {
-    groupComponent: /*#__PURE__*/React.createElement("g", null)
+import { usePortalContext } from "./portal-context";
+const defaultProps = {
+  groupComponent: /*#__PURE__*/React.createElement("g", null)
+};
+export const VictoryPortal = initialProps => {
+  const props = {
+    ...defaultProps,
+    ...initialProps
   };
-  static contextType = PortalContext;
-  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();
+  const id = React.useId();
+  const portalContext = usePortalContext();
+  if (!portalContext) {
+    const msg = "`renderInPortal` is not supported outside of `VictoryContainer`. " + "Component will be rendered in place";
+    Log.warn(msg);
   }
-  componentDidUpdate() {
-    if (!this.renderInPlace) {
-      this.portalKey = this.portalKey || this.context.portalRegister();
-      this.context.portalUpdate(this.portalKey, this.element);
-    }
-  }
-  componentWillUnmount() {
-    if (this.context && this.context.portalDeregister) {
-      this.context.portalDeregister(this.portalKey);
-    }
-  }
-
-  // Overridden in victory-core-native
-  renderPortal(child) {
-    if (this.renderInPlace) {
-      return child;
-    }
-    this.element = child;
-    return null;
-  }
-  render() {
-    const children = Array.isArray(this.props.children) ? this.props.children[0] : this.props.children;
-    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 && /*#__PURE__*/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 && /*#__PURE__*/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/es/victory-util/index.d.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";

package/es/victory-util/index.js

@@ -1,4 +1,5 @@
 export * from "./add-events";
+export * from "./merge-refs";
 import * as _Axis from "./axis";
 export { _Axis as Axis };
 import * as _Collection from "./collection";

package/es/victory-util/merge-refs.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type Ref<T> = React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null;
+/**
+ * Used to merge multiple React refs into a single callback ref.
+ *
+ * @example
+ * ```tsx
+ * <div ref={mergeRefs([ref, forwardedRef])} />
+ * ```
+ */
+export declare function mergeRefs<T>(refs: Ref<T>[]): React.RefCallback<T>;
+export {};
+//# sourceMappingURL=merge-refs.d.ts.map

package/es/victory-util/merge-refs.js

@@ -0,0 +1,23 @@
+import * as Helpers from "./helpers";
+/**
+ * Used to merge multiple React refs into a single callback ref.
+ *
+ * @example
+ * ```tsx
+ * <div ref={mergeRefs([ref, forwardedRef])} />
+ * ```
+ */
+export function mergeRefs(refs) {
+  return value => {
+    refs.forEach(ref => {
+      // If the ref is a function, it's a callback ref and we call it with the value.
+      if (Helpers.isFunction(ref)) {
+        ref(value);
+      } else if (ref !== null && ref !== undefined) {
+        // If the ref is an object (not null and not undefined), it's an object ref.
+        // We assign the value to its 'current' property.
+        ref.current = value;
+      }
+    });
+  };
+}

package/lib/index.d.ts

@@ -9,8 +9,9 @@ export * from "./victory-clip-container/victory-clip-container";
 export * from "./victory-theme/types";
 export * from "./victory-theme/victory-theme";
 export * from "./victory-portal/portal";
-export * from "./victory-portal/portal-context";
 export * from "./victory-portal/victory-portal";
+export * from "./victory-portal/portal-context";
+export * from "./victory-portal/portal-outlet";
 export * from "./victory-primitives";
 export { Border as Box } from "./victory-primitives";
 export type { BorderProps as BoxProps } from "./victory-primitives";

package/lib/index.js

@@ -144,6 +144,18 @@ Object.keys(_portal).forEach(function (key) {
     }
   });
 });
+var _victoryPortal = require("./victory-portal/victory-portal");
+Object.keys(_victoryPortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _victoryPortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _victoryPortal[key];
+    }
+  });
+});
 var _portalContext = require("./victory-portal/portal-context");
 Object.keys(_portalContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -156,15 +168,15 @@ Object.keys(_portalContext).forEach(function (key) {
     }
   });
 });
-var _victoryPortal = require("./victory-portal/victory-portal");
-Object.keys(_victoryPortal).forEach(function (key) {
+var _portalOutlet = require("./victory-portal/portal-outlet");
+Object.keys(_portalOutlet).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _victoryPortal[key]) return;
+  if (key in exports && exports[key] === _portalOutlet[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _victoryPortal[key];
+      return _portalOutlet[key];
     }
   });
 });

package/lib/types/prop-types.d.ts

@@ -126,5 +126,6 @@ export declare type CoordinatesPropType = {
     x: number;
     y: number;
 };
+export declare type VictoryEventHandler = (event?: any, targetProps?: any, eventKey?: any, context?: any) => void;
 export {};
 //# sourceMappingURL=prop-types.d.ts.map

package/lib/victory-container/victory-container.d.ts

@@ -14,9 +14,6 @@ export interface VictoryContainerProps {
     height?: number;
     name?: string;
     origin?: OriginType;
-    ouiaId?: number | string;
-    ouiaSafe?: boolean;
-    ouiaType?: string;
     polar?: boolean;
     portalComponent?: React.ReactElement;
     portalZIndex?: number;
@@ -32,38 +29,35 @@ export interface VictoryContainerProps {
     theme?: VictoryThemeDefinition;
     title?: string;
     width?: number;
+    ouiaId?: number | string;
+    ouiaSafe?: boolean;
+    ouiaType?: string;
 }
-export declare class VictoryContainer<TProps extends VictoryContainerProps> extends React.Component<TProps> {
-    static displayName: string;
-    static role: string;
-    static defaultProps: {
-        className: string;
-        portalComponent: JSX.Element;
-        portalZIndex: number;
-        responsive: boolean;
-        role: string;
+export declare function useVictoryContainer<TProps extends VictoryContainerProps>(initialProps: TProps): {
+    className: string;
+    portalComponent: JSX.Element;
+    portalZIndex: number;
+    responsive: boolean;
+    role: string;
+} & TProps & {
+    titleId: string;
+    descId: string;
+    dimensions: {
+        width: string;
+        height: string;
+    } | {
+        width: number | undefined;
+        height: number | undefined;
     };
-    static contextType: React.Context<{
-        transitionTimer: import("..").Timer;
-        animationTimer: import("..").Timer;
-    }>;
-    private containerId;
-    private portalRef;
-    private containerRef;
-    private shouldHandleWheel;
-    constructor(props: TProps);
-    savePortalRef: (portal: any) => any;
-    portalUpdate: (key: any, el: any) => void;
-    portalRegister: () => number;
-    portalDeregister: (key: any) => void;
-    saveContainerRef: (container: HTMLElement) => HTMLElement;
-    handleWheel: (e: any) => any;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    getIdForElement(elementName: any): string;
-    getChildren(props: any): any;
-    getOUIAProps(props: any): any;
-    renderContainer(props: any, svgProps: any, style: any): JSX.Element;
-    render(): JSX.Element;
-}
+    viewBox: string | undefined;
+    preserveAspectRatio: string | undefined;
+    ariaLabelledBy: string | undefined;
+    ariaDescribedBy: string | undefined;
+    userProps: Record<string, string>;
+    localContainerRef: React.RefObject<HTMLDivElement>;
+};
+export declare const VictoryContainer: {
+    (initialProps: VictoryContainerProps): JSX.Element;
+    role: string;
+};
 //# sourceMappingURL=victory-container.d.ts.map

package/lib/victory-container/victory-container.js

@@ -4,186 +4,159 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VictoryContainer = void 0;
-var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+exports.useVictoryContainer = useVictoryContainer;
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
-var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _portal = require("../victory-portal/portal");
-var _portalContext = require("../victory-portal/portal-context");
-var _timerContext = _interopRequireDefault(require("../victory-util/timer-context"));
-var Helpers = _interopRequireWildcard(require("../victory-util/helpers"));
 var UserProps = _interopRequireWildcard(require("../victory-util/user-props"));
+var _victoryUtil = require("../victory-util");
+var _portalOutlet = require("../victory-portal/portal-outlet");
+var _portalContext = require("../victory-portal/portal-context");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-class VictoryContainer extends _react.default.Component {
-  static displayName = "VictoryContainer";
-  static role = "container";
-  static defaultProps = {
-    className: "VictoryContainer",
-    portalComponent: /*#__PURE__*/_react.default.createElement(_portal.Portal, null),
-    portalZIndex: 99,
-    responsive: true,
-    role: "img"
+const defaultProps = {
+  className: "VictoryContainer",
+  portalComponent: /*#__PURE__*/_react.default.createElement(_portal.Portal, null),
+  portalZIndex: 99,
+  responsive: true,
+  role: "img"
+};
+function useVictoryContainer(initialProps) {
+  const props = {
+    ...defaultProps,
+    ...initialProps
   };
-  static contextType = _timerContext.default;
-
-  // @ts-expect-error Ref will be initialized on mount
+  const {
+    title,
+    desc,
+    width,
+    height,
+    responsive
+  } = props;
+  const localContainerRef = (0, _react.useRef)(null);
 
-  // @ts-expect-error Ref will be initialized on mount
-
-  constructor(props) {
-    super(props);
-    this.containerId = !(0, _isObject2.default)(props) || props.containerId === undefined ? (0, _uniqueId2.default)("victory-container-") : props.containerId;
-    this.shouldHandleWheel = !!(props && props.events && props.events.onWheel);
-  }
-  savePortalRef = portal => {
-    this.portalRef = portal;
-    return portal;
+  // Generated ID stored in ref because it needs to persist across renders
+  const generatedId = (0, _react.useRef)((0, _uniqueId2.default)("victory-container-"));
+  const containerId = props.containerId ?? generatedId.current;
+  const getIdForElement = elName => `${containerId}-${elName}`;
+  const userProps = UserProps.getSafeUserProps(props);
+  const dimensions = responsive ? {
+    width: "100%",
+    height: "100%"
+  } : {
+    width,
+    height
   };
-  portalUpdate = (key, el) => this.portalRef.portalUpdate(key, el);
-  portalRegister = () => this.portalRef.portalRegister();
-  portalDeregister = key => this.portalRef.portalDeregister(key);
-  saveContainerRef = container => {
-    if (Helpers.isFunction(this.props.containerRef)) {
-      this.props.containerRef(container);
-    }
-    this.containerRef = container;
-    return container;
+  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
   };
-  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 VictoryContainer = initialProps => {
+  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.default.useEffect(() => {
+    if (!events?.onWheel) return;
+    const handleWheel = e => e.preventDefault();
+    const container = localContainerRef?.current;
+    container?.addEventListener("wheel", handleWheel);
+    return () => {
+      container?.removeEventListener("wheel", handleWheel);
     };
-    const divStyle = Object.assign({
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    style: {
+      ...style,
+      width: responsive ? style?.width : dimensions.width,
+      height: responsive ? style?.height : dimensions.height,
       pointerEvents: "none",
       touchAction: "none",
       position: "relative"
-    }, dimensions);
-    const portalDivStyle = Object.assign({
+    },
+    "data-ouia-component-id": ouiaId,
+    "data-ouia-component-type": ouiaType,
+    "data-ouia-safe": ouiaSafe,
+    ref: (0, _victoryUtil.mergeRefs)([localContainerRef, containerRef])
+  }, /*#__PURE__*/_react.default.createElement(_portalContext.PortalProvider, null, /*#__PURE__*/_react.default.createElement("svg", _extends({
+    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 ? /*#__PURE__*/_react.default.createElement("title", {
+    id: titleId
+  }, title) : null, desc ? /*#__PURE__*/_react.default.createElement("desc", {
+    id: descId
+  }, desc) : null, children), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      ...dimensions,
       zIndex: portalZIndex,
       position: "absolute",
       top: 0,
       left: 0
-    }, dimensions);
-    const svgStyle = Object.assign({
-      pointerEvents: "all"
-    }, dimensions);
-    const portalSvgStyle = Object.assign({
+    }
+  }, /*#__PURE__*/_react.default.createElement(_portalOutlet.PortalOutlet, {
+    as: portalComponent,
+    width: width,
+    height: height,
+    viewBox: viewBox,
+    preserveAspectRatio: preserveAspectRatio,
+    style: {
+      ...dimensions,
       overflow: "visible"
-    }, dimensions);
-    const portalProps = {
-      width,
-      height,
-      viewBox: svgProps.viewBox,
-      preserveAspectRatio: svgProps.preserveAspectRatio,
-      style: portalSvgStyle
-    };
-    return /*#__PURE__*/_react.default.createElement(_portalContext.PortalContext.Provider, {
-      value: {
-        portalUpdate: this.portalUpdate,
-        portalRegister: this.portalRegister,
-        portalDeregister: this.portalDeregister
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", _extends({
-      style: (0, _defaults2.default)({}, style, divStyle),
-      className: className,
-      ref: this.saveContainerRef
-    }, this.getOUIAProps(props)), /*#__PURE__*/_react.default.createElement("svg", _extends({}, svgProps, {
-      style: svgStyle
-    }), title ? /*#__PURE__*/_react.default.createElement("title", {
-      id: this.getIdForElement("title")
-    }, title) : null, desc ? /*#__PURE__*/_react.default.createElement("desc", {
-      id: this.getIdForElement("desc")
-    }, desc) : null, children), /*#__PURE__*/_react.default.createElement("div", {
-      style: portalDivStyle
-    }, /*#__PURE__*/_react.default.cloneElement(portalComponent, {
-      ...portalProps,
-      ref: this.savePortalRef
-    }))));
-  }
-  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);
-  }
-}
-exports.VictoryContainer = VictoryContainer;
+    }
+  }))));
+};
+exports.VictoryContainer = VictoryContainer;
+VictoryContainer.role = "container";

package/lib/victory-portal/portal-context.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 export interface PortalContextValue {
-    portalRegister(): number;
-    portalUpdate(key: number, element: React.ReactElement): void;
-    portalDeregister(key: number): void;
+    addChild: (id: string, node: React.ReactElement) => void;
+    removeChild: (id: string) => void;
+    children: Map<string, React.ReactElement>;
 }
-/**
- * The React context object consumers may use to access the context of the
- * portal.
- */
-export declare const PortalContext: React.Context<PortalContextValue>;
+export declare const PortalContext: React.Context<PortalContextValue | undefined>;
+export declare const usePortalContext: () => PortalContextValue | undefined;
+export interface PortalProviderProps {
+    children?: React.ReactNode;
+}
+export declare const PortalProvider: ({ children }: PortalProviderProps) => JSX.Element;
 //# sourceMappingURL=portal-context.d.ts.map