Replace SelectList with SelectField w/ MenuField API sync.

- Updates SelectField to support the same features as SelectList.
- Updates QuickSearch to use SelectField.
- Declared MenuOption & moved to types folder.
- Updated MenuField/SelectField to reference MenuOption.
- Switched to use of 'label' instead of 'name' for options.
- Added `activeOptionIcon` to SelectField.

.changeset/quick-avocados-hope.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Removes SelectList. Updates SelectField features to support SelectList's use case via property/attribute overrides. Updates QuickSearch to use SelectField. Defines MenuOption type & updates MenuField & SelectField to use it; this results in renaming of SelectField options' `name` field to become `label`, standardizing the API across the two. Also adds `activeOptionIcon` to SelectField so users can opt-in to dynamically updating the field icon based on the selected option.

packages/svelte-ux/src/lib/components/Menu.svelte

@@ -36,7 +36,7 @@
 
   export let menuItemsEl: HTMLMenuElement | undefined = undefined;
 
-  function onClick(e) {
+  function onClick(e: MouseEvent) {
     try {
       if (e.target === menuItemsEl) {
         // Clicked within menu but outside of any items

packages/svelte-ux/src/lib/components/MenuField.svelte

@@ -11,10 +11,9 @@
   import MenuItem from './MenuItem.svelte';
   import Button from './Button.svelte';
   import { getComponentTheme } from './theme';
+  import type { MenuOption } from '$lib/types/options';
 
-  type Options = Array<{ label: string; value: any; icon?: string; group?: string }>;
-
-  export let options: Options;
+  export let options: MenuOption[] = [];
   export let value: any = null;
   export let menuProps: ComponentProps<Menu> | undefined = {
     autoPlacement: true,
@@ -59,6 +58,10 @@
 
   const dispatch = createEventDispatcher();
   $: dispatch('change', { value });
+
+  function setValue(val: any): void {
+    value = val;
+  }
 </script>
 
 <Field
@@ -110,7 +113,7 @@
     matchWidth
     {...menuProps}
   >
-    <slot {options} {selected} close={() => (open = false)} setValue={(val) => (value = val)}>
+    <slot {options} {selected} close={() => (open = false)} {setValue}>
       <menu class="group p-1">
         {#each options as option, index (option.value)}
           {@const previousOption = options[index - 1]}

packages/svelte-ux/src/lib/components/QuickSearch.svelte

@@ -3,12 +3,14 @@
 
   import Button from '$lib/components/Button.svelte';
   import Dialog from '$lib/components/Dialog.svelte';
-  import SelectList from '$lib/components/SelectList.svelte';
+  import SelectField from '$lib/components/SelectField.svelte';
   import { getComponentTheme } from './theme';
   import { cls } from '$lib/utils/styles';
   import { smScreen } from '$lib/stores';
+  import { autoFocus, selectOnFocus } from '$lib/actions';
+  import type { MenuOption } from '$lib/types/options';
 
-  export let options: { name: string; value: string; group?: string }[] = [];
+  export let options: MenuOption[] = [];
 
   export let classes: {
     root?: string;
@@ -18,10 +20,11 @@
 
   let open = false;
 
+  let fieldActions = (node: any) => [autoFocus(node), selectOnFocus(node)];
+
   /*
     TODO:
      - [ ] Sticky search
-     - [ ] Refine SelectList / reuse with SelectField (and maybe MultiSelect)
      - [ ] Improve size of Dialog (move class to Dialog without breaking overflow)
      - [ ] Load descriptions/meta from +page.ts
      - [ ] Improve dialog positioning on small viewports (consistent top/bottom with max height)
@@ -63,18 +66,20 @@
   }}
 >
   <div class="overflow-auto max-h-[min(90dvh,600px)] min-w-[400px] py-1">
-    <SelectList
+    <SelectField
       icon={mdiMagnify}
       placeholder="Search..."
+      hideToggleIcon={true}
+      inlineOptions={true}
       {options}
+      {fieldActions}
       on:change
-      on:change={(e) => (open = false)}
+      on:change={() => (open = false)}
       classes={{
         field: {
           container: 'border-none hover:shadow-none group-focus-within:shadow-none',
         },
         group: 'capitalize',
-        options: 'border-t mt-1 px-1',
       }}
     />
   </div>