svelte-typeahead 4.1.0 → 4.2.2

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.43.1 */
+/* 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.43.1 */
+/* 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}");
@@ -1047,14 +1065,14 @@ const get_no_results_slot_changes = dirty => ({
 
 const get_no_results_slot_context = ctx => ({
 	value: /*value*/ ctx[0],
-	result: /*result*/ ctx[39],
-	index: /*i*/ ctx[41]
+	result: /*result*/ ctx[40],
+	index: /*i*/ ctx[42]
 });
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[39] = list[i];
-	child_ctx[41] = i;
+	child_ctx[40] = list[i];
+	child_ctx[42] = i;
 	return child_ctx;
 }
 
@@ -1064,12 +1082,12 @@ const get_default_slot_changes = dirty => ({
 });
 
 const get_default_slot_context = ctx => ({
-	result: /*result*/ ctx[39],
-	index: /*i*/ ctx[41],
+	result: /*result*/ ctx[40],
+	index: /*i*/ ctx[42],
 	value: /*value*/ ctx[0]
 });
 
-// (184:4) {#if !hideDropdown && results.length > 0}
+// (198:4) {#if !hideDropdown && results.length > 0}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1101,7 +1119,7 @@ function create_if_block_1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 524487) {
+			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 1048775) {
 				each_value = /*results*/ ctx[1];
 				let i;
 
@@ -1153,10 +1171,10 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (199:43)              
+// (213:43)              
 function fallback_block(ctx) {
 	let html_tag;
-	let raw_value = /*result*/ ctx[39].string + "";
+	let raw_value = /*result*/ ctx[40].string + "";
 	let html_anchor;
 
 	return {
@@ -1170,7 +1188,7 @@ function fallback_block(ctx) {
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[39].string + "")) html_tag.p(raw_value);
+			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[40].string + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -1179,7 +1197,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (185:6) {#each results as result, i}
+// (199:6) {#each results as result, i}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1188,12 +1206,12 @@ function create_each_block(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[20].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[19], get_default_slot_context);
+	const default_slot_template = /*#slots*/ ctx[21].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], get_default_slot_context);
 	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
 	function click_handler_1() {
-		return /*click_handler_1*/ ctx[34](/*result*/ ctx[39], /*i*/ ctx[41]);
+		return /*click_handler_1*/ ctx[35](/*result*/ ctx[40], /*i*/ ctx[42]);
 	}
 
 	return {
@@ -1202,11 +1220,11 @@ function create_each_block(ctx) {
 			if (default_slot_or_fallback) default_slot_or_fallback.c();
 			t = space();
 			attr(li, "role", "option");
-			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[41]));
-			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[41]);
+			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[42]));
+			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[42]);
 			attr(li, "class", "svelte-j5n77y");
-			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[41]);
-			toggle_class(li, "disabled", /*result*/ ctx[39].disabled);
+			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[42]);
+			toggle_class(li, "disabled", /*result*/ ctx[40].disabled);
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -1227,15 +1245,15 @@ function create_each_block(ctx) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 524291)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 1048579)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[19],
+						/*$$scope*/ ctx[20],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[19], dirty, get_default_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, get_default_slot_changes),
 						get_default_slot_context
 					);
 				}
@@ -1245,20 +1263,20 @@ function create_each_block(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[41]))) {
+			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[42]))) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[41])) {
+			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[42])) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
 			if (dirty[0] & /*selectedIndex*/ 64) {
-				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[41]);
+				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[42]);
 			}
 
 			if (dirty[0] & /*results*/ 2) {
-				toggle_class(li, "disabled", /*result*/ ctx[39].disabled);
+				toggle_class(li, "disabled", /*result*/ ctx[40].disabled);
 			}
 		},
 		i(local) {
@@ -1279,12 +1297,12 @@ function create_each_block(ctx) {
 	};
 }
 
-// (205:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (219:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;
-	const no_results_slot_template = /*#slots*/ ctx[20]["no-results"];
-	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[19], get_no_results_slot_context);
+	const no_results_slot_template = /*#slots*/ ctx[21]["no-results"];
+	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[20], get_no_results_slot_context);
 
 	return {
 		c() {
@@ -1304,15 +1322,15 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			if (no_results_slot) {
-				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 524291)) {
+				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 1048579)) {
 					update_slot_base(
 						no_results_slot,
 						no_results_slot_template,
 						ctx,
-						/*$$scope*/ ctx[19],
+						/*$$scope*/ ctx[20],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[19], dirty, get_no_results_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[20], dirty, get_no_results_slot_changes),
 						get_no_results_slot_context
 					);
 				}
