Allow Field in Box

Author: GuillaumeRx

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

@@ -512,7 +512,7 @@ export const FieldStruct: Describe<FieldElement> = element('Field', {
  */
 export const FormChildStruct = children(
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  [FieldStruct, lazy(() => BoxChildStruct)],
+  [lazy(() => BoxChildStruct)],
 ) as unknown as Struct<SnapsChildren<GenericSnapElement>, null>;
 
 /**
@@ -796,6 +796,7 @@ export const BoxChildStruct = typedUnion([
   DividerStruct,
   DropdownStruct,
   RadioGroupStruct,
+  FieldStruct,
   FileInputStruct,
   FormStruct,
   HeadingStruct,