diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json index 289115753c..efc5e5bc16 100644 --- a/packages/examples/packages/bip32/snap.manifest.json +++ b/packages/examples/packages/bip32/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "eGQ6Df8XxUy7H+BzRY0ejWy9Q0sIA5R2Nw0iBTq+de8=", + "shasum": "R8Of/lcLuLbr2AAcUsDD6e0cdbOdHHvHlwxs+BoAHtE=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json index 2791abf7ad..46fae73146 100644 --- a/packages/examples/packages/bip44/snap.manifest.json +++ b/packages/examples/packages/bip44/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "nX6HGVCdxTxTLiNPjLNQzpJ+fTtkp5xAIcU1b/APImg=", + "shasum": "8Iyfr16llKRg4UoML6rvo+76L+R6KhKxg8p0GdAczts=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index aa4d4d21ab..459e4a0880 100644 --- a/packages/examples/packages/browserify-plugin/snap.manifest.json +++ b/packages/examples/packages/browserify-plugin/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "33evXsKKimuz+hkPv+Rxa5Ng9IKOINWwEgHU9vBK63E=", + "shasum": "27ak99bFxoi5UmR0mvMhQWYJfsyZjeYva4kPd2sklgc=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json index 9345791009..4ee0f0c1f1 100644 --- a/packages/examples/packages/browserify/snap.manifest.json +++ b/packages/examples/packages/browserify/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "3PKsX/N6a6kXY30gtpgti4NEeGiSwxZEV6e+U5HP6Iw=", + "shasum": "f/RSumnRBLYDElSvfXJ98Q+k3qOxINGvpiwGhxe+TFA=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/client-status/snap.manifest.json b/packages/examples/packages/client-status/snap.manifest.json index 6529f58d68..d1ceab438a 100644 --- a/packages/examples/packages/client-status/snap.manifest.json +++ b/packages/examples/packages/client-status/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "fFtbo7U1pKoqTQF0r7QZikEs8Nafav3ou/Wm1raUVA4=", + "shasum": "LPHBZ8HaW5f2snnJ+7932mfqASK7jcXejfFjVyJ/VXA=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json index 58aea07d6e..b6707b2e8d 100644 --- a/packages/examples/packages/cronjobs/snap.manifest.json +++ b/packages/examples/packages/cronjobs/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "TDGaiphTZ8OS6xph5aIa97SPOVXjJN0ORMflp1XHQoY=", + "shasum": "UDkFbOMBRfWLD2oh0hlFurcqT3W33ysAIjUOBaEx/+k=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json index 2d0b376c30..ba5c77fd69 100644 --- a/packages/examples/packages/dialogs/snap.manifest.json +++ b/packages/examples/packages/dialogs/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "cW20+wD/Lveazji0PKSrfzgWmKjt30kxvSY9Na2JSfQ=", + "shasum": "klyP48icUHenhFEjXT4cvgSPT30ZFMqUTFBb2YqS4lI=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/ethereum-provider/snap.manifest.json b/packages/examples/packages/ethereum-provider/snap.manifest.json index 2729e46be8..0904219b8d 100644 --- a/packages/examples/packages/ethereum-provider/snap.manifest.json +++ b/packages/examples/packages/ethereum-provider/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "9RGytF98DSIh9XEKnE1qIZyP9YMDgZ+FulzEr0/brF0=", + "shasum": "pqp9lYbT/4A1Z2vgozgLu/kxvjdmlfFjmowIMOEsD0k=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json index 487b0a2639..652c58746f 100644 --- a/packages/examples/packages/ethers-js/snap.manifest.json +++ b/packages/examples/packages/ethers-js/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "WkJL2n6iaJJaNdytMBZUMuDXAt14mq6/5+/8PbsrIdw=", + "shasum": "E+ijMmCKNfgzuyCynS6PHT0c2F+22NlJpAE0cbNSlcM=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/file-upload/snap.manifest.json b/packages/examples/packages/file-upload/snap.manifest.json index 653894102d..e09751f081 100644 --- a/packages/examples/packages/file-upload/snap.manifest.json +++ b/packages/examples/packages/file-upload/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "U1HtU+2ib2qDOgovRtZAiIjA+rnC7OueDjls6Ebl6TM=", + "shasum": "UvAKkgLp43SSDI/mUdvjehfLGrQq1rB5lPfETxDTqT4=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json index 102c219515..70584a50a9 100644 --- a/packages/examples/packages/get-entropy/snap.manifest.json +++ b/packages/examples/packages/get-entropy/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "D+ItCb37EwIUZc58Nq8czmYcAwpllqd2FKgVTfuAvwY=", + "shasum": "GXJcuL0Bz7RCGE39iUk1v6QSmlMaA0gXJSekaE2l0cw=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/get-file/snap.manifest.json b/packages/examples/packages/get-file/snap.manifest.json index aef5c33f1a..47138775ce 100644 --- a/packages/examples/packages/get-file/snap.manifest.json +++ b/packages/examples/packages/get-file/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "9hRIxvPEetJVFo3Ed+2BdZ7DANNVUw0Tjo+5UK5mefc=", + "shasum": "BzCYiUBdWeViyl4Ux80SGv2kVJapohrpC/dTW5yM+iA=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json index 54c44e1bb0..e393dbb100 100644 --- a/packages/examples/packages/home-page/snap.manifest.json +++ b/packages/examples/packages/home-page/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "Q6hggrSrhxfVVa/QCBV43ZKj52rtINLPRgDEyIZmjZw=", + "shasum": "dZ9WgkIrRPAi7nKbYBSeaD3xV9rKf0VT9/5FgrrK4QE=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json index 0ac0eada65..d7be65bc4c 100644 --- a/packages/examples/packages/images/snap.manifest.json +++ b/packages/examples/packages/images/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "f4Y1cNVB6h/jOCkIpIMjSls1URfQQWecUjAPTguv3MA=", + "shasum": "r+Vr5LYfHiuQZuvypm1jQNfQzdp7unl6AgskaGCFJnM=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json index c608feb729..708a6a9b70 100644 --- a/packages/examples/packages/interactive-ui/snap.manifest.json +++ b/packages/examples/packages/interactive-ui/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "awa6GvnLTq3455FcrOHjgEbdA08A2PMmKw8Jqv/BwR0=", + "shasum": "/Xgz50XZhm49exI9MtCOtWRox1N894/sLTYZIGYrFX4=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json index 74f1d8f0f8..e3ed4b2b71 100644 --- a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json +++ b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "xKqurVfpdlotaOEodz5X5LbAp343Mcu8JXQ+zfTiyUU=", + "shasum": "sDb0ugSBJGrdF7ObFjJ3GKVkE/8cManTyFxzE+27wzg=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json index 88be2c322b..7c80c466ab 100644 --- a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json +++ b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "BoL6X/BzHLVMASCxnwAUAw+2XzD9B8gSvE7GcbJjfug=", + "shasum": "xPa7zpGbgq01EtWw8qxQFqzteqMYxDXn2nevqoVzJJs=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/json-rpc/snap.manifest.json b/packages/examples/packages/json-rpc/snap.manifest.json index 7d15d1cfde..d19267db87 100644 --- a/packages/examples/packages/json-rpc/snap.manifest.json +++ b/packages/examples/packages/json-rpc/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "R1rq0U1MY5dGg9b4ECvQqELVlZWq7adMHYTu/bQRSWs=", + "shasum": "XgbjBxwNlGsjmdztBI22Z+gYQ1/NKI7yEBmlVxgOpMg=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json index 58a6dca531..827bd1411d 100644 --- a/packages/examples/packages/jsx/snap.manifest.json +++ b/packages/examples/packages/jsx/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "FT62FWsImEz4/CQmTb+dcnajSNtt4sGW/o3GaN+4y10=", + "shasum": "T+A3hsNIIBcFZnfBu0PBzJm2oapEixpCGjNV4nMgnzg=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json index e0593de5be..b0dd1ac846 100644 --- a/packages/examples/packages/lifecycle-hooks/snap.manifest.json +++ b/packages/examples/packages/lifecycle-hooks/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "4CGq8+febvnopYV5vM1P6LYNxTyuJPAzVkuShodxhQM=", + "shasum": "MNSdE7seQVY/J2CgiR1ui5S3+EqhaWWUI2sWCQ8UMNs=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/localization/snap.manifest.json b/packages/examples/packages/localization/snap.manifest.json index e852b55e59..226b4b123d 100644 --- a/packages/examples/packages/localization/snap.manifest.json +++ b/packages/examples/packages/localization/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "e2fGLS7bK7QTemBMPYvmExYJcQXyLFd6JsteSQxJ6QI=", + "shasum": "mONCNm5xmhuk1QcfKLaOAs7Uql/eh5G2Yo0jSPyIzXg=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json index fd3168f7de..f76c383d22 100644 --- a/packages/examples/packages/manage-state/snap.manifest.json +++ b/packages/examples/packages/manage-state/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "TjIsLYT+nNhjP8w1e6xC4QbhYTEjV4B+KGNvBN1vpTI=", + "shasum": "98vhPnaWHkUPD18HSxKy5vFYKNRYOdRqwkihnGcT00A=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/network-access/snap.manifest.json b/packages/examples/packages/network-access/snap.manifest.json index c432bcc7f7..017c1712f2 100644 --- a/packages/examples/packages/network-access/snap.manifest.json +++ b/packages/examples/packages/network-access/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "CxXZf7wwJM7Q7hGx7a/eEM2p2pWwW2wSmwKcY90Bfh0=", + "shasum": "43/FOUjIa7N9trMI54h2h02nZCO2HTZG9tlMwdeRilQ=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json index f2a16e18ae..ad539cb1bc 100644 --- a/packages/examples/packages/notifications/snap.manifest.json +++ b/packages/examples/packages/notifications/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "/ncEYiTIVVmxnRpsDZ0JbQcSxkX23775dkIttFQtFNA=", + "shasum": "LGJJjBHbbUE4+MdIk0c7EqItgJKaKNZgroPaURABxyI=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/rollup-plugin/snap.manifest.json b/packages/examples/packages/rollup-plugin/snap.manifest.json index ae61ff6386..440f4e06cf 100644 --- a/packages/examples/packages/rollup-plugin/snap.manifest.json +++ b/packages/examples/packages/rollup-plugin/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "SfJnA+DmyIJKA/iR9vJULwikVGkjH7A3juLxrckRgxE=", + "shasum": "g3e2k0lQsDN/0bZJW5y4sQGWNYHAs8KUK91edExDGhY=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json index d9edfff8ba..7fb9b976f9 100644 --- a/packages/examples/packages/signature-insights/snap.manifest.json +++ b/packages/examples/packages/signature-insights/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "bfY+b/o23zP4aCEUzOsoysnpJBxtiLxPWD8BqcZNduo=", + "shasum": "lVBEoTo90Uqgvi19KaemXi7Di4BSngCBukRN9opy2ng=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json index 88cbcd0f77..859bc7d576 100644 --- a/packages/examples/packages/transaction-insights/snap.manifest.json +++ b/packages/examples/packages/transaction-insights/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "KzNuP4IpARsXGw9Atgmsig27SYR8kxzv7K45p3XTeVQ=", + "shasum": "fDFhZfuLUwjFDFdCpgLW02M/c6BKa8rr6gVaOb7EE9g=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/wasm/snap.manifest.json b/packages/examples/packages/wasm/snap.manifest.json index bd0edf56f4..14993bdac8 100644 --- a/packages/examples/packages/wasm/snap.manifest.json +++ b/packages/examples/packages/wasm/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "TGmhAkRTYVqUd/GXYJ+RvI4ZPDw+4sx2bxxyNt0+9oI=", + "shasum": "GveQv7vX09cdHS/joDV6HsGhuKPx4z9HqeSd4/HBR00=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/examples/packages/webpack-plugin/snap.manifest.json b/packages/examples/packages/webpack-plugin/snap.manifest.json index 499e6d10cd..57de036f4a 100644 --- a/packages/examples/packages/webpack-plugin/snap.manifest.json +++ b/packages/examples/packages/webpack-plugin/snap.manifest.json @@ -7,7 +7,7 @@ "url": "https://github.com/MetaMask/snaps.git" }, "source": { - "shasum": "e9RpXCYrEZfBhsk7sGPCqyMSWolBVKbc2tABCfIqck0=", + "shasum": "ZEPqntjeYnKUDvoKSfQ5NiRaRoG5PJWoD+kK3G4ebUs=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/form/Field.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Field.test.tsx index d4ce9a8852..a5186c286a 100644 --- a/packages/snaps-sdk/src/jsx/components/form/Field.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/form/Field.test.tsx @@ -1,3 +1,5 @@ +import { Box } from '../Box'; +import { Text } from '../Text'; import { Button } from './Button'; import { Dropdown } from './Dropdown'; import { Field } from './Field'; @@ -91,6 +93,148 @@ describe('Field', () => { }); }); + it('renders a field element with an input and box on the left', () => { + const result = ( + + + Hello + + + + ); + + expect(result).toStrictEqual({ + type: 'Field', + key: null, + props: { + label: 'Label', + children: [ + { + type: 'Box', + key: null, + props: { + children: { + type: 'Text', + key: null, + props: { + children: 'Hello', + }, + }, + }, + }, + { + type: 'Input', + key: null, + props: { + name: 'foo', + type: 'text', + }, + }, + ], + }, + }); + }); + + it('renders a field element with an input and box on the right', () => { + const result = ( + + + + Hello + + + ); + + expect(result).toStrictEqual({ + type: 'Field', + key: null, + props: { + label: 'Label', + children: [ + { + type: 'Input', + key: null, + props: { + name: 'foo', + type: 'text', + }, + }, + { + type: 'Box', + key: null, + props: { + children: { + type: 'Text', + key: null, + props: { + children: 'Hello', + }, + }, + }, + }, + ], + }, + }); + }); + + it('renders a field element with an input and box on both sides', () => { + const result = ( + + + Hello + + + + Hello + + + ); + + expect(result).toStrictEqual({ + type: 'Field', + key: null, + props: { + label: 'Label', + children: [ + { + type: 'Box', + key: null, + props: { + children: { + type: 'Text', + key: null, + props: { + children: 'Hello', + }, + }, + }, + }, + { + type: 'Input', + key: null, + props: { + name: 'foo', + type: 'text', + }, + }, + { + type: 'Box', + key: null, + props: { + children: { + type: 'Text', + key: null, + props: { + children: 'Hello', + }, + }, + }, + }, + ], + }, + }); + }); + it('renders a dropdown element', () => { const result = ( diff --git a/packages/snaps-sdk/src/jsx/components/form/Field.ts b/packages/snaps-sdk/src/jsx/components/form/Field.ts index 933e27d0cb..df9c2ad804 100644 --- a/packages/snaps-sdk/src/jsx/components/form/Field.ts +++ b/packages/snaps-sdk/src/jsx/components/form/Field.ts @@ -1,5 +1,5 @@ +import type { GenericSnapElement } from '../../component'; import { createSnapComponent } from '../../component'; -import type { ButtonElement } from './Button'; import type { CheckboxElement } from './Checkbox'; import type { DropdownElement } from './Dropdown'; import type { FileInputElement } from './FileInput'; @@ -18,7 +18,9 @@ export type FieldProps = { label?: string | undefined; error?: string | undefined; children: - | [InputElement, ButtonElement] + | [InputElement, GenericSnapElement] + | [GenericSnapElement, InputElement] + | [GenericSnapElement, InputElement, GenericSnapElement] | DropdownElement | RadioGroupElement | FileInputElement diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index d470b6ee0f..5b7b538d29 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -235,6 +235,36 @@ describe('FieldStruct', () => { , + + + Hello + + + , + + + + Hello + + , + + + Hello + + + + Hello + + , + + Hello + + Hello + , + + + + , , diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 5e04481301..a29941472b 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -286,13 +286,34 @@ export const FileInputStruct: Describe = element( ); /** - * A subset of JSX elements that represent the tuple Button + Input of the Field children. + * A subset of JSX elements that represent the tuple Box + Input of the Field children. */ -const BUTTON_INPUT = [InputStruct, ButtonStruct] as [ +// eslint-disable-next-line @typescript-eslint/no-use-before-define +const BOX_INPUT_LEFT = [lazy(() => BoxChildStruct), InputStruct] as [ + typeof BoxChildStruct, typeof InputStruct, - typeof ButtonStruct, ]; +/** + * A subset of JSX elements that represent the tuple Input + Box of the Field children. + */ +// eslint-disable-next-line @typescript-eslint/no-use-before-define +const BOX_INPUT_RIGHT = [InputStruct, lazy(() => BoxChildStruct)] as [ + typeof InputStruct, + typeof BoxChildStruct, +]; + +/** + * A subset of JSX elements that represent the tuple Box + Input + Box of the Field children. + */ +const BOX_INPUT_BOTH = [ + // eslint-disable-next-line @typescript-eslint/no-use-before-define + lazy(() => BoxChildStruct), + InputStruct, + // eslint-disable-next-line @typescript-eslint/no-use-before-define + lazy(() => BoxChildStruct), +] as [typeof BoxChildStruct, typeof InputStruct, typeof BoxChildStruct]; + /** * A subset of JSX elements that are allowed as single children of the Field component. */ @@ -316,18 +337,33 @@ const FIELD_CHILDREN_ARRAY = [ * A union of the allowed children of the Field component. * This is mainly used in the simulator for validation purposes. */ -export const FieldChildUnionStruct = typedUnion([ +export const FieldChildUnionStruct = nullUnion([ ...FIELD_CHILDREN_ARRAY, - ...BUTTON_INPUT, + ...BOX_INPUT_LEFT, + ...BOX_INPUT_RIGHT, + ...BOX_INPUT_BOTH, ]); /** * A subset of JSX elements that are allowed as children of the Field component. */ const FieldChildStruct = nullUnion([ - tuple(BUTTON_INPUT), + tuple(BOX_INPUT_LEFT), + tuple(BOX_INPUT_RIGHT), + tuple(BOX_INPUT_BOTH), ...FIELD_CHILDREN_ARRAY, -]); +]) as unknown as Struct< + | [InputElement, GenericSnapElement] + | [GenericSnapElement, InputElement] + | [GenericSnapElement, InputElement, GenericSnapElement] + | DropdownElement + | RadioGroupElement + | FileInputElement + | InputElement + | CheckboxElement + | SelectorElement, + null +>; /** * A struct for the {@link FieldElement} type. diff --git a/packages/snaps-simulator/src/features/builder/utils.test.ts b/packages/snaps-simulator/src/features/builder/utils.test.ts index cbaa3e18ad..ca124f81be 100644 --- a/packages/snaps-simulator/src/features/builder/utils.test.ts +++ b/packages/snaps-simulator/src/features/builder/utils.test.ts @@ -54,7 +54,7 @@ describe('isValidFieldChild', () => { }); it('returns false for invalid field children', () => { - const child = Text({ children: 'foo' }); + const child = Option({ children: 'foo', value: 'foo' }); expect(isValidFieldChild(child)).toBe(false); }); });