feat: support item.disabled key for Dropdown, MultiSelect, ComboBox (#1328)

Closes #1326

* feat: support item.disabled key for `Dropdown`, `MultiSelect`, `ComboBox`

* Run "yarn build:docs"

* test: assert disabled property

* docs: add "Disabled items" examples

docs/src/COMPONENT_API.json

@@ -1769,9 +1769,9 @@
           "ts": "type ComboBoxItemId = any"
         },
         {
-          "type": "{ id: ComboBoxItemId; text: string; }",
+          "type": "{ id: ComboBoxItemId; text: string; disabled?: boolean; }",
           "name": "ComboBoxItem",
-          "ts": "interface ComboBoxItem { id: ComboBoxItemId; text: string; }"
+          "ts": "interface ComboBoxItem { id: ComboBoxItemId; text: string; disabled?: boolean; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "input" }
@@ -3493,9 +3493,9 @@
           "ts": "type DropdownItemText = string"
         },
         {
-          "type": "{ id: DropdownItemId; text: DropdownItemText; }",
+          "type": "{ id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }",
           "name": "DropdownItem",
-          "ts": "interface DropdownItem { id: DropdownItemId; text: DropdownItemText; }"
+          "ts": "interface DropdownItem { id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "div" }
@@ -6063,6 +6063,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the menu item",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
@@ -7296,9 +7308,9 @@
           "ts": "type MultiSelectItemText = string"
         },
         {
-          "type": "{ id: MultiSelectItemId; text: MultiSelectItemText; }",
+          "type": "{ id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; }",
           "name": "MultiSelectItem",
-          "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }"
+          "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "input" }

docs/src/pages/components/ComboBox.svx

@@ -112,11 +112,25 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Disabled
+### Disabled state
 
 <ComboBox disabled titleText="Contact" placeholder="Select contact method"
 items={[
   {id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}
-  ]}  />
+  ]}  />
+
+### Disabled items
+
+Use the `disabled` property in the `items` prop to disable specific items.
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email", disabled: true },
+    { id: "2", text: "Fax" },
+  ]}
+/>

docs/src/pages/components/Dropdown.svx

@@ -95,6 +95,20 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Disabled items
+
+Use the `disabled` property in the `items` prop to disable specific items.
+
+<Dropdown
+  selectedId="0"
+  titleText="Contact"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email", disabled: true },
+    { id: "2", text: "Fax" },
+  ]}
+/>
+
 ### Skeleton
 
 <DropdownSkeleton />

docs/src/pages/components/MultiSelect.svx

@@ -145,4 +145,18 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     items="{[{id: "0", text: "Slack"},
     {id: "1", text: "Email"},
     {id: "2", text: "Fax"}]}"
-  />
+  />
+
+### Disabled items
+
+Use the `disabled` property in the `items` prop to disable specific items.
+
+<MultiSelect
+  titleText="Contact"
+  label="Select contact methods..."
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email", disabled: true },
+    { id: "2", text: "Fax" },
+  ]}
+/>