Making picker sorting optional and default to off. Sort by default for client apps

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -12,6 +12,7 @@
   export let getOptionValue = option => option
   export let readonly = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -83,4 +84,5 @@
   {getOptionLabel}
   {getOptionValue}
   onSelectOption={toggleOption}
+  {sort}
 />

packages/bbui/src/Form/Core/Picker.svelte

@@ -25,11 +25,12 @@
   export let quiet = false
   export let autoWidth = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   let searchTerm = null
 
-  $: sortedOptions = getSortedOptions(options, getOptionLabel)
+  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
     sortedOptions,
     searchTerm,
@@ -45,10 +46,13 @@
     open = true
   }
 
-  const getSortedOptions = (options, getLabel) => {
+  const getSortedOptions = (options, getLabel, sort) => {
     if (!options?.length || !Array.isArray(options)) {
       return []
     }
+    if (!sort) {
+      return options
+    }
     return options.sort((a, b) => {
       const labelA = getLabel(a)
       const labelB = getLabel(b)

packages/bbui/src/Form/Core/Select.svelte

@@ -15,6 +15,7 @@
   export let quiet = false
   export let autoWidth = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -72,6 +73,7 @@
   {getOptionIcon}
   {fieldIcon}
   {autocomplete}
+  {sort}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

packages/bbui/src/Form/Multiselect.svelte

@@ -13,6 +13,7 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +30,7 @@
     {value}
     {options}
     {placeholder}
+    {sort}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

packages/bbui/src/Form/Select.svelte

@@ -16,6 +16,7 @@
   export let getOptionIcon = option => option?.icon
   export let quiet = false
   export let autoWidth = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -41,6 +42,7 @@
     {options}
     {placeholder}
     {autoWidth}
+    {sort}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -19,6 +19,7 @@
     data-cy="{meta.name}-select"
     bind:value
     options={meta.constraints.inclusion}
+    sort
   />
 {:else if type === "datetime"}
   <DatePicker {label} bind:value />

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -153,6 +153,7 @@
       label="Display Column"
       bind:value={primaryDisplay}
       options={fields}
+      sort
     />
   </div>
 {/if}

packages/builder/src/components/common/LinkedRowSelector.svelte

@@ -47,6 +47,7 @@
     getOptionValue={row => row._id}
     on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
     {label}
+    sort
   />
 {:else}
   <Multiselect
@@ -55,5 +56,6 @@
     options={rows}
     getOptionLabel={getPrettyName}
     getOptionValue={row => row._id}
+    sort
   />
 {/if}

packages/standard-components/src/forms/OptionsField.svelte

@@ -87,6 +87,7 @@
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
         {autocomplete}
+        sort={true}
       />
     {:else if optionsType === "radio"}
       <CoreRadioGroup

packages/standard-components/src/forms/RelationshipField.svelte

@@ -87,6 +87,7 @@
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
       {placeholder}
+      sort={true}
     />
   {/if}
 </Field>