svelte-typeahead 4.3.2 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.3.2",
+  "version": "4.4.1",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -10,8 +10,6 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "dev": "rollup -cw",
-    "predeploy": "rollup -c",
-    "deploy": "npx gh-pages -d dist",
     "prepack": "BUNDLE=true rollup -c",
     "test": "svelte-check --workspace test"
   },
@@ -21,8 +19,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
+    "svelte": "^3.52.0",
+    "svelte-check": "^2.9.0",
     "svelte-readme": "^3.6.3"
   },
   "repository": {

package/src/Typeahead.svelte

@@ -36,6 +36,9 @@
   /** Set to `true` to only show results when the input is focused */
   export let showDropdownOnFocus = false;
 
+  /** Set to `true` for all results to be shown when an empty input is focused */
+  export let showAllResultsOnFocus = false;
+
   /**
    * Specify the maximum number of results to return
    * @type {number}
@@ -134,7 +137,10 @@
   }
 
   const open = () => (hideDropdown = false);
-  const close = () => (hideDropdown = true);
+  const close = () => {
+    hideDropdown = true;
+    isFocused = false;
+  };
 
   $: options = { pre: "<mark>", post: "</mark>", extract };
   $: results = fuzzy
@@ -148,6 +154,17 @@
   $: if (showDropdownOnFocus) {
     showResults = showResults && isFocused;
   }
+  $: if (isFocused && showAllResultsOnFocus && value.length === 0) {
+    results = data
+      .filter((datum) => !filter(datum))
+      .map((original, index) => ({
+        disabled: disable(original),
+        index,
+        original,
+        score: 0,
+        string: extract(original),
+      }));
+  }
 </script>
 
 <svelte:window
@@ -163,7 +180,7 @@
   bind:this={comboboxRef}
   role="combobox"
   aria-haspopup="listbox"
-  aria-owns="{id}-listbox"
+  aria-controls="{id}-listbox"
   class:dropdown={results.length > 0}
   aria-expanded={showResults}
   id="{id}-typeahead"
@@ -188,7 +205,7 @@
     on:focus
     on:focus={() => {
       open();
-      if (showDropdownOnFocus) {
+      if (showDropdownOnFocus || showAllResultsOnFocus) {
         showResults = true;
         isFocused = true;
       }
@@ -229,6 +246,7 @@
   >
     {#if showResults}
       {#each results as result, index}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <li
           role="option"
           id="{id}-result-{index}"
@@ -270,6 +288,7 @@
     top: 100%;
     left: 0;
     width: 100%;
+    margin: 0;
     padding: 0;
     list-style: none;
     background-color: inherit;

package/types/Typeahead.svelte.d.ts

@@ -68,6 +68,12 @@ export interface TypeaheadProps<TItem> extends SearchProps {
    */
   showDropdownOnFocus?: boolean;
 
+  /**
+   * Set to `true` for all results to be shown when an empty input is focused
+   * @default false
+   */
+  showAllResultsOnFocus?: boolean;
+
   /**
    * Specify the maximum number of results to return
    * @default Infinity
@@ -88,7 +94,7 @@ export default class Typeahead<
       originalIndex: number;
     }>;
     type: CustomEvent<string>;
-    clear: CustomEvent<any>;
+    clear: CustomEvent<null>;
     input: WindowEventMap["input"];
     change: WindowEventMap["change"];
     focus: WindowEventMap["focus"];