focus and blur updates, bump deps and code clean up

Author: rob-balfre

.gitignore

@@ -4,7 +4,7 @@ node_modules
 .nova
 /dist/
 /test/public/index.js
-/test/public/bundle.css
+/test/public/index.css
 /spec/page/public/build
 /test-results
 /build

.prettierrc

@@ -2,6 +2,8 @@
     "useTabs": false,
     "singleQuote": true,
     "tabWidth": 4,
+    "printWidth": 200,
+    "bracketSameLine": true,
     "overrides": [
         {
             "files": ["*.svelte"],

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## unreleased
 
+* selectedValue removed
+* borrowed some code from svelte-materialify for the clickOutside function
 * MultiSelection -> Multi
 * added postcss to example, tests
 * tailwind css option

package-lock.json

@@ -13,28 +13,28 @@
     "package": "svelte-kit package"
   },
   "devDependencies": {
-    "@sveltejs/kit": "1.0.0-next.180",
-    "autoprefixer": "^10.3.7",
+    "@sveltejs/kit": "1.0.0-next.195",
+    "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
     "find-in-files": "^0.5.0",
     "postcss": "^8.3.11",
-    "postcss-cli": "^9.0.1",
+    "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
-    "prettier": "~2.2.1",
-    "prettier-plugin-svelte": "^2.2.0",
-    "rollup": "^2.41.2",
+    "prettier": "~2.4.1",
+    "prettier-plugin-svelte": "^2.4.0",
+    "rollup": "^2.59.0",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-svelte": "^7.1.0",
     "sirv-cli": "^1.0.14",
-    "svelte": "^3.43.0",
+    "svelte": "^3.44.1",
     "svelte-preprocess": "^4.9.8",
-    "svelte2tsx": "^0.4.5",
-    "tailwindcss": "^2.2.16",
-    "tape-modern": "^1.1.1",
-    "typescript": "^4.4.2"
+    "svelte2tsx": "^0.4.8",
+    "tailwindcss": "^2.2.19",
+    "tape-modern": "^1.1.2",
+    "typescript": "^4.4.4"
   },
   "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
   "license": "ISC",

package.json

@@ -1,6 +1,7 @@
 <script>
     import { beforeUpdate, createEventDispatcher, onMount, tick } from 'svelte';
     import isOutOfViewport from './isOutOfViewport';
+    import clickOutside from './clickOutside';
 
     const dispatch = createEventDispatcher();
 
@@ -34,9 +35,7 @@
 
     onMount(() => {
         if (items.length > 0 && !isMulti && value) {
-            const _hoverItemIndex = items.findIndex(
-                (item) => item[optionIdentifier] === value[optionIdentifier]
-            );
+            const _hoverItemIndex = items.findIndex((item) => item[optionIdentifier] === value[optionIdentifier]);
 
             if (_hoverItemIndex) {
                 hoverItemIndex = _hoverItemIndex;
@@ -79,14 +78,9 @@
 
     function handleClick(args) {
         const { item, i, event } = args;
-        event.stopPropagation();
+        // event.stopPropagation();
 
-        if (
-            value &&
-            !isMulti &&
-            value[optionIdentifier] === item[optionIdentifier]
-        )
-            return closeList();
+        if (value && !isMulti && value[optionIdentifier] === item[optionIdentifier]) return closeList();
 
         if (item.isCreator) {
             dispatch('itemCreated', filterText);
@@ -97,8 +91,8 @@
         }
     }
 
-    function closeList() {
-        dispatch('closeList');
+    function closeList(args) {
+        dispatch('closeList', args);
     }
 
     async function updateHoverItem(increment) {
@@ -141,11 +135,7 @@
                 e.preventDefault();
                 if (items.length === 0) break;
                 const hoverItem = items[hoverItemIndex];
-                if (
-                    value &&
-                    !isMulti &&
-                    value[optionIdentifier] === hoverItem[optionIdentifier]
-                ) {
+                if (value && !isMulti && value[optionIdentifier] === hoverItem[optionIdentifier]) {
                     closeList();
                     break;
                 }
@@ -161,12 +151,7 @@
                 if (items.length === 0) {
                     return closeList();
                 }
-                if (
-                    value &&
-                    value[optionIdentifier] ===
-                        items[hoverItemIndex][optionIdentifier]
-                )
-                    return closeList();
+                if (value && value[optionIdentifier] === items[hoverItemIndex][optionIdentifier]) return closeList();
                 activeItemIndex = hoverItemIndex;
                 handleSelect(items[hoverItemIndex]);
                 break;
@@ -177,14 +162,10 @@
         if (VirtualList || !container) return;
 
         let offsetBounding;
-        const focusedElemBounding = container.querySelector(
-            `.list-item .${className}`
-        );
+        const focusedElemBounding = container.querySelector(`.list-item .${className}`);
 
         if (focusedElemBounding) {
-            offsetBounding =
-                container.getBoundingClientRect().bottom -
-                focusedElemBounding.getBoundingClientRect().bottom;
+            offsetBounding = container.getBoundingClientRect().bottom - focusedElemBounding.getBoundingClientRect().bottom;
         }
 
         container.scrollTop -= offsetBounding;
@@ -199,33 +180,25 @@
     }
 
     function isItemHover(hoverItemIndex, item, itemIndex, items) {
-        return (
-            isItemSelectable(item) &&
-            (hoverItemIndex === itemIndex || items.length === 1)
-        );
+        return isItemSelectable(item) && (hoverItemIndex === itemIndex || items.length === 1);
     }
 
     function isItemSelectable(item) {
-        return (
-            (item.isGroupHeader && item.isSelectable) ||
-            item.selectable ||
-            !item.hasOwnProperty('selectable')
-        );
+        return (item.isGroupHeader && item.isSelectable) || item.selectable || !item.hasOwnProperty('selectable');
+    }
+
+    function handleClickOutside() {
+        closeList({ isOutside: true });
     }
 
     let listStyle;
     function computePlacement() {
         const { top, height, width } = parent.getBoundingClientRect();
 
         listStyle = '';
-        listStyle += `min-width:${width}px;width:${
-            listAutoWidth ? 'auto' : '100%'
-        };`;
-
-        if (
-            listPlacement === 'top' ||
-            (listPlacement === 'auto' && isOutOfViewport(parent).bottom)
-        ) {
+        listStyle += `min-width:${width}px;width:${listAutoWidth ? 'auto' : '100%'};`;
+
+        if (listPlacement === 'top' || (listPlacement === 'auto' && isOutOfViewport(parent).bottom)) {
             listStyle += `bottom:${height + listOffset}px;`;
         } else {
             listStyle += `top:${height + listOffset}px;`;
@@ -235,28 +208,16 @@
     $: {
         if (parent && container) computePlacement();
     }
+
+    
 </script>
 
 <svelte:window on:keydown={handleKeyDown} on:resize={computePlacement} />
 
-<div
-    class={listClass}
-    class:virtual-list={VirtualList}
-    bind:this={container}
-    style={listStyle}>
+<div use:clickOutside={parent} on:clickOutside={handleClickOutside} class={listClass} class:virtual-list={VirtualList} bind:this={container} style={listStyle}>
     {#if VirtualList}
-        <svelte:component
-            this={VirtualList}
-            {items}
-            {itemHeight}
-            let:item
-            let:i>
-            <div
-                on:mouseover={() => handleHover(i)}
-                on:focus={() => handleHover(i)}
-                on:click={(event) => handleClick({ item, i, event })}
-                class="list-item"
-                tabindex="-1">
+        <svelte:component this={VirtualList} {items} {itemHeight} let:item let:i>
+            <div on:mouseover={() => handleHover(i)} on:focus={() => handleHover(i)} on:click={(event) => handleClick({ item, i, event })} class="list-item" tabindex="-1">
                 <svelte:component
                     this={Item}
                     {item}
@@ -274,12 +235,7 @@
             {#if item.isGroupHeader && !item.isSelectable}
                 <div class="list-group-title">{getGroupHeaderLabel(item)}</div>
             {:else}
-                <div
-                    on:mouseover={() => handleHover(i)}
-                    on:focus={() => handleHover(i)}
-                    on:click={(event) => handleClick({ item, i, event })}
-                    class="list-item"
-                    tabindex="-1">
+                <div on:mouseover={() => handleHover(i)} on:focus={() => handleHover(i)} on:click={(event) => handleClick({ item, i, event })} class="list-item" tabindex="-1">
                     <svelte:component
                         this={Item}
                         {item}