svelte-typeahead 4.2.1 → 4.2.2

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.2.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.2) - 2022-03-20
+
+**Fixes**
+
+- pressing "ArrowUp" on last item should not reset highlighted index
+
 ## [4.2.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.1) - 2021-10-30
 
 **Fixes**

package/README.md

@@ -44,7 +44,6 @@ To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-
 // svelte.config.js
 const config = {
   kit: {
-    target: "#svelte",
     vite: {
       optimizeDeps: {
         include: ["fuzzy"],

package/lib/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['svelte-typeahead'] = {}));
-}(this, (function (exports) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["svelte-typeahead"] = {}));
+})(this, (function (exports) { 'use strict';
 
     function noop() { }
     function assign(tar, src) {
@@ -298,22 +298,40 @@
     function add_flush_callback(fn) {
         flush_callbacks.push(fn);
     }
-    let flushing = false;
+    // flush() calls callbacks in this order:
+    // 1. All beforeUpdate callbacks, in order: parents before children
+    // 2. All bind:this callbacks, in reverse order: children before parents.
+    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+    //    for afterUpdates called during the initial onMount, which are called in
+    //    reverse order: children before parents.
+    // Since callbacks might update component values, which could trigger another
+    // call to flush(), the following steps guard against this:
+    // 1. During beforeUpdate, any updated components will be added to the
+    //    dirty_components array and will cause a reentrant call to flush(). Because
+    //    the flush index is kept outside the function, the reentrant call will pick
+    //    up where the earlier call left off and go through all dirty components. The
+    //    current_component value is saved and restored so that the reentrant call will
+    //    not interfere with the "parent" flush() call.
+    // 2. bind:this callbacks cannot trigger new flush() calls.
+    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
+    //    callback called a second time; the seen_callbacks set, outside the flush()
+    //    function, guarantees this behavior.
     const seen_callbacks = new Set();
+    let flushidx = 0; // Do *not* move this inside the flush() function
     function flush() {
-        if (flushing)
-            return;
-        flushing = true;
+        const saved_component = current_component;
         do {
             // first, call beforeUpdate functions
             // and update components
-            for (let i = 0; i < dirty_components.length; i += 1) {
-                const component = dirty_components[i];
+            while (flushidx < dirty_components.length) {
+                const component = dirty_components[flushidx];
+                flushidx++;
                 set_current_component(component);
                 update(component.$$);
             }
             set_current_component(null);
             dirty_components.length = 0;
+            flushidx = 0;
             while (binding_callbacks.length)
                 binding_callbacks.pop()();
             // then, once components are updated, call
@@ -333,8 +351,8 @@
             flush_callbacks.pop()();
         }
         update_scheduled = false;
-        flushing = false;
         seen_callbacks.clear();
+        set_current_component(saved_component);
     }
     function update($$) {
         if ($$.fragment !== null) {
@@ -703,7 +721,7 @@
 
     var fuzzy = fuzzy$1.exports;
 
-    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.44.0 */
+    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.46.4 */
 
     function add_css$1(target) {
     	append_styles(target, "svelte-5m0wg6", ".hide-label.svelte-5m0wg6{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}");
@@ -1040,7 +1058,7 @@
 
     var Search$1 = Search;
 
-    /* src/Typeahead.svelte generated by Svelte v3.44.0 */
+    /* src/Typeahead.svelte generated by Svelte v3.46.4 */
 
     function add_css(target) {
     	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
@@ -1646,7 +1664,7 @@
 
     	/** @type {(direction: -1 | 1) => void} */
     	function change(direction) {
-    		let index = selectedIndex === results.length - 1
+    		let index = direction === 1 && selectedIndex === results.length - 1
     		? 0
     		: selectedIndex + direction;
 
@@ -1862,8 +1880,8 @@
 
     var Typeahead$1 = Typeahead;
 
-    exports['default'] = Typeahead$1;
+    exports["default"] = Typeahead$1;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));

package/lib/index.mjs

@@ -292,22 +292,40 @@ function add_render_callback(fn) {
 function add_flush_callback(fn) {
     flush_callbacks.push(fn);
 }
-let flushing = false;
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
-    if (flushing)
-        return;
-    flushing = true;
+    const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        for (let i = 0; i < dirty_components.length; i += 1) {
-            const component = dirty_components[i];
+        while (flushidx < dirty_components.length) {
+            const component = dirty_components[flushidx];
+            flushidx++;
             set_current_component(component);
             update(component.$$);
         }
         set_current_component(null);
         dirty_components.length = 0;
+        flushidx = 0;
         while (binding_callbacks.length)
             binding_callbacks.pop()();
         // then, once components are updated, call
@@ -327,8 +345,8 @@ function flush() {
         flush_callbacks.pop()();
     }
     update_scheduled = false;
-    flushing = false;
     seen_callbacks.clear();
+    set_current_component(saved_component);
 }
 function update($$) {
     if ($$.fragment !== null) {
@@ -697,7 +715,7 @@ fuzzy.filter = function(pattern, arr, opts) {
 
 var fuzzy = fuzzy$1.exports;
 
-/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.44.0 */
+/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.46.4 */
 
 function add_css$1(target) {
 	append_styles(target, "svelte-5m0wg6", ".hide-label.svelte-5m0wg6{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}");
@@ -1034,7 +1052,7 @@ class Search extends SvelteComponent {
 
 var Search$1 = Search;
 
-/* src/Typeahead.svelte generated by Svelte v3.44.0 */
+/* src/Typeahead.svelte generated by Svelte v3.46.4 */
 
 function add_css(target) {
 	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
@@ -1640,7 +1658,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	/** @type {(direction: -1 | 1) => void} */
 	function change(direction) {
-		let index = selectedIndex === results.length - 1
+		let index = direction === 1 && selectedIndex === results.length - 1
 		? 0
 		: selectedIndex + direction;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -21,10 +21,10 @@
     "svelte-search": "^1.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.6",
-    "svelte-readme": "^3.4.1"
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "svelte": "^3.46.4",
+    "svelte-check": "^2.4.6",
+    "svelte-readme": "^3.6.3"
   },
   "repository": {
     "type": "git",

package/src/Typeahead.svelte

@@ -92,7 +92,7 @@
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
     let index =
-      selectedIndex === results.length - 1 ? 0 : selectedIndex + direction;
+      direction === 1 && selectedIndex === results.length - 1 ? 0 : selectedIndex + direction;
     if (index < 0) index = results.length - 1;
 
     let disabled = results[index].disabled;