adds onsearch

src/components/SearchInput/SearchInput.mdx

@@ -12,16 +12,18 @@ The `SearchInput` component creates a search bar.
 <script>
   import { SearchInput } from '@reuters-graphics/graphics-components';
 
-  function handleSearchInput(event) {
-    const searchText = event.detail.value;
-    // Here's where you might update a variable,
-    // filter a dataset or make an API call
-    // based on the user's input.
-    console.log(`Search for ${searchText}`);
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, 
+    filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
   }
 </script>
 
-<SearchInput on:search={handleSearchInput} />
+<SearchInput onsearch={handleSearchInput} />
 ```
 
-<Canvas of={SearchInputStories.Demo} />
+<Canvas of={SearchInputStories.Demo} />

src/components/SearchInput/SearchInput.stories.svelte

@@ -8,4 +8,17 @@
   });
 </script>
 
-<Story name="Demo" />
+<script lang="ts">
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
+
+<Story name="Demo">
+  <SearchInput onsearch={handleSearchInput} />
+</Story>

src/components/SearchInput/SearchInput.svelte

@@ -6,15 +6,23 @@
   interface Props {
     /** The placeholder text that appears in the search box.*/
     searchPlaceholder?: string;
+    /** Optional function that runs when the input value changes. */
+    onsearch?: (newValue: string) => void;
   }
 
-  let { searchPlaceholder = 'Search...' }: Props = $props();
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
 
   let value = $state('');
   let active = $derived(value !== '');
 
   function clear() {
     value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
   }
 </script>
 
@@ -22,12 +30,14 @@
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
+
   <input
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
     placeholder={searchPlaceholder}
     bind:value
+    {oninput}
   />
   <div
     class="search--x absolute"
@@ -72,4 +82,4 @@
       }
     }
   }
-</style>
+</style>