add selection

src/Typeahead.svelte

@@ -15,6 +15,9 @@
 
   /** @type {(item: Item) => Item} */
   export let extract = (item) => item;
+  
+  /** @type {(item: Item) => Item} */
+  export let selection = (item) => false;
 
   /** @type {(item: Item) => Item} */
   export let disable = (item) => false;
@@ -89,7 +92,11 @@
     .filter(value, data, options)
     .filter(({ score }) => score > 0)
     .filter((result) => !filter(result.original))
-    .map((result) => ({ ...result, disabled: disable(result.original) }));
+    .map((result)=> ({ 
+      ...result, 
+      disabled: disable(result.original), 
+      selected: selection(result.original)
+    }));
   $: resultsId = results.map((result) => extract(result.original)).join("");
 </script>
 
@@ -171,7 +178,8 @@
         <li
           role="option"
           id="{id}-result"
-          class:selected={selectedIndex === i}
+          class:active={selectedIndex === i}
+          class:selected={result.selected}
           class:disabled={result.disabled}
           aria-selected={selectedIndex === i}
           on:click={() => {
@@ -228,18 +236,23 @@
     background-color: #cacaca;
   }
 
+  .active,
+  li:not(:last-of-type).active {
+    border: #0f62fe 1px solid;
+  }
+
   .disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
-  :global([data-svelte-search] label) {
+  [data-svelte-typeahead] :global([data-svelte-search] label) {
     margin-bottom: 0.25rem;
     display: inline-flex;
     font-size: 0.875rem;
   }
 
-  :global([data-svelte-search] input) {
+  [data-svelte-typeahead] :global([data-svelte-search] input) {
     width: 100%;
     padding: 0.5rem 0.75rem;
     background: none;
@@ -249,7 +262,7 @@
     border: 1px solid #e5e5e5;
   }
 
-  :global([data-svelte-search] input:focus) {
+  [data-svelte-typeahead] :global([data-svelte-search] input:focus) {
     outline-color: #0f62fe;
     outline-offset: 2px;
     outline-width: 1px;

types/Typeahead.d.ts

@@ -31,6 +31,11 @@ export interface TypeaheadProps extends SearchProps {
    * @default (item) => item
    */
   extract?: (item: Item) => Item;
+
+   /**
+   * @default (item) => item
+   */
+  selection?: (item: Item) => Item;
 
   /**
    * @default (item) => false