From 460ad3240acf028780c7e75bb5e80f1573e91003 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 1 Jun 2022 19:09:47 -0700
Subject: [PATCH] feat: support item.disabled key for `Dropdown`,
 `MultiSelect`, `ComboBox`

Closes #1326
---
 src/ComboBox/ComboBox.svelte       | 24 ++++++++++++++++++++++--
 src/Dropdown/Dropdown.svelte       | 24 ++++++++++++++++++++++--
 src/ListBox/ListBoxMenuItem.svelte |  4 ++++
 src/MultiSelect/MultiSelect.svelte | 26 +++++++++++++++++++++++---
 4 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 97b8ead0..9b293ac9 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/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;
             }}"
           >
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 2ef0a144..02c52344 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/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; }}
    */
@@ -124,6 +124,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;
   }
 
@@ -251,11 +265,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;
             }}"
           >
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 9ef1ffb9..ee147b13 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/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
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 8a24af0a..f17f12c4 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/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;
               }}"