From 26fa1f49412ac031e1dc3c54bbe84067557f93a0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 12 Aug 2021 10:09:38 +0100
Subject: [PATCH] Sort picker options alphabetically

---
 packages/bbui/src/Form/Core/Picker.svelte | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index e2456271c7..3de454668c 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -23,7 +23,11 @@
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
+
   const dispatch = createEventDispatcher()
+
+  $: sortedOptions = getSortedOptions(options, getOptionLabel)
+
   const onClick = () => {
     dispatch("click")
     if (readonly) {
@@ -31,6 +35,17 @@
     }
     open = true
   }
+
+  const getSortedOptions = (options, getLabel) => {
+    if (!options?.length || !Array.isArray(options)) {
+      return []
+    }
+    return options.sort((a, b) => {
+      const labelA = getLabel(a)
+      const labelB = getLabel(b)
+      return labelA > labelB ? 1 : -1
+    })
+  }
 </script>
 
 <button
@@ -101,8 +116,8 @@
           </svg>
         </li>
       {/if}
-      {#if options && Array.isArray(options)}
-        {#each options as option, idx}
+      {#if sortedOptions.length}
+        {#each sortedOptions as option, idx}
           <li
             class="spectrum-Menu-item"
             class:is-selected={isOptionSelected(getOptionValue(option, idx))}
@@ -121,9 +136,9 @@
                 />
               </span>
             {/if}
-            <span class="spectrum-Menu-itemLabel"
-              >{getOptionLabel(option, idx)}</span
-            >
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"