list-prepend and list-append slots

package.json

@@ -1,70 +1,70 @@
 {
-  "name": "svelte-select",
-  "version": "5.3.1",
-  "repository": "https://rob-balfre@github.com/rob-balfre/svelte-select.git",
-  "description": "A <Select> component for Svelte apps",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "npm run test:dev & npm run test:browser",
-    "test:dev": "rollup -cw",
-    "test:browser": "sirv test/public -p 3000 --dev --open",
-    "gen:docs": "node docs/generate_theming_variables_md.cjs",
-    "preprepare": "node src/remove-styles.cjs",
-    "prepare": "svelte-package",
-    "postprepare": "node src/post-prepare.cjs && npm run gen:docs",
-    "release": "release-it"
-  },
-  "devDependencies": {
-    "@rollup/plugin-alias": "^4.0.3",
-    "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/adapter-static": "2.0.1",
-    "@sveltejs/kit": "1.7.2",
-    "@sveltejs/package": "^1.0.2",
-    "autoprefixer": "^10.4.13",
-    "cross-env": "^7.0.3",
-    "find-in-files": "^0.5.0",
-    "fuse.js": "^6.6.2",
-    "prettier": "~2.8.4",
-    "prettier-plugin-svelte": "^2.9.0",
-    "release-it": "^15.6.0",
-    "rollup": "^3.17.1",
-    "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-css-only": "^4.3.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-svelte": "^7.1.3",
-    "svelte": "^3.55.1",
-    "sirv-cli": "^2.0.2",
-    "svelte-highlight": "^7.2.0",
-    "svelte-preprocess": "^5.0.1",
-    "svelte-tiny-virtual-list": "^2.0.5",
-    "svelte2tsx": "^0.6.1",
-    "tape-modern": "^1.1.2",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.2"
-  },
-  "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
-  "license": "ISC",
-  "keywords": [
-    "svelte"
-  ],
-  "release-it": {
-    "hooks": {
-      "after:bump": "npm run prepare"
+    "name": "@sawyerclick/svelte-select",
+    "version": "5.3.5",
+    "repository": "https://rob-balfre@github.com/rob-balfre/svelte-select.git",
+    "description": "A <Select> component for Svelte apps",
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "npm run test:dev & npm run test:browser",
+        "test:dev": "rollup -cw",
+        "test:browser": "sirv test/public -p 3000 --dev --open",
+        "gen:docs": "node docs/generate_theming_variables_md.cjs",
+        "preprepare": "node src/remove-styles.cjs",
+        "prepare": "svelte-package",
+        "postprepare": "node src/post-prepare.cjs && npm run gen:docs",
+        "release": "release-it"
     },
-    "github": {
-      "release": false
+    "devDependencies": {
+        "@rollup/plugin-alias": "^4.0.3",
+        "@sveltejs/adapter-auto": "2.0.0",
+        "@sveltejs/adapter-static": "2.0.1",
+        "@sveltejs/kit": "1.7.2",
+        "@sveltejs/package": "^1.0.2",
+        "autoprefixer": "^10.4.13",
+        "cross-env": "^7.0.3",
+        "find-in-files": "^0.5.0",
+        "fuse.js": "^6.6.2",
+        "prettier": "~2.8.4",
+        "prettier-plugin-svelte": "^2.9.0",
+        "release-it": "^15.6.0",
+        "rollup": "^3.17.1",
+        "rollup-plugin-cleaner": "^1.0.0",
+        "rollup-plugin-css-only": "^4.3.0",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-replace": "^2.2.0",
+        "rollup-plugin-svelte": "^7.1.3",
+        "svelte": "^3.55.1",
+        "sirv-cli": "^2.0.2",
+        "svelte-highlight": "^7.2.0",
+        "svelte-preprocess": "^5.0.1",
+        "svelte-tiny-virtual-list": "^2.0.5",
+        "svelte2tsx": "^0.6.1",
+        "tape-modern": "^1.1.2",
+        "typescript": "^4.9.5",
+        "vite": "^4.1.2"
     },
-    "npm": {
-      "publishPath": "./package"
+    "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
+    "license": "ISC",
+    "keywords": [
+        "svelte"
+    ],
+    "release-it": {
+        "hooks": {
+            "after:bump": "npm run prepare"
+        },
+        "github": {
+            "release": false
+        },
+        "npm": {
+            "publishPath": "./package"
+        }
+    },
+    "type": "module",
+    "dependencies": {
+        "@floating-ui/dom": "^1.2.1",
+        "svelte-floating-ui": "1.2.8"
     }
-  },
-  "type": "module",
-  "dependencies": {
-    "@floating-ui/dom": "^1.2.1",
-    "svelte-floating-ui": "1.2.8"
-  }
 }

src/lib/Select.svelte

@@ -611,9 +611,10 @@
         }
     }
 
+    $: activeValuesSet = new Set(value ? (multiple ? value.map((v) => v[itemId]) : [value[itemId]]) : []);
+
     function isItemActive(item, value, itemId) {
-        if (multiple) return;
-        return value && value[itemId] === item[itemId];
+        return value && (multiple ? activeValuesSet.has(item[itemId]) : item[itemId] === value[itemId]);
     }
 
     function isItemFirst(itemIndex) {
@@ -694,9 +695,11 @@
             on:scroll={handleListScroll}
             on:pointerdown|preventDefault={handlePointerDown}
             on:pointerup|preventDefault|stopPropagation>
+            <slot name="list-prepend" />
             {#if $$slots.list}<slot name="list" {filteredItems} />
             {:else if filteredItems.length > 0}
                 {#each filteredItems as item, i}
+                    {@const isActive = isItemActive(item, value, itemId)}
                     <div
                         on:mouseover={() => handleHover(i)}
                         on:focus={() => handleHover(i)}
@@ -705,16 +708,16 @@
                         class="list-item"
                         tabindex="-1">
                         <div
-                            use:activeScroll={{ scroll: isItemActive(item, value, itemId), listDom }}
+                            use:activeScroll={{ scroll: isActive, listDom }}
                             use:hoverScroll={{ scroll: scrollToHoverItem === i, listDom }}
                             class="item"
                             class:list-group-title={item.groupHeader}
-                            class:active={isItemActive(item, value, itemId)}
+                            class:active={isActive}
                             class:first={isItemFirst(i)}
                             class:hover={hoverItemIndex === i}
                             class:group-item={item.groupItem}
                             class:not-selectable={item?.selectable === false}>
-                            <slot name="item" {item} index={i}>
+                            <slot name="item" {item} index={i} active={isActive}>
                                 {item?.[label]}
                             </slot>
                         </div>
@@ -725,6 +728,7 @@
                     <div class="empty">No options</div>
                 </slot>
             {/if}
+            <slot name="list-append" />
         </div>
     {/if}
 

src/routes/examples/props/multiple/+page.svelte

@@ -8,5 +8,4 @@
     ];
 </script>
 
-<Select {items} multiple />
-
+<Select {items} multiple filterSelectedItems={false} />