svelte-multiselect - npm Package Compare versions

Comparing version 8.6.0 to 8.6.1

dist/CmdPalette.svelte.d.ts

@@ -14,4 +14,4 @@ import { SvelteComponentTyped } from "svelte";
         open?: boolean | undefined;
-        dialog: HTMLDialogElement;
-        input: HTMLInputElement;
+        dialog?: HTMLDialogElement | null | undefined;
+        input?: HTMLInputElement | null | undefined;
         placeholder?: string | undefined;
@@ -18,0 +18,0 @@ };

dist/index.d.ts

 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
@@ -5,0 +5,0 @@ export type Option = string | number | ObjectOption;

dist/index.js

 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
-// Firefox lacks support for scrollIntoViewIfNeeded, see
-// https://github.com/janosh/svelte-multiselect/issues/87
-// this polyfill was copied from
+// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
+// See https://github.com/janosh/svelte-multiselect/issues/87
+// Polyfill 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 elem = this;
     const observer = new IntersectionObserver(function ([entry]) {
@@ -16,3 +16,3 @@ const ratio = entry.intersectionRatio;
             const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-            el.scrollIntoView({
+            elem.scrollIntoView({
                 block: place,
@@ -24,3 +24,3 @@ inline: place,
     });
-    observer.observe(this);
+    observer.observe(elem);
     return observer; // return for testing
@@ -27,0 +27,0 @@ }

dist/MultiSelect.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import type { MultiSelectEvents, Option as GenericOption } from './';
+import type { Option as GenericOption, MultiSelectEvents } from './';
 declare class __sveltets_Render<Option extends GenericOption> {
@@ -4,0 +4,0 @@ props(): {

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "type": "module",
@@ -27,33 +27,33 @@ "svelte": "./dist/index.js",
   "dependencies": {
-    "svelte": "^3.57.0"
+    "svelte": "^3.58.0"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.0",
-    "@playwright/test": "^1.31.2",
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.12.0",
+    "@iconify/svelte": "^3.1.3",
+    "@playwright/test": "^1.33.0",
+    "@sveltejs/adapter-static": "^2.0.2",
+    "@sveltejs/kit": "^1.15.9",
     "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
-    "@vitest/coverage-c8": "^0.29.3",
-    "eslint": "^8.36.0",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@vitest/coverage-c8": "^0.30.1",
+    "eslint": "^8.39.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "^11.8.0",
     "jsdom": "^21.1.1",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.4",
-    "prettier-plugin-svelte": "^2.9.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.1.4",
+    "svelte-check": "^3.2.0",
     "svelte-preprocess": "^5.0.3",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
-    "svelte2tsx": "^0.6.10",
-    "typescript": "5.0.2",
-    "vite": "^4.2.0",
-    "vitest": "^0.29.3"
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.5",
+    "svelte2tsx": "^0.6.11",
+    "typescript": "5.0.4",
+    "vite": "^4.3.3",
+    "vitest": "^0.30.1"
   },
@@ -60,0 +60,0 @@ "keywords": [

readme.md

@@ -192,3 +192,3 @@ <h1 align="center">
 
-   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(search-results)` below for available CSS variables.
+   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables.
 
@@ -530,3 +530,3 @@ 1. ```ts
 - `div.multiselect:focus-within`
-  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`.
+  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` which in turn defaults to `cornflowerblue`.
 - `div.multiselect.disabled`
@@ -564,8 +564,12 @@ - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state.
   - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
-- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`
-  - `color: var(--sms-highlight-color, orange)`
-  - `background: var(--sms-highlight-bg)`
-  - `text-decoration: var(--sms-highlight-text-decoration)`
-  - `text-decoration-color: var(--sms-highlight-text-decoration-color)`
+- `::highlight(sms-search-matches)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`. These styles [cannot be set via CSS variables](https://stackoverflow.com/a/56799215). Instead, use a new rule set. For example:
 
+  ```css
+  ::highlight(sms-search-matches) {
+    color: orange;
+    background: rgba(0, 0, 0, 0.15);
+    text-decoration: underline;
+  }
+  ```
+
 ### With CSS frameworks
@@ -572,0 +576,0 @@

No alert changes

Improved metrics

Total package byte prevSize

81853

0.66%

Number of lines in readme file

660

0.61%

Dependency changes

• Updated

  svelte@^3.58.0