From f9ea61db1ab753e94ec79aad71c5dd3bd9519434 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 24 Nov 2023 16:34:47 +0000
Subject: [PATCH] Improve inputdropdown component

---
 .../bbui/src/Form/Core/InputDropdown.svelte   | 86 +++++++++++--------
 packages/bbui/src/Form/InputDropdown.svelte   |  1 +
 .../users/_components/AddUserModal.svelte     |  1 -
 .../builder/portal/users/users/index.svelte   |  9 +-
 4 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/packages/bbui/src/Form/Core/InputDropdown.svelte b/packages/bbui/src/Form/Core/InputDropdown.svelte
index 153501ce5a..128353b7b9 100644
--- a/packages/bbui/src/Form/Core/InputDropdown.svelte
+++ b/packages/bbui/src/Form/Core/InputDropdown.svelte
@@ -17,7 +17,7 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
-
+  export let getOptionSubtitle = option => option?.subtitle
   export let isOptionSelected = () => false
 
   const dispatch = createEventDispatcher()
@@ -135,7 +135,7 @@
       class="spectrum-Textfield-input spectrum-InputGroup-input"
     />
   </div>
-  <div style="width: 30%">
+  <div style="width: 40%">
     <button
       {id}
       class="spectrum-Picker spectrum-Picker--sizeM override-borders"
@@ -157,38 +157,43 @@
         <use xlink:href="#spectrum-css-icon-Chevron100" />
       </svg>
     </button>
-    {#if open}
-      <div
-        use:clickOutside={handleOutsideClick}
-        transition:fly|local={{ y: -20, duration: 200 }}
-        class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      >
-        <ul class="spectrum-Menu" role="listbox">
-          {#each options as option, idx}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onPick(getOptionValue(option, idx))}
-            >
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </span>
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    {/if}
   </div>
+  {#if open}
+    <div
+      use:clickOutside={handleOutsideClick}
+      transition:fly|local={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    >
+      <ul class="spectrum-Menu" role="listbox">
+        {#each options as option, idx}
+          <li
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onPick(getOptionValue(option, idx))}
+          >
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+              {#if getOptionSubtitle(option, idx)}
+                <span class="subtitle-text">
+                  {getOptionSubtitle(option, idx)}
+                </span>
+              {/if}
+            </span>
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -196,7 +201,6 @@
     min-width: 0;
     width: 100%;
   }
-
   .spectrum-InputGroup-input {
     border-right-width: 1px;
   }
@@ -206,7 +210,6 @@
   .spectrum-Textfield-input {
     width: 0;
   }
-
   .override-borders {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
@@ -215,5 +218,18 @@
     max-height: 240px;
     z-index: 999;
     top: 100%;
+    width: 100%;
+  }
+  .subtitle-text {
+    font-size: 12px;
+    line-height: 15px;
+    font-weight: 500;
+    color: var(--spectrum-global-color-gray-600);
+    display: block;
+    margin-top: var(--spacing-s);
+  }
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
   }
 </style>
diff --git a/packages/bbui/src/Form/InputDropdown.svelte b/packages/bbui/src/Form/InputDropdown.svelte
index 93766495b8..54b07cf0d7 100644
--- a/packages/bbui/src/Form/InputDropdown.svelte
+++ b/packages/bbui/src/Form/InputDropdown.svelte
@@ -43,6 +43,7 @@
     {quiet}
     {autofocus}
     {options}
+    isOptionSelected={option => option === dropdownValue}
     on:change={onChange}
     on:pick={onPick}
     on:click
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
index 0730c31674..346b293235 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
@@ -29,7 +29,6 @@
     },
   ]
   $: hasError = userData.find(x => x.error != null)
-
   $: userCount = $licensing.userCount + userData.length
   $: reached = licensing.usersLimitReached(userCount)
   $: exceeded = licensing.usersLimitExceeded(userCount)
diff --git a/packages/builder/src/pages/builder/portal/users/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte
index 744908fd14..50afd0004a 100644
--- a/packages/builder/src/pages/builder/portal/users/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte
@@ -191,18 +191,18 @@
 
     for (const user of userData?.users ?? []) {
       const { email } = user
-
       if (
         newUsers.find(x => x.email === email) ||
         currentUserEmails.includes(email)
-      )
+      ) {
         continue
-
+      }
       newUsers.push(user)
     }
 
-    if (!newUsers.length)
+    if (!newUsers.length) {
       notifications.info("Duplicated! There is no new users to add.")
+    }
     return { ...userData, users: newUsers }
   }
 
@@ -267,7 +267,6 @@
     try {
       await groups.actions.init()
       groupsLoaded = true
-
       pendingInvites = await users.getInvites()
       invitesLoaded = true
     } catch (error) {