@metamask/snaps-sdk 4.2.0 → 4.3.0

package/dist/types/jsx/components/form/Dropdown.d.ts

@@ -0,0 +1,40 @@
+import type { MaybeArray } from '../../component';
+import type { OptionElement } from './Option';
+/**
+ * The props of the {@link Dropdown} component.
+ *
+ * @property name - The name of the dropdown. This is used to identify the
+ * state in the form data.
+ * @property value - The selected value of the dropdown.
+ * @property children - The children of the dropdown.
+ */
+declare type DropdownProps = {
+    name: string;
+    value?: string;
+    children: MaybeArray<OptionElement>;
+};
+/**
+ * A dropdown component, which is used to create a dropdown. This component
+ * can only be used as a child of the {@link Field} component.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the dropdown field. This is used to identify the
+ * state in the form data.
+ * @param props.value - The selected value of the dropdown.
+ * @param props.children - The children of the dropdown.
+ * @returns A dropdown element.
+ * @example
+ * <Dropdown name="dropdown">
+ *  <Option value="option1">Option 1</Option>
+ *  <Option value="option2">Option 2</Option>
+ *  <Option value="option3">Option 3</Option>
+ * </Dropdown>
+ */
+export declare const Dropdown: import("../../component").SnapComponent<DropdownProps, "Dropdown">;
+/**
+ * A dropdown element.
+ *
+ * @see Dropdown
+ */
+export declare type DropdownElement = ReturnType<typeof Dropdown>;
+export {};

package/dist/types/jsx/components/form/Field.d.ts

@@ -1,3 +1,5 @@
+import type { ButtonElement } from './Button';
+import type { DropdownElement } from './Dropdown';
 import type { InputElement } from './Input';
 /**
  * The props of the {@link Field} component.
@@ -9,7 +11,7 @@ import type { InputElement } from './Input';
 export declare type FieldProps = {
     label?: string | undefined;
     error?: string | undefined;
-    children: InputElement;
+    children: [InputElement, ButtonElement] | InputElement | DropdownElement;
 };
 /**
  * A field component, which is used to create a form field. This component can
@@ -23,6 +25,7 @@ export declare type FieldProps = {
  * @example
  * <Field label="Username">
  *   <Input name="username" type="text" />
+ *   <Button type="submit">Submit</Button>
  * </Field>
  */
 export declare const Field: import("../../component").SnapComponent<FieldProps, "Field">;

package/dist/types/jsx/components/form/Option.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The props of the {@link Option} component.
+ *
+ * @property value - The value of the dropdown option. This is used to populate the
+ * state in the form data.
+ * @property children - The text to display.
+ */
+declare type OptionProps = {
+    value: string;
+    children: string;
+};
+/**
+ * A dropdown option component, which is used to create a dropdown option. This component
+ * can only be used as a child of the {@link Dropdown} component.
+ *
+ * @param props - The props of the component.
+ * @param props.value - The value of the dropdown option. This is used to populate the
+ * state in the form data.
+ * @param props.children - The text to display.
+ * @returns A dropdown option element.
+ * @example
+ * <Dropdown name="dropdown">
+ *  <Option value="option1">Option 1</Option>
+ *  <Option value="option2">Option 2</Option>
+ *  <Option value="option3">Option 3</Option>
+ * </Dropdown>
+ */
+export declare const Option: import("../../component").SnapComponent<OptionProps, "Option">;
+/**
+ * A dropdown option element.
+ *
+ * @see Option
+ */
+export declare type OptionElement = ReturnType<typeof Option>;
+export {};

package/dist/types/jsx/components/form/index.d.ts

@@ -1,9 +1,13 @@
 import type { ButtonElement } from './Button';
+import type { DropdownElement } from './Dropdown';
 import type { FieldElement } from './Field';
 import type { FormElement } from './Form';
 import type { InputElement } from './Input';
+import type { OptionElement } from './Option';
 export * from './Button';
+export * from './Dropdown';
+export * from './Option';
 export * from './Field';
 export * from './Form';
 export * from './Input';
-export declare type StandardFormElement = ButtonElement | FormElement | FieldElement | InputElement;
+export declare type StandardFormElement = ButtonElement | FormElement | FieldElement | InputElement | DropdownElement | OptionElement;

package/dist/types/jsx/components/index.d.ts

@@ -10,12 +10,14 @@ import type { LinkElement } from './Link';
 import type { RowElement } from './Row';
 import type { SpinnerElement } from './Spinner';
 import type { TextElement } from './Text';
+import type { ValueElement } from './Value';
 export * from './form';
 export * from './formatting';
 export * from './Address';
 export * from './Box';
 export * from './Copyable';
 export * from './Divider';
