diff --git a/.changeset/fuzzy-candles-rule.md b/.changeset/fuzzy-candles-rule.md
new file mode 100644
index 000000000..786e33e3e
--- /dev/null
+++ b/.changeset/fuzzy-candles-rule.md
@@ -0,0 +1,5 @@
+---
+"victory-create-container": patch
+---
+
+update createContainer types to be backwards compatibile
diff --git a/packages/victory-create-container/src/create-container.tsx b/packages/victory-create-container/src/create-container.tsx
index 27dec0c95..b471ba1e1 100644
--- a/packages/victory-create-container/src/create-container.tsx
+++ b/packages/victory-create-container/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 extends ContainerType
+ ? B extends ContainerType
+ ? ContainerProps & ContainerProps // 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 & ContainerProps,
+ props: CombinedContainerProps,
) => {
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 & ContainerProps,
+ props: CombinedContainerProps,
) =>
combineDefaultEvents([
...ContainerA.defaultEvents(props),