svelte-typeahead 4.4.0 → 4.4.2

package/lib/index.js

@@ -126,7 +126,9 @@
         target.insertBefore(node, anchor || null);
     }
     function detach(node) {
-        node.parentNode.removeChild(node);
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
     }
     function destroy_each(iterations, detaching) {
         for (let i = 0; i < iterations.length; i += 1) {
@@ -166,6 +168,14 @@
         else if (node.getAttribute(attribute) !== value)
             node.setAttribute(attribute, value);
     }
+    /**
+     * List of attributes that should always be set through the attr method,
+     * because updating them through the property setter doesn't work reliably.
+     * In the example of `width`/`height`, the problem is that the setter only
+     * accepts numeric values, but the attribute can also be set to a string like `50%`.
+     * If this list becomes too big, rethink this approach.
+     */
+    const always_set_through_set_attribute = ['width', 'height'];
     function set_attributes(node, attributes) {
         // @ts-ignore
         const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@@ -179,7 +189,7 @@
             else if (key === '__value') {
                 node.value = node[key] = attributes[key];
             }
-            else if (descriptors[key] && descriptors[key].set) {
+            else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) {
                 node[key] = attributes[key];
             }
             else {
@@ -192,8 +202,9 @@
     }
     function set_data(text, data) {
         data = '' + data;
-        if (text.wholeText !== data)
-            text.data = data;
+        if (text.data === data)
+            return;
+        text.data = data;
     }
     function set_input_value(input, value) {
         input.value = value == null ? '' : value;
@@ -219,16 +230,17 @@
             if (!this.e) {
                 if (this.is_svg)
                     this.e = svg_element(target.nodeName);
+                /** #7364  target for <template> may be provided as #document-fragment(11) */
                 else
-                    this.e = element(target.nodeName);
-                this.t = target;
+                    this.e = element((target.nodeType === 11 ? 'TEMPLATE' : target.nodeName));
+                this.t = target.tagName !== 'TEMPLATE' ? target : target.content;
                 this.c(html);
             }
             this.i(anchor);
         }
         h(html) {
             this.e.innerHTML = html;
-            this.n = Array.from(this.e.childNodes);
+            this.n = Array.from(this.e.nodeName === 'TEMPLATE' ? this.e.content.childNodes : this.e.childNodes);
         }
         i(anchor) {
             for (let i = 0; i < this.n.length; i += 1) {
@@ -315,9 +327,9 @@
 
     const dirty_components = [];
     const binding_callbacks = [];
-    const render_callbacks = [];
+    let render_callbacks = [];
     const flush_callbacks = [];
-    const resolved_promise = Promise.resolve();
+    const resolved_promise = /* @__PURE__ */ Promise.resolve();
     let update_scheduled = false;
     function schedule_update() {
         if (!update_scheduled) {
@@ -356,15 +368,29 @@
     const seen_callbacks = new Set();
     let flushidx = 0; // Do *not* move this inside the flush() function
     function flush() {
+        // Do not reenter flush while dirty components are updated, as this can
+        // result in an infinite loop. Instead, let the inner flush handle it.
+        // Reentrancy is ok afterwards for bindings etc.
+        if (flushidx !== 0) {
+            return;
+        }
         const saved_component = current_component;
         do {
             // first, call beforeUpdate functions
             // and update components
-            while (flushidx < dirty_components.length) {
-                const component = dirty_components[flushidx];
-                flushidx++;
-                set_current_component(component);
-                update(component.$$);
+            try {
+                while (flushidx < dirty_components.length) {
+                    const component = dirty_components[flushidx];
+                    flushidx++;
+                    set_current_component(component);
+                    update(component.$$);
+                }
+            }
+            catch (e) {
+                // reset dirty state to not end up in a deadlocked state and then rethrow
+                dirty_components.length = 0;
+                flushidx = 0;
+                throw e;
             }
             set_current_component(null);
             dirty_components.length = 0;
@@ -401,6 +427,16 @@
             $$.after_update.forEach(add_render_callback);
         }
     }
+    /**
+     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
+     */
+    function flush_render_callbacks(fns) {
+        const filtered = [];
+        const targets = [];
+        render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
+        targets.forEach((c) => c());
+        render_callbacks = filtered;
+    }
     const outroing = new Set();
     let outros;
     function group_outros() {
@@ -515,6 +551,7 @@
     function destroy_component(component, detaching) {
         const $$ = component.$$;
         if ($$.fragment !== null) {
+            flush_render_callbacks($$.after_update);
             run_all($$.on_destroy);
             $$.fragment && $$.fragment.d(detaching);
             // TODO null out other refs, including component.$$ (but need to
@@ -767,16 +804,11 @@
 
     var fuzzy = fuzzy$1.exports;
 
-    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.52.0 */
-
-    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}");
-    }
-
+    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.59.2 */
     const get_label_slot_changes = dirty => ({});
     const get_label_slot_context = ctx => ({});
 
-    // (60:23) {label}
+    // (94:23) {label}
     function fallback_block$1(ctx) {
     	let t;
 
@@ -800,6 +832,7 @@
     	let form;
     	let label_1;
     	let label_1_id_value;
+    	let label_1_style_value;
     	let t;
     	let input;
     	let form_role_value;
@@ -836,16 +869,16 @@
     			input = element("input");
     			attr(label_1, "id", label_1_id_value = "" + (/*id*/ ctx[4] + "-label"));
     			attr(label_1, "for", /*id*/ ctx[4]);
-    			attr(label_1, "class", "svelte-5m0wg6");
-    			toggle_class(label_1, "hide-label", /*hideLabel*/ ctx[3]);
+    			attr(label_1, "style", label_1_style_value = /*hideLabel*/ ctx[3] && "position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;");
     			set_attributes(input, input_data);
-    			toggle_class(input, "svelte-5m0wg6", true);
     			attr(form, "data-svelte-search", "");
     			attr(form, "role", form_role_value = /*removeFormAriaAttributes*/ ctx[5] ? null : "search");
 
     			attr(form, "aria-labelledby", form_aria_labelledby_value = /*removeFormAriaAttributes*/ ctx[5]
     			? null
     			: /*id*/ ctx[4]);
+
+    			attr(form, "action", "");
     		},
     		m(target, anchor) {
     			insert(target, form, anchor);
@@ -904,8 +937,8 @@
     				attr(label_1, "for", /*id*/ ctx[4]);
     			}
 
-    			if (!current || dirty & /*hideLabel*/ 8) {
-    				toggle_class(label_1, "hide-label", /*hideLabel*/ ctx[3]);
+    			if (!current || dirty & /*hideLabel*/ 8 && label_1_style_value !== (label_1_style_value = /*hideLabel*/ ctx[3] && "position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;")) {
+    				attr(label_1, "style", label_1_style_value);
     			}
 
     			set_attributes(input, input_data = get_spread_update(input_levels, [
@@ -918,12 +951,10 @@
     				(!current || dirty & /*id*/ 16) && { id: /*id*/ ctx[4] }
     			]));
 
-    			if (dirty & /*value*/ 1) {
+    			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
     				set_input_value(input, /*value*/ ctx[0]);
     			}
 
-    			toggle_class(input, "svelte-5m0wg6", true);
-
     			if (!current || dirty & /*removeFormAriaAttributes*/ 32 && form_role_value !== (form_role_value = /*removeFormAriaAttributes*/ ctx[5] ? null : "search")) {
     				attr(form, "role", form_role_value);
     			}
@@ -973,13 +1004,14 @@
     	let timeout = undefined;
     	let calling = false;
 
-    	function debounced(cb) {
+    	/** @type {() => any;} */
+    	function debounceFn(fn) {
     		if (calling) return;
     		calling = true;
 
     		timeout = setTimeout(
     			() => {
-    				cb();
+    				fn();
     				calling = false;
     			},
     			debounce
@@ -994,7 +1026,7 @@
     	afterUpdate(() => {
     		if (value.length > 0 && value !== prevValue) {
     			if (debounce > 0) {
-    				debounced(() => dispatch("type", value));
+    				debounceFn(() => dispatch("type", value));
     			} else {
     				dispatch("type", value);
     			}
@@ -1081,30 +1113,20 @@
     	constructor(options) {
     		super();
 
-    		init(
-    			this,
-    			options,
-    			instance$1,
-    			create_fragment$1,
-    			safe_not_equal,
-    			{
-    				value: 0,
-    				autofocus: 7,
-    				debounce: 8,
-    				label: 2,
-    				hideLabel: 3,
-    				id: 4,
-    				ref: 1,
-    				removeFormAriaAttributes: 5
-    			},
-    			add_css$1
-    		);
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
+    			value: 0,
+    			autofocus: 7,
+    			debounce: 8,
+    			label: 2,
+    			hideLabel: 3,
+    			id: 4,
+    			ref: 1,
+    			removeFormAriaAttributes: 5
+    		});
     	}
     }
 
-    var Search$1 = Search;
-
-    /* src/Typeahead.svelte generated by Svelte v3.52.0 */
+    /* src/Typeahead.svelte generated by Svelte v3.59.2 */
 
     function add_css(target) {
     	append_styles(target, "svelte-1t4elht", "[data-svelte-typeahead].svelte-1t4elht.svelte-1t4elht{position:relative;background-color:#fff}ul.svelte-1t4elht.svelte-1t4elht{position:absolute;top:100%;left:0;width:100%;margin:0;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}[aria-expanded=\"true\"].svelte-1t4elht ul.svelte-1t4elht{z-index:1}li.svelte-1t4elht.svelte-1t4elht,.no-results.svelte-1t4elht.svelte-1t4elht{padding:0.25rem 1rem}li.svelte-1t4elht.svelte-1t4elht{cursor:pointer}li.svelte-1t4elht.svelte-1t4elht:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-1t4elht.svelte-1t4elht:hover{background-color:#e5e5e5}.selected.svelte-1t4elht.svelte-1t4elht{background-color:#e5e5e5}.selected.svelte-1t4elht.svelte-1t4elht:hover{background-color:#cacaca}.disabled.svelte-1t4elht.svelte-1t4elht{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}");
@@ -1139,7 +1161,7 @@
     	value: /*value*/ ctx[0]
     });
 
-    // (248:4) {#if showResults}
+    // (247:4) {#if showResults}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1164,7 +1186,9 @@
     		},
     		m(target, anchor) {
     			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].m(target, anchor);
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(target, anchor);
+    				}
     			}
 
     			insert(target, each_1_anchor, anchor);
@@ -1223,7 +1247,7 @@
     	};
     }
 
-    // (267:41)              
+    // (266:41)              
     function fallback_block(ctx) {
     	let html_tag;
     	let raw_value = /*result*/ ctx[47].string + "";
@@ -1249,7 +1273,7 @@
     	};
     }
 
-    // (249:6) {#each results as result, index}
+    // (248:6) {#each results as result, index}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1357,7 +1381,7 @@
     	};
     }
 
-    // (273:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (272:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
     function create_if_block(ctx) {
     	let div;
     	let current;
@@ -1422,7 +1446,7 @@
     	let t1;
     	let ul_aria_labelledby_value;
     	let ul_id_value;
-    	let div_aria_owns_value;
+    	let div_aria_controls_value;
     	let div_id_value;
     	let current;
     	let mounted;
@@ -1468,7 +1492,7 @@
     		search_props.value = /*value*/ ctx[0];
     	}
 
-    	search = new Search$1({ props: search_props });
+    	search = new Search({ 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[31]);
@@ -1501,7 +1525,7 @@
     			attr(div, "data-svelte-typeahead", "");
     			attr(div, "role", "combobox");
     			attr(div, "aria-haspopup", "listbox");
-    			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
+    			attr(div, "aria-controls", div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"));
     			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
     			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
     			attr(div, "class", "svelte-1t4elht");
@@ -1612,8 +1636,8 @@
     				attr(ul, "id", ul_id_value);
     			}
 
-    			if (!current || dirty[0] & /*id*/ 4 && div_aria_owns_value !== (div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
-    				attr(div, "aria-owns", div_aria_owns_value);
+    			if (!current || dirty[0] & /*id*/ 4 && div_aria_controls_value !== (div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
+    				attr(div, "aria-controls", div_aria_controls_value);
     			}
 
     			if (!current || dirty[0] & /*showResults*/ 128) {

package/lib/index.mjs

@@ -120,7 +120,9 @@ function insert(target, node, anchor) {
     target.insertBefore(node, anchor || null);
 }
 function detach(node) {
-    node.parentNode.removeChild(node);
+    if (node.parentNode) {
+        node.parentNode.removeChild(node);
+    }
 }
 function destroy_each(iterations, detaching) {
     for (let i = 0; i < iterations.length; i += 1) {
@@ -160,6 +162,14 @@ function attr(node, attribute, value) {
     else if (node.getAttribute(attribute) !== value)
         node.setAttribute(attribute, value);
 }
+/**
+ * List of attributes that should always be set through the attr method,
+ * because updating them through the property setter doesn't work reliably.
+ * In the example of `width`/`height`, the problem is that the setter only
+ * accepts numeric values, but the attribute can also be set to a string like `50%`.
+ * If this list becomes too big, rethink this approach.
+ */
+const always_set_through_set_attribute = ['width', 'height'];
 function set_attributes(node, attributes) {
     // @ts-ignore
     const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@@ -173,7 +183,7 @@ function set_attributes(node, attributes) {
         else if (key === '__value') {
             node.value = node[key] = attributes[key];
         }
-        else if (descriptors[key] && descriptors[key].set) {
+        else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) {
             node[key] = attributes[key];
         }
         else {
@@ -186,8 +196,9 @@ function children(element) {
 }
 function set_data(text, data) {
     data = '' + data;
-    if (text.wholeText !== data)
-        text.data = data;
+    if (text.data === data)
+        return;
+    text.data = data;
 }
 function set_input_value(input, value) {
     input.value = value == null ? '' : value;
@@ -213,16 +224,17 @@ class HtmlTag {
         if (!this.e) {
             if (this.is_svg)
                 this.e = svg_element(target.nodeName);
+            /** #7364  target for <template> may be provided as #document-fragment(11) */
             else
-                this.e = element(target.nodeName);
-            this.t = target;
+                this.e = element((target.nodeType === 11 ? 'TEMPLATE' : target.nodeName));
+            this.t = target.tagName !== 'TEMPLATE' ? target : target.content;
             this.c(html);
         }
         this.i(anchor);
     }
     h(html) {
         this.e.innerHTML = html;
-        this.n = Array.from(this.e.childNodes);
+        this.n = Array.from(this.e.nodeName === 'TEMPLATE' ? this.e.content.childNodes : this.e.childNodes);
     }
     i(anchor) {
         for (let i = 0; i < this.n.length; i += 1) {
@@ -309,9 +321,9 @@ function bubble(component, event) {
 
 const dirty_components = [];
 const binding_callbacks = [];
-const render_callbacks = [];
+let render_callbacks = [];
 const flush_callbacks = [];
-const resolved_promise = Promise.resolve();
+const resolved_promise = /* @__PURE__ */ Promise.resolve();
 let update_scheduled = false;
 function schedule_update() {
     if (!update_scheduled) {
@@ -350,15 +362,29 @@ function add_flush_callback(fn) {
 const seen_callbacks = new Set();
 let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
+    // Do not reenter flush while dirty components are updated, as this can
+    // result in an infinite loop. Instead, let the inner flush handle it.
+    // Reentrancy is ok afterwards for bindings etc.
+    if (flushidx !== 0) {
+        return;
+    }
     const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        while (flushidx < dirty_components.length) {
-            const component = dirty_components[flushidx];
-            flushidx++;
-            set_current_component(component);
-            update(component.$$);
+        try {
+            while (flushidx < dirty_components.length) {
+                const component = dirty_components[flushidx];
+                flushidx++;
+                set_current_component(component);
+                update(component.$$);
+            }
+        }
+        catch (e) {
+            // reset dirty state to not end up in a deadlocked state and then rethrow
+            dirty_components.length = 0;
+            flushidx = 0;
+            throw e;
         }
         set_current_component(null);
         dirty_components.length = 0;
@@ -395,6 +421,16 @@ function update($$) {
         $$.after_update.forEach(add_render_callback);
     }
 }
+/**
+ * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
+ */
+function flush_render_callbacks(fns) {
+    const filtered = [];
+    const targets = [];
+    render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
+    targets.forEach((c) => c());
+    render_callbacks = filtered;
+}
 const outroing = new Set();
 let outros;
 function group_outros() {
@@ -509,6 +545,7 @@ function mount_component(component, target, anchor, customElement) {
 function destroy_component(component, detaching) {
     const $$ = component.$$;
     if ($$.fragment !== null) {
+        flush_render_callbacks($$.after_update);
         run_all($$.on_destroy);
         $$.fragment && $$.fragment.d(detaching);
         // TODO null out other refs, including component.$$ (but need to
@@ -761,16 +798,11 @@ fuzzy.filter = function(pattern, arr, opts) {
 
 var fuzzy = fuzzy$1.exports;
 
-/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.52.0 */
-
-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}");
-}
-
+/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.59.2 */
 const get_label_slot_changes = dirty => ({});
 const get_label_slot_context = ctx => ({});
 
-// (60:23) {label}
+// (94:23) {label}
 function fallback_block$1(ctx) {
 	let t;
 
@@ -794,6 +826,7 @@ function create_fragment$1(ctx) {
 	let form;
 	let label_1;
 	let label_1_id_value;
+	let label_1_style_value;
 	let t;
 	let input;
 	let form_role_value;
@@ -830,16 +863,16 @@ function create_fragment$1(ctx) {
 			input = element("input");
 			attr(label_1, "id", label_1_id_value = "" + (/*id*/ ctx[4] + "-label"));
 			attr(label_1, "for", /*id*/ ctx[4]);
-			attr(label_1, "class", "svelte-5m0wg6");
-			toggle_class(label_1, "hide-label", /*hideLabel*/ ctx[3]);
+			attr(label_1, "style", label_1_style_value = /*hideLabel*/ ctx[3] && "position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;");
 			set_attributes(input, input_data);
-			toggle_class(input, "svelte-5m0wg6", true);
 			attr(form, "data-svelte-search", "");
 			attr(form, "role", form_role_value = /*removeFormAriaAttributes*/ ctx[5] ? null : "search");
 
 			attr(form, "aria-labelledby", form_aria_labelledby_value = /*removeFormAriaAttributes*/ ctx[5]
 			? null
 			: /*id*/ ctx[4]);
+
+			attr(form, "action", "");
 		},
 		m(target, anchor) {
 			insert(target, form, anchor);
@@ -898,8 +931,8 @@ function create_fragment$1(ctx) {
 				attr(label_1, "for", /*id*/ ctx[4]);
 			}
 
-			if (!current || dirty & /*hideLabel*/ 8) {
-				toggle_class(label_1, "hide-label", /*hideLabel*/ ctx[3]);
+			if (!current || dirty & /*hideLabel*/ 8 && label_1_style_value !== (label_1_style_value = /*hideLabel*/ ctx[3] && "position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;")) {
+				attr(label_1, "style", label_1_style_value);
 			}
 
 			set_attributes(input, input_data = get_spread_update(input_levels, [
@@ -912,12 +945,10 @@ function create_fragment$1(ctx) {
 				(!current || dirty & /*id*/ 16) && { id: /*id*/ ctx[4] }
 			]));
 
-			if (dirty & /*value*/ 1) {
+			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
 				set_input_value(input, /*value*/ ctx[0]);
 			}
 
-			toggle_class(input, "svelte-5m0wg6", true);
-
 			if (!current || dirty & /*removeFormAriaAttributes*/ 32 && form_role_value !== (form_role_value = /*removeFormAriaAttributes*/ ctx[5] ? null : "search")) {
 				attr(form, "role", form_role_value);
 			}
@@ -967,13 +998,14 @@ function instance$1($$self, $$props, $$invalidate) {
 	let timeout = undefined;
 	let calling = false;
 
-	function debounced(cb) {
+	/** @type {() => any;} */
+	function debounceFn(fn) {
 		if (calling) return;
 		calling = true;
 
 		timeout = setTimeout(
 			() => {
-				cb();
+				fn();
 				calling = false;
 			},
 			debounce
@@ -988,7 +1020,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	afterUpdate(() => {
 		if (value.length > 0 && value !== prevValue) {
 			if (debounce > 0) {
-				debounced(() => dispatch("type", value));
+				debounceFn(() => dispatch("type", value));
 			} else {
 				dispatch("type", value);
 			}
@@ -1075,30 +1107,20 @@ class Search extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(
-			this,
-			options,
-			instance$1,
-			create_fragment$1,
-			safe_not_equal,
-			{
-				value: 0,
-				autofocus: 7,
-				debounce: 8,
-				label: 2,
-				hideLabel: 3,
-				id: 4,
-				ref: 1,
-				removeFormAriaAttributes: 5
-			},
-			add_css$1
-		);
+		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
+			value: 0,
+			autofocus: 7,
+			debounce: 8,
+			label: 2,
+			hideLabel: 3,
+			id: 4,
+			ref: 1,
+			removeFormAriaAttributes: 5
+		});
 	}
 }
 
-var Search$1 = Search;
-
-/* src/Typeahead.svelte generated by Svelte v3.52.0 */
+/* src/Typeahead.svelte generated by Svelte v3.59.2 */
 
 function add_css(target) {
 	append_styles(target, "svelte-1t4elht", "[data-svelte-typeahead].svelte-1t4elht.svelte-1t4elht{position:relative;background-color:#fff}ul.svelte-1t4elht.svelte-1t4elht{position:absolute;top:100%;left:0;width:100%;margin:0;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}[aria-expanded=\"true\"].svelte-1t4elht ul.svelte-1t4elht{z-index:1}li.svelte-1t4elht.svelte-1t4elht,.no-results.svelte-1t4elht.svelte-1t4elht{padding:0.25rem 1rem}li.svelte-1t4elht.svelte-1t4elht{cursor:pointer}li.svelte-1t4elht.svelte-1t4elht:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-1t4elht.svelte-1t4elht:hover{background-color:#e5e5e5}.selected.svelte-1t4elht.svelte-1t4elht{background-color:#e5e5e5}.selected.svelte-1t4elht.svelte-1t4elht:hover{background-color:#cacaca}.disabled.svelte-1t4elht.svelte-1t4elht{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}");
@@ -1133,7 +1155,7 @@ const get_default_slot_context = ctx => ({
 	value: /*value*/ ctx[0]
 });
 
-// (248:4) {#if showResults}
+// (247:4) {#if showResults}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1158,7 +1180,9 @@ function create_if_block_1(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, each_1_anchor, anchor);
@@ -1217,7 +1241,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (267:41)              
+// (266:41)              
 function fallback_block(ctx) {
 	let html_tag;
 	let raw_value = /*result*/ ctx[47].string + "";
@@ -1243,7 +1267,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (249:6) {#each results as result, index}
+// (248:6) {#each results as result, index}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1351,7 +1375,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (273:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (272:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;
@@ -1416,7 +1440,7 @@ function create_fragment(ctx) {
 	let t1;
 	let ul_aria_labelledby_value;
 	let ul_id_value;
-	let div_aria_owns_value;
+	let div_aria_controls_value;
 	let div_id_value;
 	let current;
 	let mounted;
@@ -1462,7 +1486,7 @@ function create_fragment(ctx) {
 		search_props.value = /*value*/ ctx[0];
 	}
 
-	search = new Search$1({ props: search_props });
+	search = new Search({ 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[31]);
@@ -1495,7 +1519,7 @@ function create_fragment(ctx) {
 			attr(div, "data-svelte-typeahead", "");
 			attr(div, "role", "combobox");
 			attr(div, "aria-haspopup", "listbox");
-			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
+			attr(div, "aria-controls", div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"));
 			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
 			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
 			attr(div, "class", "svelte-1t4elht");
@@ -1606,8 +1630,8 @@ function create_fragment(ctx) {
 				attr(ul, "id", ul_id_value);
 			}
 
-			if (!current || dirty[0] & /*id*/ 4 && div_aria_owns_value !== (div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
-				attr(div, "aria-owns", div_aria_owns_value);
+			if (!current || dirty[0] & /*id*/ 4 && div_aria_controls_value !== (div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
+				attr(div, "aria-controls", div_aria_controls_value);
 			}
 
 			if (!current || dirty[0] & /*showResults*/ 128) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -15,12 +15,12 @@
   },
   "dependencies": {
     "fuzzy": "0.1.3",
-    "svelte-search": "^1.1.0"
+    "svelte-search": "^2.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",
-    "svelte": "^3.52.0",
-    "svelte-check": "^2.9.0",
+    "svelte": "^3.59.1",
+    "svelte-check": "^3.6.2",
     "svelte-readme": "^3.6.3"
   },
   "repository": {

package/src/Typeahead.svelte

@@ -175,13 +175,12 @@
   }}
 />
 
-<!-- svelte-ignore a11y-role-has-required-aria-props -->
 <div
   data-svelte-typeahead
   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"

package/types/Typeahead.svelte.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
-import { SearchProps } from "svelte-search/types/Search";
+import { SearchProps } from "svelte-search/src/Search.svelte";
 
-export interface TypeaheadProps<TItem> extends SearchProps {
+export interface TypeaheadProps<TItem> extends Omit<SearchProps, "results"> {
   /**
    * @default "typeahead-" + Math.random().toString(36)
    */

package/CHANGELOG.md

@@ -1,168 +0,0 @@
-# Changelog
-
-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.4.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.4.0) - 2022-11-08
-
-**Features**
-
-- add `showAllResultsOnFocus` prop to display all results when focusing an empty input
-
-**Fixes**
-
-- silence a11y warnings emitted by Svelte@3.52
-- event type for dispatched `clear` event should be `null`
-- unset `ul` margin
-
-## [4.3.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.2) - 2022-09-01
-
-**Fixes**
-
-- allow results to be selected if using `showDropdownOnFocus`
-
-## [4.3.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.1) - 2022-08-29
-
-**Fixes**
-
-- skip disabled results when auto-selecting a result
-
-## [4.3.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.0) - 2022-08-29
-
-**Features**
-
-- add `showDropdownOnFocus` prop to only show dropdown if the search input is focused
-
-## [4.2.4](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.4) - 2022-07-05
-
-**Fixes**
-
-- set dropdown menu `z-index: 1` when expanded
-
-## [4.2.3](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.3) - 2022-07-04
-
-**Fixes**
-
-- update selected index when hovering over a result
-
-## [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**
-
-- prevent keyboard selection and navigation of disabled results
-- add missing annotation for `TItem.disabled` to `results` prop
-
-**Documentation**
-
-- add `pnpm` installation command
-- remove "disabling items after selection" example
-- remove `id` fields from `data` array
-- simplify dispatched events example
-
-## [4.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.0) - 2021-10-26
-
-**Features**
-
-- use TypeScript generics so that the item type can be inferred from `data` value
-
-## [4.1.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.1.0) - 2021-10-03
-
-**Features**
-
-- render a "no-results" slot when the search value does not yield results
-- add `value` to the default slot props
-
-## [4.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.0.0) - 2021-09-05
-
-**Breaking Changes**
-
-- use `.svelte.d.ts` extension for component TypeScript definition
-
-## [3.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v3.0.0) - 2021-03-16
-
-**Breaking Changes**
-
-- the `ul` element is rendered even without results to preserve the accessibility label
-
-**Fixes**
-
-- disable form ARIA attributes in `svelte-search`
-- pass the correct `aria-activedescendant` item to `svelte-search`
-
-## [2.4.1](https://github.com/metonym/svelte-typeahead/releases/tag/v2.4.1) - 2021-03-14
-
-**Fixes**
-
-- pass `id` to `Search` to fix `aria-labelledby` references
-
-## [2.4.0](https://github.com/metonym/svelte-typeahead/releases/tag/v2.4.0) - 2021-03-04
-
-**Features**
-
-- add `limit` prop to limit number of results; default value is `Infinity`
-
-## [2.3.0](https://github.com/metonym/svelte-typeahead/releases/tag/v2.3.0) - 2021-02-21
-
-**Features**
-
-- add `disable`, `filter` props to disable and filter items from the result set
-
-**Fixes**
-
-- bind the input element reference correctly to fix focusing behavior
-- don't pass the Typeahead id to Search
-
-## [2.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v2.2.0) - 2021-02-20
-
-**Features**
-
-- add `inputAfterSelect` prop to allow user to preserve or clear the input field after selecting a result; possible values are `"update" | "clear" | "keep"` (default is `"update"`)
-- add searched value to dispatched "select" event detail (`e.detail.searched`)
-
-## [2.1.0](https://github.com/metonym/svelte-typeahead/releases/tag/v2.1.0) - 2021-02-20
-
-**Features**
-
-- include `original` item and `originalIndex` in dispatched "select" event
-
-## [2.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v2.0.0) - 2020-12-31
-
-**Breaking Changes**
-
-- upgrade `svelte-search` to version 1.0.0
-- defer to default `label`, `placeholder` props from `search-svelte`
-- use `SvelteComponentTyped` interface in TypeScript definitions
-
-## [1.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v1.0.0) - 2020-11-28
-
-**Features**
-
-- export reactive `results` array containing fuzzy results
-- add `focusAfterSelect` to opt in to focusing input after selecting a result
-- keydown default behavior is preventing if pressing "ArrowUp", "ArrowDown", or "Escape"
-
-**Breaking changes**
-
-- `focusAfterSelect` is `false` by default
-- redesigned default styles
-- if using TS, Svelte version >=3.30 is required
-
-## [0.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v0.2.0) - 2020-11-17
-
-- Add TypeScript definitions
-
-## [0.1.1](https://github.com/metonym/svelte-typeahead/releases/tag/v0.1.1) - 2020-08-06
-
-- Remove `filter` named export
-
-## [0.1.0](https://github.com/metonym/svelte-typeahead/releases/tag/v0.1.0) - 2020-04-15
-
-- Initial release