@@ -1354,7 +1372,7 @@ function create_fragment(ctx) {
 	const search_spread_levels = [
 		{ id: /*id*/ ctx[2] },
 		{ removeFormAriaAttributes: true },
-		/*$$restProps*/ ctx[9],
+		/*$$restProps*/ ctx[10],
 		{ "aria-autocomplete": "list" },
 		{
 			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1370,11 +1388,11 @@ function create_fragment(ctx) {
 	];
 
 	function search_ref_binding(value) {
-		/*search_ref_binding*/ ctx[22](value);
+		/*search_ref_binding*/ ctx[23](value);
 	}
 
 	function search_value_binding(value) {
-		/*search_value_binding*/ ctx[23](value);
+		/*search_value_binding*/ ctx[24](value);
 	}
 
 	let search_props = {};
@@ -1394,18 +1412,18 @@ function create_fragment(ctx) {
 	search = new Search$1({ props: search_props });
 	binding_callbacks.push(() => bind(search, 'ref', search_ref_binding));
 	binding_callbacks.push(() => bind(search, 'value', search_value_binding));
-	search.$on("type", /*type_handler*/ ctx[24]);
-	search.$on("input", /*input_handler*/ ctx[25]);
-	search.$on("change", /*change_handler*/ ctx[26]);
-	search.$on("focus", /*focus_handler*/ ctx[27]);
-	search.$on("focus", /*focus_handler_1*/ ctx[28]);
-	search.$on("clear", /*clear_handler*/ ctx[29]);
-	search.$on("clear", /*clear_handler_1*/ ctx[30]);
-	search.$on("blur", /*blur_handler*/ ctx[31]);
-	search.$on("keydown", /*keydown_handler*/ ctx[32]);
-	search.$on("keydown", /*keydown_handler_1*/ ctx[33]);
+	search.$on("type", /*type_handler*/ ctx[25]);
+	search.$on("input", /*input_handler*/ ctx[26]);
+	search.$on("change", /*change_handler*/ ctx[27]);
+	search.$on("focus", /*focus_handler*/ ctx[28]);
+	search.$on("focus", /*focus_handler_1*/ ctx[29]);
+	search.$on("clear", /*clear_handler*/ ctx[30]);
+	search.$on("clear", /*clear_handler_1*/ ctx[31]);
+	search.$on("blur", /*blur_handler*/ ctx[32]);
+	search.$on("keydown", /*keydown_handler*/ ctx[33]);
+	search.$on("keydown", /*keydown_handler_1*/ ctx[34]);
 	let if_block0 = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0 && create_if_block_1(ctx);
-	let if_block1 = /*$$slots*/ ctx[8]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
+	let if_block1 = /*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
 
 	return {
 		c() {
@@ -1438,20 +1456,20 @@ function create_fragment(ctx) {
 			if (if_block0) if_block0.m(ul, null);
 			append(ul, t1);
 			if (if_block1) if_block1.m(ul, null);
-			/*div_binding*/ ctx[35](div);
+			/*div_binding*/ ctx[36](div);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(window, "click", /*click_handler*/ ctx[21]);
+				dispose = listen(window, "click", /*click_handler*/ ctx[22]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 614)
+			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 1126)
 			? get_spread_update(search_spread_levels, [
 					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
 					search_spread_levels[1],
-					dirty[0] & /*$$restProps*/ 512 && get_spread_object(/*$$restProps*/ ctx[9]),
+					dirty[0] & /*$$restProps*/ 1024 && get_spread_object(/*$$restProps*/ ctx[10]),
 					search_spread_levels[3],
 					dirty[0] & /*id*/ 4 && {
 						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1504,11 +1522,11 @@ function create_fragment(ctx) {
 				check_outros();
 			}
 
-			if (/*$$slots*/ ctx[8]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+			if (/*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 291) {
+					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 547) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -1569,7 +1587,7 @@ function create_fragment(ctx) {
 			destroy_component(search);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*div_binding*/ ctx[35](null);
+			/*div_binding*/ ctx[36](null);
 			mounted = false;
 			dispose();
 		}
@@ -1619,6 +1637,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	async function select() {
 		const result = results[selectedIndex];
+		if (result.disabled) return;
 		const selectedValue = extract(result.original);
 		const searchedValue = value;
 		if (inputAfterSelect == "clear") $$invalidate(0, value = "");
@@ -1637,6 +1656,28 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(5, hideDropdown = true);
 	}
 
+	/** @type {(direction: -1 | 1) => void} */
+	function change(direction) {
+		let index = direction === 1 && selectedIndex === results.length - 1
+		? 0
+		: selectedIndex + direction;
+
+		if (index < 0) index = results.length - 1;
+		let disabled = results[index].disabled;
+
+		while (disabled) {
+			if (index === results.length) {
+				index = 0;
+			} else {
+				index += direction;
+			}
+
+			disabled = results[index].disabled;
+		}
+
+		$$invalidate(6, selectedIndex = index);
+	}
+
 	const click_handler = ({ target }) => {
 		if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
 			$$invalidate(5, hideDropdown = true);
@@ -1698,17 +1739,11 @@ function instance($$self, $$props, $$invalidate) {
 				break;
 			case "ArrowDown":
 				e.preventDefault();
-				$$invalidate(6, selectedIndex += 1);
-				if (selectedIndex === results.length) {
-					$$invalidate(6, selectedIndex = 0);
-				}
+				change(1);
 				break;
 			case "ArrowUp":
 				e.preventDefault();
-				$$invalidate(6, selectedIndex -= 1);
-				if (selectedIndex < 0) {
-					$$invalidate(6, selectedIndex = results.length - 1);
-				}
+				change(-1);
 				break;
 			case "Escape":
 				e.preventDefault();
@@ -1735,34 +1770,34 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$new_props => {
 		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-		$$invalidate(9, $$restProps = compute_rest_props($$props, omit_props_names));
+		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
 		if ('id' in $$new_props) $$invalidate(2, id = $$new_props.id);
 		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
-		if ('data' in $$new_props) $$invalidate(10, data = $$new_props.data);
-		if ('extract' in $$new_props) $$invalidate(11, extract = $$new_props.extract);
-		if ('disable' in $$new_props) $$invalidate(12, disable = $$new_props.disable);
-		if ('filter' in $$new_props) $$invalidate(13, filter = $$new_props.filter);
-		if ('autoselect' in $$new_props) $$invalidate(14, autoselect = $$new_props.autoselect);
-		if ('inputAfterSelect' in $$new_props) $$invalidate(15, inputAfterSelect = $$new_props.inputAfterSelect);
+		if ('data' in $$new_props) $$invalidate(11, data = $$new_props.data);
+		if ('extract' in $$new_props) $$invalidate(12, extract = $$new_props.extract);
+		if ('disable' in $$new_props) $$invalidate(13, disable = $$new_props.disable);
+		if ('filter' in $$new_props) $$invalidate(14, filter = $$new_props.filter);
+		if ('autoselect' in $$new_props) $$invalidate(15, autoselect = $$new_props.autoselect);
+		if ('inputAfterSelect' in $$new_props) $$invalidate(16, inputAfterSelect = $$new_props.inputAfterSelect);
 		if ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-		if ('focusAfterSelect' in $$new_props) $$invalidate(16, focusAfterSelect = $$new_props.focusAfterSelect);
-		if ('limit' in $$new_props) $$invalidate(17, limit = $$new_props.limit);
-		if ('$$scope' in $$new_props) $$invalidate(19, $$scope = $$new_props.$$scope);
+		if ('focusAfterSelect' in $$new_props) $$invalidate(17, focusAfterSelect = $$new_props.focusAfterSelect);
+		if ('limit' in $$new_props) $$invalidate(18, limit = $$new_props.limit);
+		if ('$$scope' in $$new_props) $$invalidate(20, $$scope = $$new_props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*extract*/ 2048) {
-			$$invalidate(18, options = { pre: "<mark>", post: "</mark>", extract });
+		if ($$self.$$.dirty[0] & /*extract*/ 4096) {
+			$$invalidate(19, options = { pre: "<mark>", post: "</mark>", extract });
 		}
 
-		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 406529) {
+		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 813057) {
 			$$invalidate(1, results = fuzzy.filter(value, data, options).filter(({ score }) => score > 0).slice(0, limit).filter(result => !filter(result.original)).map(result => ({
 				...result,
 				disabled: disable(result.original)
 			})));
 		}
 
-		if ($$self.$$.dirty[0] & /*results, extract*/ 2050) {
+		if ($$self.$$.dirty[0] & /*results, extract*/ 4098) {
 			resultsId = results.map(result => extract(result.original)).join("");
 		}
 	};
@@ -1776,6 +1811,7 @@ function instance($$self, $$props, $$invalidate) {
 		hideDropdown,
 		selectedIndex,
 		select,
+		change,
 		$$slots,
 		$$restProps,
 		data,
@@ -1820,15 +1856,15 @@ class Typeahead extends SvelteComponent {
 			{
 				id: 2,
 				value: 0,
-				data: 10,
-				extract: 11,
-				disable: 12,
-				filter: 13,
-				autoselect: 14,
-				inputAfterSelect: 15,
+				data: 11,
+				extract: 12,
+				disable: 13,
+				filter: 14,
+				autoselect: 15,
+				inputAfterSelect: 16,
 				results: 1,
-				focusAfterSelect: 16,
-				limit: 17
+				focusAfterSelect: 17,
+				limit: 18
 			},
 			add_css,
 			[-1, -1]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.1.0",
+  "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.0",
-    "svelte": "^3.43.1",
-    "svelte-check": "^2.2.6",
-    "svelte-readme": "^3.3.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

@@ -1,25 +1,21 @@
 <script>
   /**
-   * @typedef {string | number | Record<string, any>} Item
-   * @typedef {{ original: Item; index: number; score: number; string: string; }} FuzzyResult
-   * @event {{ searched: string; selected: Item; selectedIndex: number; original: Item; originalIndex: number; }} select
-   * @event {any} clear
-   * @slot {{ result: FuzzyResult; index: number }}
+   * @template TItem = string | number | Record<string, any>
    */
 
   export let id = "typeahead-" + Math.random().toString(36);
   export let value = "";
 
-  /** @type {Item[]} */
+  /** @type {TItem[]} */
   export let data = [];
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => any} */
   export let extract = (item) => item;
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => boolean} */
   export let disable = (item) => false;
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => boolean} */
   export let filter = (item) => false;
 
   /** Set to `false` to prevent the first result from being selected */
@@ -31,7 +27,7 @@
    */
   export let inputAfterSelect = "update";
 
-  /** @type {FuzzyResult[]} */
+  /** @type {{ original: TItem; index: number; score: number; string: string; disabled?: boolean; }[]} */
   export let results = [];
 
   /** Set to `true` to re-focus the input after selecting a result */
@@ -69,6 +65,9 @@
 
   async function select() {
     const result = results[selectedIndex];
+
+    if (result.disabled) return;
+
     const selectedValue = extract(result.original);
     const searchedValue = value;
 
@@ -90,6 +89,27 @@
     hideDropdown = true;
   }
 
+  /** @type {(direction: -1 | 1) => void} */
+  function change(direction) {
+    let index =
+      direction === 1 && selectedIndex === results.length - 1 ? 0 : selectedIndex + direction;
+    if (index < 0) index = results.length - 1;
+
+    let disabled = results[index].disabled;
+
+    while (disabled) {
+      if (index === results.length) {
+        index = 0;
+      } else {
+        index += direction;
+      }
+
+      disabled = results[index].disabled;
+    }
+
+    selectedIndex = index;
+  }
+
   $: options = { pre: "<mark>", post: "</mark>", extract };
   $: results = fuzzy
     .filter(value, data, options)
@@ -154,17 +174,11 @@
           break;
         case "ArrowDown":
           e.preventDefault();
-          selectedIndex += 1;
-          if (selectedIndex === results.length) {
-            selectedIndex = 0;
-          }
+          change(1);
           break;
         case "ArrowUp":
           e.preventDefault();
-          selectedIndex -= 1;
-          if (selectedIndex < 0) {
-            selectedIndex = results.length - 1;
-          }
+          change(-1);
           break;
         case "Escape":
           e.preventDefault();