Allow Field in Box

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4yLB19XYAdGgHBPFlVOzCkb/JUZCjSajPRSQWs+a3uE=",
+    "shasum": "d1js9Y4zJwk7n/e47V5fdMreo1FBtVKl4GtPhfckZrs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "+0hxp1uhfCqe9KR+4RPDSPGHFTgRyGULKLn9XWwCmsY=",
+    "shasum": "VvMm+Zet1+q467UNweIuLLtYVoHoJdTeNjZn0xnEwO8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-controllers/src/interface/utils.test.tsx

@@ -242,6 +242,21 @@ describe('constructState', () => {
     });
   });
 
+  it('handles root level Field', () => {
+    const element = (
+      <Box>
+        <Field label="foo">
+          <Input name="foo" type="text" value="bar" />
+        </Field>
+      </Box>
+    );
+
+    const result = constructState({}, element);
+    expect(result).toStrictEqual({
+      foo: 'bar',
+    });
+  });
+
   it('handles root level inputs with value', () => {
     const element = (
       <Box>

packages/snaps-sdk/src/jsx/components/form/Field.ts

@@ -32,8 +32,7 @@ export type FieldProps = {
 const TYPE = 'Field';
 
 /**
- * A field component, which is used to create a form field. This component can
- * only be used as a child of the {@link Form} component.
+ * A field component, which is used to create a form field.
  *
  * @param props - The props of the component.
  * @param props.label - The label of the field.

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -567,6 +567,11 @@ describe('BoxStruct', () => {
       <Text>foo</Text>
       <Text>bar</Text>
     </Box>,
+    <Box>
+      <Field label="foo">
+        <Input name="foo" />
+      </Field>
+    </Box>,
     <Box>
       <Text>foo</Text>
       <Row label="label">
@@ -620,11 +625,6 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
-    <Box>
-      <Field label="foo">
-        <Input name="foo" />
-      </Field>
-    </Box>,
     <Box>
       <Value extra="foo" value="bar" />
     </Box>,

packages/snaps-sdk/src/jsx/validation.ts

@@ -507,22 +507,6 @@ export const FieldStruct: Describe<FieldElement> = element('Field', {
   children: FieldChildStruct,
 });
 
-/**
- * A subset of JSX elements that are allowed as children of the Form component.
- */
-export const FormChildStruct = children(
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  [FieldStruct, lazy(() => BoxChildStruct)],
-) as unknown as Struct<SnapsChildren<GenericSnapElement>, null>;
-
-/**
- * A struct for the {@link FormElement} type.
- */
-export const FormStruct: Describe<FormElement> = element('Form', {
-  children: FormChildStruct,
-  name: string(),
-});
-
 /**
  * A struct for the {@link BoldElement} type.
  */
@@ -584,6 +568,19 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
   center: optional(boolean()),
 });
 
+/**
+ * A subset of JSX elements that are allowed as children of the Form component.
+ */
+export const FormChildStruct = BoxChildrenStruct;
+
+/**
+ * A struct for the {@link FormElement} type.
+ */
+export const FormStruct: Describe<FormElement> = element('Form', {
+  children: FormChildStruct,
+  name: string(),
+});
+
 const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {
   if (
     typeof value.props.children === 'string' ||
@@ -796,6 +793,7 @@ export const BoxChildStruct = typedUnion([
   DividerStruct,
   DropdownStruct,
   RadioGroupStruct,
+  FieldStruct,
   FileInputStruct,
   FormStruct,
   HeadingStruct,