Add Dropdown options disable feature

MetaMask · Jan 27, 2025 · b0c4e5e · b0c4e5e
1 parent fa9a467
commit b0c4e5e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx
@@ -13,4 +13,22 @@ describe('Option', () => {
       key: null,
     });
   });
+
+  it('renders disabled dropdown option', () => {
+    const result = (
+      <Option value="foo" disabled={true}>
+        Foo
+      </Option>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Option',
+      props: {
+        value: 'foo',
+        children: 'Foo',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
 });
diff --git a/packages/snaps-sdk/src/jsx/components/form/Option.ts b/packages/snaps-sdk/src/jsx/components/form/Option.ts
@@ -8,10 +8,12 @@ import { Dropdown } from './Dropdown';
  * @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.
+ * @property disabled - Whether the option is disabled.
  */
 type OptionProps = {
   value: string;
   children: string;
+  disabled?: boolean;
 };
 
 const TYPE = 'Option';
@@ -24,6 +26,7 @@ const TYPE = 'Option';
  * @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.
+ * @param props.disabled - Whether the option is disabled.
  * @returns A dropdown option element.
  * @example
  * <Dropdown name="dropdown">

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -907,6 +907,12 @@ describe('DropdownStruct', () => {
       <Option value="option1">Option 1</Option>
       <Option value="option2">Option 2</Option>
     </Dropdown>,
+    <Dropdown name="foo">
+      <Option value="option1">Option 1</Option>
+      <Option value="option2" disabled={true}>
+        Option 2
+      </Option>
+    </Dropdown>,
   ])('validates a dropdown element', (value) => {
     expect(is(value, DropdownStruct)).toBe(true);
   });

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -344,6 +344,7 @@ export const InputStruct: Describe<InputElement> = elementWithSelectiveProps(
 export const OptionStruct: Describe<OptionElement> = element('Option', {
   value: string(),
   children: string(),
+  disabled: optional(boolean()),
 });
 
 /**