fix: Allow any element as the child of Container

MetaMask · Sep 4, 2024 · 82018a3 · 82018a3
1 parent f5d32c7
commit 82018a3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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.