svelte-multiselect 8.2.3 → 8.2.4

package/MultiSelect.svelte

@@ -14,6 +14,7 @@ export let defaultDisabledTitle = `This option is disabled`;
 export let disabled = false;
 export let disabledInputTitle = `This input is disabled`;
 // case-insensitive equality comparison after string coercion (looking only at the `label` key of object options)
+// prettier-ignore
 export let duplicateFunc = (op1, op2) => `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase();
 export let duplicateOptionMsg = `This option is already selected`;
 export let duplicates = false; // whether to allow duplicate options
@@ -53,7 +54,7 @@ export let required = false;
 export let resetFilterOnAdd = true;
 export let searchText = ``;
 export let selected = options
-    ?.filter((op) => op?.preselected)
+    ?.filter((op) => op instanceof Object && op?.preselected)
     .slice(0, maxSelect ?? undefined) ?? [];
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
@@ -123,7 +124,7 @@ function add(label, event) {
             // a new option from the user-entered text
             if (typeof options[0] === `object`) {
                 // if 1st option is an object, we create new option as object to keep type homogeneity
-                option = { label: searchText, value: searchText };
+                option = { label: searchText };
             }
             else {
                 if ([`number`, `undefined`].includes(typeof options[0]) &&
@@ -147,7 +148,7 @@ function add(label, event) {
             return;
         }
         if (maxSelect === 1) {
-            // for maxselect = 1 we always replace current option with new one
+            // for maxSelect = 1 we always replace current option with new one
             selected = [option];
         }
         else {
@@ -183,7 +184,7 @@ function remove(label) {
     selected = selected; // Svelte rerender after in-place splice
     const option = options.find((option) => get_label(option) === label) ??
         // if option with label could not be found but allowUserOptions is truthy,
-        // assume it was created by user and create correspondidng option object
+        // assume it was created by user and create corresponding option object
         // on the fly for use as event payload
         (allowUserOptions && { label, value: label });
     if (!option) {
@@ -212,7 +213,7 @@ function close_dropdown(event) {
 }
 // handle all keyboard events this component receives
 async function handle_keydown(event) {
-    // on escape or tab out of input: dismiss options dropdown and reset search text
+    // on escape or tab out of input: close options dropdown and reset search text
     if (event.key === `Escape` || event.key === `Tab`) {
         close_dropdown(event);
         searchText = ``;
@@ -375,9 +376,10 @@ const dragstart = (idx) => (event) => {
         on:dragstart={dragstart(idx)}
         on:drop|preventDefault={drop(idx)}
         on:dragenter={() => (drag_idx = idx)}
+        on:dragover|preventDefault
         class:active={drag_idx === idx}
-        ondragover="return false"
       >
+        <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
           {#if parseLabelsAsHtml}
             {@html get_label(option)}

package/MultiSelect.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MultiSelectEvents, Option } from './';
-declare const __propDef: {
-    props: {
+import type { MultiSelectEvents, Option as GenericOption } from './';
+declare class __sveltets_Render<Option extends GenericOption> {
+    props(): {
         activeIndex?: number | null | undefined;
         activeOption?: Option | null | undefined;
         addOptionMsg?: string | undefined;
@@ -12,7 +12,7 @@ declare const __propDef: {
         defaultDisabledTitle?: string | undefined;
         disabled?: boolean | undefined;
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: Option, op2: Option) => boolean) | undefined;
+        duplicateFunc?: ((op1: GenericOption, op2: GenericOption) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
         duplicates?: boolean | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
@@ -53,7 +53,8 @@ declare const __propDef: {
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
     };
-    slots: {
+    events(): MultiSelectEvents;
+    slots(): {
         'expand-icon': {
             open: boolean;
         };
@@ -69,11 +70,10 @@ declare const __propDef: {
             idx: any;
         };
     };
-    events: MultiSelectEvents;
-};
-export type MultiSelectProps = typeof __propDef.props;
-export type MultiSelectEvents = typeof __propDef.events;
-export type MultiSelectSlots = typeof __propDef.slots;
-export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+}
+export type MultiSelectProps<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['props']>;
+export type MultiSelectEvents<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectSlots<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['slots']>;
+export default class MultiSelect<Option extends GenericOption> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/changelog.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v8.2.4](https://github.com/janosh/svelte-multiselect/compare/v8.2.3...v8.2.4)
+
+> 8 January 2023
+
+- Coverage badges [`#190`](https://github.com/janosh/svelte-multiselect/pull/190)
+- feat: add type inference for the `options` prop [`#189`](https://github.com/janosh/svelte-multiselect/pull/189)
+- feat: add type inference for the `options` prop (#189) [`#78`](https://github.com/janosh/svelte-multiselect/issues/78)
+- merge ExampleCode.svelte with CollapsibleCode.svelte [`56ff99b`](https://github.com/janosh/svelte-multiselect/commit/56ff99bcc378c5582b303aa1c03302cdbceb3076)
+- pnpm add -D svelte-zoo to outsource some site components and icons [`6ee64f3`](https://github.com/janosh/svelte-multiselect/commit/6ee64f376dfe166b993c94a36d376d1dce5f44f5)
+- restore reactive searchText block in loading example [`846da66`](https://github.com/janosh/svelte-multiselect/commit/846da66af058ac1f448c8aaa513d12fb4c2ac4cc)
+- fix bunch of TS errors, add playwright test for dragging selected options to reorder [`a483217`](https://github.com/janosh/svelte-multiselect/commit/a4832176f6fceb5346af2d4cd8ecc01a5626ab43)
+- add update-coverage package.json script [`1094f08`](https://github.com/janosh/svelte-multiselect/commit/1094f08cec9d6fd2f54b058af05022ab35ec4ac9)
+- add vite alias $root to clean up package.json, readme|contributing|changelog.md imports [`c19cbe4`](https://github.com/janosh/svelte-multiselect/commit/c19cbe4e38413bbcd04d4e35eddcd4cd88c67662)
+- mv src/components src/site [`3683ed7`](https://github.com/janosh/svelte-multiselect/commit/3683ed70f19498070ffe9e95c0261c688fb2f7c7)
+
 <!-- auto-changelog-above -->
 
 #### [v8.2.3](https://github.com/janosh/svelte-multiselect/compare/v8.2.2...v8.2.3)
@@ -116,7 +131,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Fix single select with arrow and enter keys [`#128`](https://github.com/janosh/svelte-multiselect/pull/128)
 - Add SCSS preprocessing [`#126`](https://github.com/janosh/svelte-multiselect/pull/126)
-- [pre-commit.ci] pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
+- pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
 - more unit tests [`1adbc99`](https://github.com/janosh/svelte-multiselect/commit/1adbc994b746b39c4ad081dc2573bf37f27c96c0)
 - test required but empty MultiSelect fails form validity check (i.e. causes unsubmittable form) and filled one passes it [`fd8b377`](https://github.com/janosh/svelte-multiselect/commit/fd8b37782cd508aacfc8125c6647cefe56144b80)
 
@@ -186,7 +201,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - Convert E2E tests from`vitest` to `@playwright/test` [`#95`](https://github.com/janosh/svelte-multiselect/pull/95)
 - Allow empty Multiselect [`#94`](https://github.com/janosh/svelte-multiselect/pull/94)
 - Add new slot `'remove-icon'` [`#93`](https://github.com/janosh/svelte-multiselect/pull/93)
-- [pre-commit.ci] pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
+- pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
 
 #### [v5.0.3](https://github.com/janosh/svelte-multiselect/compare/v5.0.2...v5.0.3)
 
@@ -224,7 +239,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Fix backspace deleting multiple selected options if identical labels [`#72`](https://github.com/janosh/svelte-multiselect/pull/72)
 - Several fixes for `allowUserOptions` [`#69`](https://github.com/janosh/svelte-multiselect/pull/69)
-- [pre-commit.ci] pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
+- pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
 
 #### [v4.0.5](https://github.com/janosh/svelte-multiselect/compare/v4.0.4...v4.0.5)
 
@@ -347,7 +362,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - favorite web framework show Confetti.svelte on:add Svelte [`8d109ee`](https://github.com/janosh/svelte-multiselect/commit/8d109ee5c7755e447fcb72419f3b7ecc19cac0b2)
 - bump svelte@3.45.0 to silence warning: MultiSelect has unused export property 'defaultDisabledTitle' (sveltejs/svelte#6964) [`f80a7a6`](https://github.com/janosh/svelte-multiselect/commit/f80a7a622310005407585298f2611597c0941990)
 - update readme + svelte-toc@0.2.0 [`40013ba`](https://github.com/janosh/svelte-multiselect/commit/40013badd61dd0fcade7ab295dabd26693e3cc51)
-- [pre-commit.ci] pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
+- pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
 - iOS Safari prevent zoom into page on focus MultiSelect input [`44f17be`](https://github.com/janosh/svelte-multiselect/commit/44f17be53378e38f4a8748b815737d25cdebc85f)
 
 ### [v3.0.0](https://github.com/janosh/svelte-multiselect/compare/v2.0.0...v3.0.0)
@@ -398,7 +413,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Add new prop disabledOptions [`#9`](https://github.com/janosh/svelte-multiselect/pull/9)
 - add pre-commit hooks [`dfb6399`](https://github.com/janosh/svelte-multiselect/commit/dfb6399a77b705f8e5979eb887d345a5f52ff929)
-- [pre-commit.ci] pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
+- pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
 
 #### [v1.1.11](https://github.com/janosh/svelte-multiselect/compare/v1.1.10...v1.1.11)
 
@@ -490,7 +505,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - remove hidden input for storing currently selected options as JSON [`802a219`](https://github.com/janosh/svelte-multiselect/commit/802a2195a28986c219298d7d9e7ca47f2aaf7db6)
 
-#### v1.0.0
+### v1.0.0
 
 > 7 May 2021
 

package/icons/ChevronExpand.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  ChevronExpandEvents */
 /** @typedef {typeof __propDef.slots}  ChevronExpandSlots */
 export default class ChevronExpand extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type ChevronExpandSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Cross.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CrossEvents */
 /** @typedef {typeof __propDef.slots}  CrossSlots */
 export default class Cross extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type CrossSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Disabled.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  DisabledEvents */
 /** @typedef {typeof __propDef.slots}  DisabledSlots */
 export default class Disabled extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type DisabledSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Octocat.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  OctocatEvents */
 /** @typedef {typeof __propDef.slots}  OctocatSlots */
 export default class Octocat extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type OctocatSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -47,3 +47,4 @@ export type MultiSelectEvents = {
     touchmove: TouchEvent;
     touchstart: TouchEvent;
 };
+export declare function scroll_into_view_if_needed_polyfill(centerIfNeeded?: boolean): IntersectionObserver;

package/index.js

@@ -3,21 +3,25 @@ export { default } from './MultiSelect.svelte';
 // https://github.com/janosh/svelte-multiselect/issues/87
 // this polyfill was copied from
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
+// exported for testing
+export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) {
+    const el = this;
+    const observer = new IntersectionObserver(function ([entry]) {
+        const ratio = entry.intersectionRatio;
+        if (ratio < 1) {
+            const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
+            el.scrollIntoView({
+                block: place,
+                inline: place,
+            });
+        }
+        this.disconnect();
+    });
+    observer.observe(this);
+    return observer; // return for testing
+}
 if (typeof Element !== `undefined` &&
     !Element.prototype?.scrollIntoViewIfNeeded &&
     typeof IntersectionObserver !== `undefined`) {
-    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
-        const el = this;
-        new IntersectionObserver(function ([entry]) {
-            const ratio = entry.intersectionRatio;
-            if (ratio < 1) {
-                const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-                el.scrollIntoView({
-                    block: place,
-                    inline: place,
-                });
-            }
-            this.disconnect();
-        }).observe(this);
-    };
+    Element.prototype.scrollIntoViewIfNeeded = scroll_into_view_if_needed_polyfill;
 }

package/package.json

@@ -5,42 +5,42 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.2.3",
+  "version": "8.2.4",
   "type": "module",
   "svelte": "index.js",
-  "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
-    "@playwright/test": "^1.29.0",
-    "@sveltejs/adapter-static": "1.0.0",
-    "@sveltejs/kit": "1.0.1",
-    "@sveltejs/package": "1.0.1",
+    "@playwright/test": "^1.29.2",
+    "@sveltejs/adapter-static": "1.0.1",
+    "@sveltejs/kit": "1.0.7",
+    "@sveltejs/package": "1.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "@vitest/coverage-c8": "^0.25.8",
-    "eslint": "^8.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@vitest/coverage-c8": "^0.26.3",
+    "eslint": "^8.31.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "hastscript": "^7.1.0",
+    "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
-    "jsdom": "^20.0.3",
+    "jsdom": "^21.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.2",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "svelte": "^3.55.0",
-    "svelte-check": "^2.10.2",
-    "svelte-github-corner": "^0.1.0",
+    "svelte-check": "^3.0.1",
+    "svelte-github-corner": "^0.2.0",
     "svelte-preprocess": "^5.0.0",
-    "svelte-toc": "^0.5.0",
-    "svelte2tsx": "^0.5.22",
+    "svelte-toc": "^0.5.1",
+    "svelte-zoo": "^0.1.4",
+    "svelte2tsx": "^0.6.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.1",
-    "vitest": "^0.25.8"
+    "vite": "^4.0.4",
+    "vitest": "^0.26.3"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -21,7 +21,7 @@
 
 <slot name="examples" />
 
-## 💡 &nbsp; Features
+## 💡 &thinsp; Features
 
 - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
 - **Keyboard friendly** for mouse-less form completion
@@ -34,7 +34,13 @@
 
 <slot name="nav" />
 
-## 📜 &nbsp; Breaking changes
+## 🧪 &thinsp; Coverage
+
+| Statements                                                                                 | Branches                                                                             | Lines                                                                            |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| ![Statements](https://img.shields.io/badge/statements-92.95%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-92.95%25-brightgreen.svg?style=flat) |
+
+## 📜 &thinsp; Breaking changes
 
 - **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
 - **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
@@ -42,15 +48,15 @@
   - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
   - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
 
-## 🔨 &nbsp; Installation
+## 🔨 &thinsp; Installation
 
 ```sh
-npm install -D svelte-multiselect
-pnpm add -D svelte-multiselect
-yarn add -D svelte-multiselect
+npm install --dev svelte-multiselect
+pnpm add --dev svelte-multiselect
+yarn add --dev svelte-multiselect
 ```
 
-## 📙 &nbsp; Usage
+## 📙 &thinsp; Usage
 
 ```svelte
 <script>
@@ -68,7 +74,7 @@ Favorite Frontend Tools?
 <MultiSelect bind:selected options={ui_libs} />
 ```
 
-## 🔣 &nbsp; Props
+## 🔣 &thinsp; Props
 
 Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 
@@ -135,7 +141,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 <!-- prettier-ignore -->
 1. ```ts
-   duplicateFunc: (op1: Option, op2: Option) => boolean = (op1, op2) =>
+   duplicateFunc: (op1: GenericOption, op2: GenericOption) => boolean = (op1, op2) =>
     `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
    ```
 
@@ -344,7 +350,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
 
-## 🎰 &nbsp; Slots
+## 🎰 &thinsp; Slots
 
 `MultiSelect.svelte` accepts the following named slots:
 
@@ -376,7 +382,7 @@ Example:
 </MultiSelect>
 ```
 
-## 🎬 &nbsp; Events
+## 🎬 &thinsp; Events
 
 `MultiSelect.svelte` dispatches the following events:
 
@@ -439,25 +445,36 @@ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutor
 />
 ```
 
-## 🦺 &nbsp; TypeScript
+## 🦺 &thinsp; TypeScript
 
-TypeScript users can import the types used for internal type safety:
+The type of `options` is inferred automatically from the data you pass. E.g.
 
-```svelte
-<script lang="ts">
-  import MultiSelect from 'svelte-multiselect'
-  import type { Option, ObjectOption } from 'svelte-multiselect'
-
-  const myOptions: ObjectOption[] = [
-    { label: 'foo', value: 42 },
-    { label: 'bar', value: 69 },
-  ]
-  // an Option can be string | number | ObjectOption
-  const myNumbers: Option[] = [42, 69]
-</script>
+```ts
+const options = [
+   { label: `foo`, value: 42 }
+   { label: `bar`, value: 69 }
+]
+// type Option = { label: string, value: number }
+const options = [`foo`, `bar`]
+// type Option = string
+const options = [42, 69]
+// type Option = number
+```
+
+The inferred type of `Option` is used to enforce type-safety on derived props like `selected` as well as slot components. E.g. you'll get an error when trying to use a slot component that expects a string if your options are objects (see [this comment](https://github.com/janosh/svelte-multiselect/pull/189/files#r1058853697) for example screenshots).
+
+You can also import [the types this component uses](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for downstream applications:
+
+```ts
+import {
+  Option,
+  ObjectOption,
+  DispatchEvents,
+  MultiSelectEvents,
+} from 'svelte-multiselect'
 ```
 
-## ✨ &nbsp; Styling
+## ✨ &thinsp; Styling
 
 There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
 
@@ -608,10 +625,10 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## 🆕 &nbsp; Changelog
+## 🆕 &thinsp; Changelog
 
 [View the changelog](changelog.md).
 
-## 🙏 &nbsp; Contributing
+## 🙏 &thinsp; Contributing
 
 Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project!