chore: migrate away from event dispatcher (#12820)

web/src/lib/components/shared-components/combobox.svelte

@@ -21,7 +21,7 @@
   import { fly } from 'svelte/transition';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
-  import { createEventDispatcher, tick } from 'svelte';
+  import { tick } from 'svelte';
   import type { FormEventHandler } from 'svelte/elements';
   import { shortcuts } from '$lib/actions/shortcut';
   import { focusOutside } from '$lib/actions/focus-outside';
@@ -35,6 +35,7 @@
   export let options: ComboBoxOption[] = [];
   export let selectedOption: ComboBoxOption | undefined = undefined;
   export let placeholder = '';
+  export let onSelect: (option: ComboBoxOption | undefined) => void = () => {};
 
   /**
    * Unique identifier for the combobox.
@@ -61,10 +62,6 @@
     searchQuery = selectedOption ? selectedOption.label : '';
   }
 
-  const dispatch = createEventDispatcher<{
-    select: ComboBoxOption | undefined;
-  }>();
-
   const activate = () => {
     isActive = true;
     searchQuery = '';
@@ -105,10 +102,10 @@
     optionRefs[0]?.scrollIntoView({ block: 'nearest' });
   };
 
-  let onSelect = (option: ComboBoxOption) => {
+  let handleSelect = (option: ComboBoxOption) => {
     selectedOption = option;
     searchQuery = option.label;
-    dispatch('select', option);
+    onSelect(option);
     closeDropdown();
   };
 
@@ -117,7 +114,7 @@
     selectedIndex = undefined;
     selectedOption = undefined;
     searchQuery = '';
-    dispatch('select', selectedOption);
+    onSelect(selectedOption);
   };
 </script>
 
@@ -188,7 +185,7 @@
           shortcut: { key: 'Enter' },
           onShortcut: () => {
             if (selectedIndex !== undefined && filteredOptions.length > 0) {
-              onSelect(filteredOptions[selectedIndex]);
+              handleSelect(filteredOptions[selectedIndex]);
             }
             closeDropdown();
           },
@@ -245,7 +242,7 @@
           bind:this={optionRefs[index]}
           class="text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-100 aria-selected:dark:bg-gray-700"
           id={`${listboxId}-${index}`}
-          on:click={() => onSelect(option)}
+          on:click={() => handleSelect(option)}
           role="option"
         >
           {option.label}