+export * from './Value';
 export * from './Heading';
 export * from './Image';
 export * from './Link';
@@ -25,4 +27,4 @@ export * from './Text';
 /**
  * A built-in JSX element, which can be used in a Snap user interface.
  */
-export declare type JSXElement = StandardFormElement | StandardFormattingElement | AddressElement | BoxElement | CopyableElement | DividerElement | HeadingElement | ImageElement | LinkElement | RowElement | SpinnerElement | TextElement;
+export declare type JSXElement = StandardFormElement | StandardFormattingElement | AddressElement | BoxElement | CopyableElement | DividerElement | ValueElement | HeadingElement | ImageElement | LinkElement | RowElement | SpinnerElement | TextElement;

package/dist/types/jsx/index.d.ts

@@ -2,4 +2,4 @@ export * from './component';
 export * from './components';
 export * from './jsx-runtime';
 export * from './jsx-dev-runtime';
-export { JSXElementStruct, isJSXElement, isJSXElementUnsafe, assertJSXElement, } from './validation';
+export { JSXElementStruct, RootJSXElementStruct, isJSXElement, isJSXElementUnsafe, assertJSXElement, } from './validation';

package/dist/types/jsx/validation.d.ts

@@ -1,6 +1,7 @@
+import type { Struct } from 'superstruct';
 import type { Describe } from '../internals';
-import type { GenericSnapElement, Key, StringElement } from './component';
-import type { AddressElement, BoldElement, BoxElement, ButtonElement, CopyableElement, DividerElement, FieldElement, FormElement, HeadingElement, ImageElement, InputElement, ItalicElement, JSXElement, LinkElement, RowElement, SpinnerElement, StandardFormattingElement, TextElement } from './components';
+import type { GenericSnapElement, Key, MaybeArray, SnapElement, StringElement } from './component';
+import type { AddressElement, BoldElement, BoxElement, ButtonElement, CopyableElement, DividerElement, DropdownElement, OptionElement, FieldElement, FormElement, HeadingElement, ImageElement, InputElement, ItalicElement, JSXElement, LinkElement, RowElement, SpinnerElement, StandardFormattingElement, TextElement, ValueElement } from './components';
 /**
  * A struct for the {@link Key} type.
  */
@@ -21,6 +22,14 @@ export declare const ButtonStruct: Describe<ButtonElement>;
  * A struct for the {@link InputElement} type.
  */
 export declare const InputStruct: Describe<InputElement>;
+/**
+ * A struct for the {@link OptionElement} type.
+ */
+export declare const OptionStruct: Describe<OptionElement>;
+/**
+ * A struct for the {@link DropdownElement} type.
+ */
+export declare const DropdownStruct: Describe<DropdownElement>;
 /**
  * A struct for the {@link FieldElement} type.
  */
@@ -54,6 +63,10 @@ export declare const CopyableStruct: Describe<CopyableElement>;
  * A struct for the {@link DividerElement} type.
  */
 export declare const DividerStruct: Describe<DividerElement>;
+/**
+ * A struct for the {@link ValueElement} type.
+ */
+export declare const ValueStruct: Describe<ValueElement>;
 /**
  * A struct for the {@link HeadingElement} type.
  */
@@ -78,6 +91,57 @@ export declare const RowStruct: Describe<RowElement>;
  * A struct for the {@link SpinnerElement} type.
  */
 export declare const SpinnerStruct: Describe<SpinnerElement>;
+/**
+ * A subset of JSX elements that are allowed as children of the Box component.
+ * This set should include all components, except components that need to be nested
+ * in another component (e.g. Field must be contained in a Form).
+ */
+export declare const BoxChildStruct: Struct<SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<{
+    name: string;
+    value?: string | undefined;
+    children: MaybeArray<SnapElement<{
+        value: string;
+        children: string;
+    }, "Option">>;
+}, "Dropdown"> | SnapElement<{
+    name: string;
+    type?: "number" | "text" | "password" | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+}, "Input"> | SnapElement<{
+    children: MaybeArray<SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").FieldProps, "Field">>;
+    name: string;
+}, "Form"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<{
+    children: StringElement;
+}, "Heading"> | SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner">, null>;
+/**
+ * For now, the allowed JSX elements at the root are the same as the allowed
+ * children of the Box component.
+ */
+export declare const RootJSXElementStruct: Struct<SnapElement<import("./components").AddressProps, "Address"> | SnapElement<import("./components").BoxProps, "Box"> | SnapElement<import("./components").CopyableProps, "Copyable"> | SnapElement<Record<string, never>, "Divider"> | SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<{
+    name: string;
+    value?: string | undefined;
+    children: MaybeArray<SnapElement<{
+        value: string;
+        children: string;
+    }, "Option">>;
+}, "Dropdown"> | SnapElement<{
+    name: string;
+    type?: "number" | "text" | "password" | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+}, "Input"> | SnapElement<{
+    children: MaybeArray<SnapElement<import("./components").ButtonProps, "Button"> | SnapElement<import("./components").FieldProps, "Field">>;
+    name: string;
+}, "Form"> | SnapElement<import("./components").BoldProps, "Bold"> | SnapElement<import("./components").ItalicProps, "Italic"> | SnapElement<import("./components").LinkProps, "Link"> | SnapElement<import("./components").TextProps, "Text"> | SnapElement<{
+    children: StringElement;
+}, "Heading"> | SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | SnapElement<import("./components").RowProps, "Row"> | SnapElement<Record<string, never>, "Spinner">, null>;
 /**
  * A struct for the {@link JSXElement} type.
  */

