diff --git a/packages/snaps-sdk/src/jsx/components/Container.ts b/packages/snaps-sdk/src/jsx/components/Container.ts index d6a6bf8c9b..4277fcab54 100644 --- a/packages/snaps-sdk/src/jsx/components/Container.ts +++ b/packages/snaps-sdk/src/jsx/components/Container.ts @@ -1,5 +1,5 @@ +import type { GenericSnapElement } from '../component'; import { createSnapComponent } from '../component'; -import type { BoxElement } from './Box'; import type { FooterElement } from './Footer'; /** @@ -8,7 +8,7 @@ import type { FooterElement } from './Footer'; * @property children - The Box and the Footer or the Box element. */ export type ContainerProps = { - children: [BoxElement, FooterElement] | BoxElement; + children: [GenericSnapElement, FooterElement] | GenericSnapElement; }; const TYPE = 'Container'; diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index f30d9544cc..d470b6ee0f 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -616,6 +616,15 @@ describe('ContainerStruct', () => { <Button name="confirm">Confirm</Button> </Footer> </Container>, + <Container> + <Text>Hello world!</Text> + </Container>, + <Container> + <Text>Hello world!</Text> + <Footer> + <Button name="confirm">Confirm</Button> + </Footer> + </Container>, ])('validates a container element', (value) => { expect(is(value, ContainerStruct)).toBe(true); }); diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 565de3486e..5e04481301 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -471,25 +471,6 @@ export const FooterStruct: Describe<FooterElement> = element('Footer', { children: FooterChildStruct, }); -/** - * A subset of JSX elements that are allowed as children of the Container component. - * This set should include a single Box or a tuple of a Box and a Footer component. - */ -export const ContainerChildStruct = nullUnion([ - tuple([BoxStruct, FooterStruct]), - BoxStruct, -]); - -/** - * A struct for the {@link ContainerElement} type. - */ -export const ContainerStruct: Describe<ContainerElement> = element( - 'Container', - { - children: ContainerChildStruct, - }, -); - /** * A struct for the {@link CopyableElement} type. */ @@ -636,6 +617,22 @@ export const BoxChildStruct = typedUnion([ SectionStruct, ]); +/** + * A struct for the {@link ContainerElement} type. + */ +export const ContainerStruct: Describe<ContainerElement> = element( + 'Container', + { + children: nullUnion([ + tuple([BoxChildStruct, FooterStruct]), + BoxChildStruct, + ]) as unknown as Struct< + [GenericSnapElement, FooterElement] | GenericSnapElement, + null + >, + }, +); + /** * For now, the allowed JSX elements at the root are the same as the allowed * children of the Box component.