victory-create-container 37.3.0 → 37.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # victory-create-container
 
+## 37.3.1
+
+### Patch Changes
+
+- update createContainer types to be backwards compatibile ([#2933](https://github.com/FormidableLabs/victory/pull/2933))
+
 ## 37.3.0
 
 ## 37.2.0

package/dist/victory-create-container.js

@@ -121,6 +121,8 @@ const CONTAINER_COMPONENTS_WEB = {
   voronoi: victory_voronoi_container__WEBPACK_IMPORTED_MODULE_9__.VictoryVoronoiContainer
 };
 function makeCreateContainerFunction(containerComponents, VictoryContainerBase) {
+  // Helper type to support backwards compatibility with old types
+
   return function combineContainers(containerA, containerB) {
     const ContainerA = containerComponents[containerA];
     const ContainerB = containerComponents[containerB];

package/es/create-container.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
-import { VictoryContainer } from "victory-core";
+import { VictoryContainer, VictoryContainerProps } from "victory-core";
 export declare type ContainerType = "zoom" | "selection" | "brush" | "cursor" | "voronoi";
 declare type ContainerComponents = Record<ContainerType, React.ComponentType<any> & {
     defaultEvents: (props: any) => any[];
 }>;
-export declare function makeCreateContainerFunction<TContainerComponents extends ContainerComponents>(containerComponents: TContainerComponents, VictoryContainerBase: typeof VictoryContainer): <TContainerA extends ContainerType, TContainerB extends ContainerType>(containerA: TContainerA, containerB: TContainerB) => {
-    (props: React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]>): JSX.Element;
+export declare function makeCreateContainerFunction<TContainerComponents extends ContainerComponents>(containerComponents: TContainerComponents, VictoryContainerBase: typeof VictoryContainer): <TContainerA extends ContainerType | VictoryContainerProps, TContainerB extends ContainerType | VictoryContainerProps>(containerA: TContainerA extends ContainerType ? TContainerA : ContainerType, containerB: TContainerB extends ContainerType ? TContainerB : ContainerType) => {
+    (props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): JSX.Element;
     displayName: string;
     role: string;
-    defaultEvents(props: React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]>): ({
+    defaultEvents(props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): ({
         target: string;
         eventHandlers: any;
     } | null)[];
 };
-export declare const createContainer: <TContainerA extends ContainerType, TContainerB extends ContainerType>(containerA: TContainerA, containerB: TContainerB) => {
-    (props: React.ComponentProps<{
+export declare const createContainer: <TContainerA extends ContainerType | VictoryContainerProps, TContainerB extends ContainerType | VictoryContainerProps>(containerA: TContainerA extends ContainerType ? TContainerA : ContainerType, containerB: TContainerB extends ContainerType ? TContainerB : ContainerType) => {
+    (props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<{
         zoom: {
             (initialProps: import("victory-zoom-container").VictoryZoomContainerProps): JSX.Element;
             role: string;
@@ -202,10 +202,10 @@ export declare const createContainer: <TContainerA extends ContainerType, TConta
                 };
             })[];
         };
-    }[TContainerB]>): JSX.Element;
+    }[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): JSX.Element;
     displayName: string;
     role: string;
-    defaultEvents(props: React.ComponentProps<{
+    defaultEvents(props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<{
         zoom: {
             (initialProps: import("victory-zoom-container").VictoryZoomContainerProps): JSX.Element;
             role: string;
@@ -393,7 +393,7 @@ export declare const createContainer: <TContainerA extends ContainerType, TConta
                 };
             })[];
         };
-    }[TContainerB]>): ({
+    }[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): ({
         target: string;
         eventHandlers: any;
     } | null)[];

package/es/create-container.js

@@ -80,6 +80,8 @@ const CONTAINER_COMPONENTS_WEB = {
   voronoi: VictoryVoronoiContainer
 };
 export function makeCreateContainerFunction(containerComponents, VictoryContainerBase) {
+  // Helper type to support backwards compatibility with old types
+
   return function combineContainers(containerA, containerB) {
     const ContainerA = containerComponents[containerA];
     const ContainerB = containerComponents[containerB];

package/lib/create-container.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
-import { VictoryContainer } from "victory-core";
+import { VictoryContainer, VictoryContainerProps } from "victory-core";
 export declare type ContainerType = "zoom" | "selection" | "brush" | "cursor" | "voronoi";
 declare type ContainerComponents = Record<ContainerType, React.ComponentType<any> & {
     defaultEvents: (props: any) => any[];
 }>;
-export declare function makeCreateContainerFunction<TContainerComponents extends ContainerComponents>(containerComponents: TContainerComponents, VictoryContainerBase: typeof VictoryContainer): <TContainerA extends ContainerType, TContainerB extends ContainerType>(containerA: TContainerA, containerB: TContainerB) => {
-    (props: React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]>): JSX.Element;
+export declare function makeCreateContainerFunction<TContainerComponents extends ContainerComponents>(containerComponents: TContainerComponents, VictoryContainerBase: typeof VictoryContainer): <TContainerA extends ContainerType | VictoryContainerProps, TContainerB extends ContainerType | VictoryContainerProps>(containerA: TContainerA extends ContainerType ? TContainerA : ContainerType, containerB: TContainerB extends ContainerType ? TContainerB : ContainerType) => {
+    (props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): JSX.Element;
     displayName: string;
     role: string;
-    defaultEvents(props: React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]>): ({
+    defaultEvents(props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<TContainerComponents[TContainerA]> & React.ComponentProps<TContainerComponents[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): ({
         target: string;
         eventHandlers: any;
     } | null)[];
 };
-export declare const createContainer: <TContainerA extends ContainerType, TContainerB extends ContainerType>(containerA: TContainerA, containerB: TContainerB) => {
-    (props: React.ComponentProps<{
+export declare const createContainer: <TContainerA extends ContainerType | VictoryContainerProps, TContainerB extends ContainerType | VictoryContainerProps>(containerA: TContainerA extends ContainerType ? TContainerA : ContainerType, containerB: TContainerB extends ContainerType ? TContainerB : ContainerType) => {
+    (props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<{
         zoom: {
             (initialProps: import("victory-zoom-container").VictoryZoomContainerProps): JSX.Element;
             role: string;
@@ -202,10 +202,10 @@ export declare const createContainer: <TContainerA extends ContainerType, TConta
                 };
             })[];
         };
-    }[TContainerB]>): JSX.Element;
+    }[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): JSX.Element;
     displayName: string;
     role: string;
-    defaultEvents(props: React.ComponentProps<{
+    defaultEvents(props: TContainerA extends ContainerType ? TContainerB extends ContainerType ? React.ComponentProps<{
         zoom: {
             (initialProps: import("victory-zoom-container").VictoryZoomContainerProps): JSX.Element;
             role: string;
@@ -393,7 +393,7 @@ export declare const createContainer: <TContainerA extends ContainerType, TConta
                 };
             })[];
         };
-    }[TContainerB]>): ({
+    }[TContainerB]> : TContainerA & TContainerB : TContainerA & TContainerB): ({
         target: string;
         eventHandlers: any;
     } | null)[];

package/lib/create-container.js

@@ -88,6 +88,8 @@ const CONTAINER_COMPONENTS_WEB = {
   voronoi: _victoryVoronoiContainer.VictoryVoronoiContainer
 };
 function makeCreateContainerFunction(containerComponents, VictoryContainerBase) {
+  // Helper type to support backwards compatibility with old types
+
   return function combineContainers(containerA, containerB) {
     const ContainerA = containerComponents[containerA];
     const ContainerB = containerComponents[containerB];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-create-container",
-  "version": "37.3.0",
+  "version": "37.3.1",
   "description": "Container Helper for Victory",
   "keywords": [
     "data visualization",
@@ -21,12 +21,12 @@
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.19",
-    "victory-brush-container": "37.3.0",
-    "victory-core": "37.3.0",
-    "victory-cursor-container": "37.3.0",
-    "victory-selection-container": "37.3.0",
-    "victory-voronoi-container": "37.3.0",
-    "victory-zoom-container": "37.3.0"
+    "victory-brush-container": "37.3.1",
+    "victory-core": "37.3.1",
+    "victory-cursor-container": "37.3.1",
+    "victory-selection-container": "37.3.1",
+    "victory-voronoi-container": "37.3.1",
+    "victory-zoom-container": "37.3.1"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

package/src/create-container.tsx

@@ -7,7 +7,7 @@ import {
   useVictorySelectionContainer,
 } from "victory-selection-container";
 import React from "react";
-import { VictoryContainer } from "victory-core";
+import { VictoryContainer, VictoryContainerProps } from "victory-core";
 import { forOwn, groupBy, isEmpty, toPairs } from "lodash";
 import {
   VictoryVoronoiContainer,
@@ -123,17 +123,27 @@ export function makeCreateContainerFunction<
     TContainerComponents[T]
   >;
 
+  // Helper type to support backwards compatibility with old types
+  type CombinedContainerProps<A, B> = A extends ContainerType
+    ? B extends ContainerType
+      ? ContainerProps<A> & ContainerProps<B> // New style: infer from container types
+      : A & B // Old style: expect props as generic types
+    : A & B;
+
   return function combineContainers<
-    TContainerA extends ContainerType,
-    TContainerB extends ContainerType,
-  >(containerA: TContainerA, containerB: TContainerB) {
-    const ContainerA = containerComponents[containerA];
-    const ContainerB = containerComponents[containerB];
-    const useContainerA = CONTAINER_HOOKS[containerA];
-    const useContainerB = CONTAINER_HOOKS[containerB];
+    TContainerA extends ContainerType | VictoryContainerProps,
+    TContainerB extends ContainerType | VictoryContainerProps,
+  >(
+    containerA: TContainerA extends ContainerType ? TContainerA : ContainerType,
+    containerB: TContainerB extends ContainerType ? TContainerB : ContainerType,
+  ) {
+    const ContainerA = containerComponents[containerA as ContainerType];
+    const ContainerB = containerComponents[containerB as ContainerType];
+    const useContainerA = CONTAINER_HOOKS[containerA as ContainerType];
+    const useContainerB = CONTAINER_HOOKS[containerB as ContainerType];
 
     const CombinedContainer = (
-      props: ContainerProps<TContainerA> & ContainerProps<TContainerB>,
+      props: CombinedContainerProps<TContainerA, TContainerB>,
     ) => {
       const { children: childrenA, props: propsA } = useContainerA(props);
       const { children: combinedChildren, props: combinedProps } =
@@ -152,7 +162,7 @@ export function makeCreateContainerFunction<
     CombinedContainer.displayName = `Victory${containerA}${containerB}Container`;
     CombinedContainer.role = "container";
     CombinedContainer.defaultEvents = (
-      props: ContainerProps<TContainerA> & ContainerProps<TContainerB>,
+      props: CombinedContainerProps<TContainerA, TContainerB>,
     ) =>
       combineDefaultEvents([
         ...ContainerA.defaultEvents(props),