package/dist/types/types/handlers/user-input.d.ts

@@ -1,4 +1,5 @@
 import type { Infer } from 'superstruct';
+import type { InterfaceContext } from '../interface';
 /**
  * The type of user input event fired.
  * Currently only three events are supported:
@@ -75,4 +76,5 @@ export declare type UserInputEvent = Infer<typeof UserInputEventStruct>;
 export declare type OnUserInputHandler = (args: {
     id: string;
     event: UserInputEvent;
+    context: InterfaceContext | null;
 }) => Promise<void>;

package/dist/types/types/interface.d.ts

@@ -11,7 +11,27 @@ export declare const InterfaceStateStruct: import("superstruct").Struct<Record<s
 export declare type FormState = Infer<typeof FormStateStruct>;
 export declare type InterfaceState = Infer<typeof InterfaceStateStruct>;
 export declare type ComponentOrElement = Component | JSXElement;
-export declare const ComponentOrElementStruct: import("superstruct").Struct<JSXElement | {
+export declare const ComponentOrElementStruct: import("superstruct").Struct<import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").AddressProps, "Address"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").BoxProps, "Box"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").CopyableProps, "Copyable"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<Record<string, never>, "Divider"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").ButtonProps, "Button"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+    name: string;
+    value?: string | undefined;
+    children: import("@metamask/snaps-sdk/jsx-runtime").MaybeArray<import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+        value: string;
+        children: string;
+    }, "Option">>;
+}, "Dropdown"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+    name: string;
+    type?: "number" | "text" | "password" | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+}, "Input"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+    children: import("@metamask/snaps-sdk/jsx-runtime").MaybeArray<import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").ButtonProps, "Button"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").FieldProps, "Field">>;
+    name: string;
+}, "Form"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").BoldProps, "Bold"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").ItalicProps, "Italic"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").LinkProps, "Link"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").TextProps, "Text"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+    children: import("@metamask/snaps-sdk/jsx-runtime").StringElement;
+}, "Heading"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<{
+    src: string;
+    alt?: string | undefined;
+}, "Image"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<import("@metamask/snaps-sdk/jsx-runtime").RowProps, "Row"> | import("@metamask/snaps-sdk/jsx-runtime").SnapElement<Record<string, never>, "Spinner"> | {
     value: string;
     type: import("../ui").NodeType.Copyable;
     sensitive?: boolean | undefined;
@@ -80,3 +100,5 @@ export declare const ComponentOrElementStruct: import("superstruct").Struct<JSXE
         buttonType?: "button" | "submit" | undefined;
     })[];
 }, null>;
+export declare const InterfaceContextStruct: import("superstruct").Struct<Record<string, import("@metamask/utils").Json>, null>;
+export declare type InterfaceContext = Infer<typeof InterfaceContextStruct>;

package/dist/types/types/methods/create-interface.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentOrElement } from '..';
+import type { ComponentOrElement, InterfaceContext } from '..';
 /**
  * The request parameters for the `snap_createInterface` method.
  *
@@ -6,6 +6,7 @@ import type { ComponentOrElement } from '..';
  */
 export declare type CreateInterfaceParams = {
     ui: ComponentOrElement;
+    context?: InterfaceContext;
 };
 /**
  * The result returned by the `snap_createInterface` method, which is the id of the created interface.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/snaps-sdk",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/MetaMask/snaps.git"
@@ -67,7 +67,7 @@
     "superstruct": "^1.0.3"
   },
   "devDependencies": {
-    "@lavamoat/allow-scripts": "^3.0.3",
+    "@lavamoat/allow-scripts": "^3.0.4",
     "@metamask/auto-changelog": "^3.4.4",
     "@metamask/eslint-config": "^12.1.0",
     "@metamask/eslint-config-jest": "^12.1.0",