svelte-multiselect 5.0.4 → 5.0.5

package/MultiSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import scrollIntoView from 'scroll-into-view-if-needed';
+import { createEventDispatcher } from 'svelte';
 import { get_label, get_value } from './';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
@@ -232,7 +233,8 @@ async function handleKeydown(event) {
             // around start/end of option list. Find a better solution than waiting 10 ms to.
             setTimeout(() => {
                 const li = document.querySelector(`ul.options > li.active`);
-                li?.scrollIntoView();
+                if (li)
+                    scrollIntoView(li, { scrollMode: `if-needed` });
             }, 10);
         }
     }
@@ -499,9 +501,11 @@ const if_enter_or_space = (handler) => (event) => {
     background: none;
     flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
     min-width: 2em;
-    color: inherit;
+    /* ensure input uses text color and not --sms-selected-text-color */
+    color: var(--sms-text-color);
     font-size: inherit;
     cursor: inherit; /* needed for disabled state */
+    border-radius: 0; /* reset ul.selected > li */
   }
   :where(div.multiselect > ul.selected > li > input)::placeholder {
     padding-left: 5pt;

package/icons/Octocat.svelte

@@ -0,0 +1,5 @@
+<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+  <path
+    d="M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z"
+  />
+</svg>

package/icons/Octocat.svelte.d.ts

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

package/icons/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/icons/index.js

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/package.json

@@ -5,19 +5,19 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@playwright/test": "^1.23.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.34",
-    "@sveltejs/kit": "^1.0.0-next.360",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.0",
+    "@playwright/test": "^1.24.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.38",
+    "@sveltejs/kit": "^1.0.0-next.396",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
     "jsdom": "^20.0.0",
@@ -26,16 +26,17 @@
     "prettier-plugin-svelte": "^2.7.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.48.0",
+    "scroll-into-view-if-needed": "^2.2.29",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-github-corner": "^0.1.0",
     "svelte-preprocess": "^4.10.6",
-    "svelte-toc": "^0.2.9",
-    "svelte2tsx": "^0.5.11",
+    "svelte-toc": "^0.2.10",
+    "svelte2tsx": "^0.5.13",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^2.9.13",
-    "vitest": "^0.18.0"
+    "vite": "^3.0.4",
+    "vitest": "^0.19.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -35,15 +35,17 @@
 
 ## Recent breaking changes
 
-- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form or user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed to `div.multiselect.{readonly=>disabled}`.
+- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form of user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed `div.multiselect.{readonly=>disabled}`.
 
 - v4.0.3 CSS variables starting with `--sms-input-<attr>` were renamed to just `--sms-<attr>`. E.g. `--sms-input-min-height` is now `--sms-min-height`.
 
-- v5.0.0 Support both simple and object options. Previously string or number options were converted to objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's what you'll get from `bind:selected`.
+- v5.0.0 Support both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`.
 
 ## Installation
 
 ```sh
+npm install -D svelte-multiselect
+pnpm install -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -108,9 +110,11 @@ Full list of props/bindable variables for this component:
 
 ## Exposed methods
 
-1. `filterFunc = (op: Option, searchText: string) => boolean`: Determine what options are shown when user enters search string to filter dropdown list. Defaults to:
+1. `filterFunc = (op: Option, searchText: string) => boolean`: Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
    ```ts
+   import type { Option } from 'svelte-multiselect'
+
    filterFunc = (op: Option, searchText: string) => {
      if (!searchText) return true
      return `${op.label}`.toLowerCase().includes(searchText.toLowerCase())