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

src/ComboBox/ComboBox.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {any} ComboBoxItemId
-   * @typedef {{ id: ComboBoxItemId; text: string; }} ComboBoxItem
+   * @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem
    * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
    * @slot {{ item: ComboBoxItem; index: number }}
    */
@@ -133,6 +133,20 @@
     } else if (index >= _items.length) {
       index = 0;
     }
+    let disabled = items[index].disabled;
+
+    while (disabled) {
+      index = index + dir;
+
+      if (index < 0) {
+        index = items.length - 1;
+      } else if (index >= items.length) {
+        index = 0;
+      }
+
+      disabled = items[index].disabled;
+    }
+
     highlightedIndex = index;
   }
 
@@ -360,7 +374,12 @@
             id="{item.id}"
             active="{selectedId === item.id}"
             highlighted="{highlightedIndex === i}"
-            on:click="{() => {
+            disabled="{item.disabled}"
+            on:click="{(e) => {
+              if (item.disabled) {
+                e.stopPropagation();
+                return;
+              }
               selectedId = item.id;
               open = false;
 
@@ -369,6 +388,7 @@
               }
             }}"
             on:mouseenter="{() => {
+              if (item.disabled) return;
               highlightedIndex = i;
             }}"
           >

src/Dropdown/Dropdown.svelte

@@ -2,7 +2,7 @@
   /**
    * @typedef {any} DropdownItemId
    * @typedef {string} DropdownItemText
-   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
+   * @typedef {{ id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }} DropdownItem
    * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select
    * @slot {{ item: DropdownItem; index: number; }}
    */
@@ -121,6 +121,20 @@
       index = 0;
     }
 
+    let disabled = items[index].disabled;
+
+    while (disabled) {
+      index = index + dir;
+
+      if (index < 0) {
+        index = items.length - 1;
+      } else if (index >= items.length) {
+        index = 0;
+      }
+
+      disabled = items[index].disabled;
+    }
+
     highlightedIndex = index;
   }
 
@@ -248,11 +262,17 @@
             id="{item.id}"
             active="{selectedId === item.id}"
             highlighted="{highlightedIndex === i || selectedId === item.id}"
-            on:click="{() => {
+            disabled="{item.disabled}"
+            on:click="{(e) => {
+              if (item.disabled) {
+                e.stopPropagation();
+                return;
+              }
               selectedId = item.id;
               ref.focus();
             }}"
             on:mouseenter="{() => {
+              if (item.disabled) return;
               highlightedIndex = i;
             }}"
           >

src/ListBox/ListBoxMenuItem.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to enable the highlighted state */
   export let highlighted = false;
 
+  /** Set to `true` to disable the menu item */
+  export let disabled = false;
+
   let ref = null;
 
   $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
@@ -17,6 +20,7 @@
   class:bx--list-box__menu-item--active="{active}"
   class:bx--list-box__menu-item--highlighted="{highlighted}"
   aria-selected="{active}"
+  disabled="{disabled ? true : undefined}"
   {...$$restProps}
   on:click
   on:mouseenter

src/MultiSelect/MultiSelect.svelte

@@ -2,7 +2,7 @@
   /**
    * @typedef {any} MultiSelectItemId
    * @typedef {string} MultiSelectItemText
-   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
+   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; }} MultiSelectItem
    * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
    * @event {null} clear
    * @event {FocusEvent | CustomEvent<FocusEvent>} blur
@@ -210,6 +210,20 @@
       index = 0;
     }
 
+    let disabled = items[index].disabled;
+
+    while (disabled) {
+      index = index + direction;
+
+      if (index < 0) {
+        index = items.length - 1;
+      } else if (index >= items.length) {
+        index = 0;
+      }
+
+      disabled = items[index].disabled;
+    }
+
     highlightedIndex = index;
   }
 
@@ -481,13 +495,19 @@
             aria-selected="{item.checked}"
             active="{item.checked}"
             highlighted="{highlightedIndex === i}"
-            on:click="{() => {
+            disabled="{item.disabled}"
+            on:click="{(e) => {
+              if (item.disabled) {
+                e.stopPropagation();
+                return;
+              }
               sortedItems = sortedItems.map((_) =>
                 _.id === item.id ? { ..._, checked: !_.checked } : _
               );
               fieldRef.focus();
             }}"
             on:mouseenter="{() => {
+              if (item.disabled) return;
               highlightedIndex = i;
             }}"
           >
@@ -499,7 +519,7 @@
               tabindex="-1"
               id="checkbox-{item.id}"
               checked="{item.checked}"
-              disabled="{disabled}"
+              disabled="{item.disabled}"
               on:blur="{() => {
                 if (i === filteredItems.length - 1) open = false;
               }}"