svelte-multiselect 8.2.1 → 8.2.2

package/MultiSelect.svelte

@@ -55,8 +55,8 @@ export let searchText = ``;
 export let selected = options
     ?.filter((op) => op?.preselected)
     .slice(0, maxSelect ?? undefined) ?? [];
-export let selectedOptionsDraggable = true;
 export let sortSelected = false;
+export let selectedOptionsDraggable = !sortSelected;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
 export let value = null;
@@ -89,6 +89,9 @@ if (!Array.isArray(selected)) {
 if (maxSelect && typeof required === `number` && required > maxSelect) {
     console.error(`MultiSelect maxSelect=${maxSelect} < required=${required}, makes it impossible for users to submit a valid form`);
 }
+if (sortSelected && selectedOptionsDraggable) {
+    console.warn(`MultiSelect's sortSelected and selectedOptionsDraggable should not be combined as any user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
+}
 const dispatch = createEventDispatcher();
 let add_option_msg_is_active = false; // controls active state of <li>{addOptionMsg}</li>
 let window_width;
@@ -359,7 +362,9 @@ const dragstart = (idx) => (event) => {
       form_input?.setCustomValidity(msg)
     }}
   />
-  <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt;" />
+  <slot name="expand-icon" {open}>
+    <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
+  </slot>
   <ul class="selected {ulSelectedClass}">
     {#each selected as option, idx (get_label(option))}
       <li
@@ -394,39 +399,36 @@ const dragstart = (idx) => (event) => {
         {/if}
       </li>
     {/each}
-    <li style="display: contents;">
-      <input
-        class={inputClass}
-        bind:this={input}
-        {autocomplete}
-        bind:value={searchText}
-        on:mouseup|self|stopPropagation={open_dropdown}
-        on:keydown|stopPropagation={handle_keydown}
-        on:focus
-        on:focus={open_dropdown}
-        {id}
-        {disabled}
-        {inputmode}
-        {pattern}
-        placeholder={selected.length == 0 ? placeholder : null}
-        aria-invalid={invalid ? `true` : null}
-        ondrop="return false"
-        on:blur
-        on:change
-        on:click
-        on:keydown
-        on:keyup
-        on:mousedown
-        on:mouseenter
-        on:mouseleave
-        on:touchcancel
-        on:touchend
-        on:touchmove
-        on:touchstart
-      />
-      <!-- the above on:* lines forward potentially useful DOM events -->
-    </li>
   </ul>
+  <input
+    class={inputClass}
+    bind:this={input}
+    {autocomplete}
+    bind:value={searchText}
+    on:mouseup|self|stopPropagation={open_dropdown}
+    on:keydown|stopPropagation={handle_keydown}
+    on:focus
+    on:focus={open_dropdown}
+    {id}
+    {disabled}
+    {inputmode}
+    {pattern}
+    placeholder={selected.length == 0 ? placeholder : null}
+    aria-invalid={invalid ? `true` : null}
+    on:blur
+    on:change
+    on:click
+    on:keydown
+    on:keyup
+    on:mousedown
+    on:mouseenter
+    on:mouseleave
+    on:touchcancel
+    on:touchend
+    on:touchmove
+    on:touchstart
+  />
+  <!-- the above on:* lines forward potentially useful DOM events -->
   {#if loading}
     <slot name="spinner">
       <CircleSpinner />
@@ -536,8 +538,8 @@ const dragstart = (idx) => (event) => {
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
-    width: var(--sms-width);
-    max-width: var(--sms-max-width);
+    width: var(--sms-width, 100%);
+    max-width: var(--sms-max-width, 800px);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
     font-size: var(--sms-font-size, inherit);
@@ -606,19 +608,23 @@ const dragstart = (idx) => (event) => {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected > li > input) {
+  :where(div.multiselect > ul.selected + input) {
     border: none;
     outline: none;
     background: none;
-    flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
-    min-width: 2em;
     /* 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 */
+    width: 0;
+    visibility: hidden;
+  }
+  :where(div.multiselect:focus-within > ul.selected + input) {
+    visibility: visible;
+    width: 3em;
   }
-  :where(div.multiselect > ul.selected > li > input::placeholder) {
+  :where(div.multiselect > ul.selected + input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);

package/MultiSelect.svelte.d.ts

@@ -47,13 +47,16 @@ declare const __propDef: {
         resetFilterOnAdd?: boolean | undefined;
         searchText?: string | undefined;
         selected?: Option[] | undefined;
-        selectedOptionsDraggable?: boolean | undefined;
         sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
+        selectedOptionsDraggable?: boolean | undefined;
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
     };
     slots: {
+        'expand-icon': {
+            open: boolean;
+        };
         selected: {
             option: Option;
             idx: any;
@@ -66,7 +69,6 @@ declare const __propDef: {
             idx: any;
         };
     };
-    getters: {};
     events: MultiSelectEvents;
 };
 export type MultiSelectProps = typeof __propDef.props;

package/changelog.md

@@ -2,8 +2,19 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+<!-- auto-changelog-above -->
+
+#### [v8.2.2](https://github.com/janosh/svelte-multiselect/compare/v8.2.1...v8.2.2)
+
+> 18 December 2022
+
+- Issue console warning if `sortSelected && selectedOptionsDraggable` [`#187`](https://github.com/janosh/svelte-multiselect/pull/187)
+- Add new slot named 'expand-icon' [`#186`](https://github.com/janosh/svelte-multiselect/pull/186)
+
 #### [v8.2.1](https://github.com/janosh/svelte-multiselect/compare/v8.2.0...v8.2.1)
 
+> 10 December 2022
+
 - Fix `allowUserOptions` preventing dropdown list navigation with up/down arrow keys [`#184`](https://github.com/janosh/svelte-multiselect/pull/184)
 - Mdsvexamples [`#182`](https://github.com/janosh/svelte-multiselect/pull/182)
 - Add changelog & contributing pages to site [`#181`](https://github.com/janosh/svelte-multiselect/pull/181)
@@ -11,8 +22,6 @@ All notable changes to this project will be documented in this file. Dates are d
 - fix build error [`b896d36`](https://github.com/janosh/svelte-multiselect/commit/b896d3643a0988b0d0bed832ba46bcad0e2c4494)
 - fix readme badge for gh-pages.yml status [`906b560`](https://github.com/janosh/svelte-multiselect/commit/906b56024a826ed45263197b1267015d88f0a660)
 
-<!-- auto-changelog-above -->
-
 #### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0)
 
 > 30 November 2022

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]: any;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type ChevronExpandSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        [x: string]: never;
     };
     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]: any;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type CrossSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        [x: string]: never;
     };
     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]: any;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type DisabledSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        [x: string]: never;
     };
     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]: any;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type OctocatSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.1",
+  "version": "8.2.2",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@iconify/svelte": "^3.0.0",
-    "@playwright/test": "^1.28.0",
-    "@sveltejs/adapter-static": "1.0.0-next.48",
-    "@sveltejs/kit": "1.0.0-next.553",
-    "@sveltejs/package": "1.0.0-next.6",
-    "@sveltejs/vite-plugin-svelte": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "@vitest/coverage-c8": "^0.25.2",
-    "eslint": "^8.28.0",
+    "@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",
+    "@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",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.1.0",
-    "highlight.js": "^11.6.0",
-    "jsdom": "^20.0.2",
+    "highlight.js": "^11.7.0",
+    "jsdom": "^20.0.3",
     "mdsvex": "^0.10.6",
-    "mdsvexamples": "^0.3.2",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.1",
+    "mdsvexamples": "^0.3.3",
+    "prettier": "^2.8.1",
+    "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte": "^3.53.1",
-    "svelte-check": "^2.9.2",
+    "svelte": "^3.55.0",
+    "svelte-check": "^2.10.2",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.7",
-    "svelte-toc": "^0.4.1",
-    "svelte2tsx": "^0.5.20",
+    "svelte-preprocess": "^5.0.0",
+    "svelte-toc": "^0.5.0",
+    "svelte2tsx": "^0.5.22",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^3.2.4",
-    "vitest": "^0.25.2"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.1",
+    "vitest": "^0.25.8"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -327,16 +327,16 @@ Full list of props/bindable variables for this component. The `Option` type you
    Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally. Can be passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.
 
 1. ```ts
-   selectedOptionsDraggable: boolean = true
+   sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
    ```
 
-   Whether selected options are draggable so users can change their order.
+   Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://janosh.github.io/svelte-multiselect/sort-selected) example.
 
 1. ```ts
-   sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
+   selectedOptionsDraggable: boolean = !sortSelected
    ```
 
-   Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://janosh.github.io/svelte-multiselect/sort-selected) example.
+   Whether selected options are draggable so users can change their order.
 
 1. ```ts
    value: Option | Option[] | null = null
@@ -346,13 +346,14 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 ## 🎰   Slots
 
-`MultiSelect.svelte` has 3 named slots:
+`MultiSelect.svelte` accepts the following named slots:
 
-- `slot="option"`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown.
-- `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
-- `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props.
-- `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
-- `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
+1. `slot="option"`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown.
+1. `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
+1. `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props.
+1. `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
+1. `slot="expand-icon"`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden.
+1. `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
 
 Example:
 
@@ -484,8 +485,8 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
   - `min-height: var(--sms-min-height, 22pt)`
-  - `width: var(--sms-width)`
-  - `max-width: var(--sms-max-width)`
+  - `width: var(--sms-width, 100%)`
+  - `max-width: var(--sms-max-width, 800px)`
   - `margin: var(--sms-margin)`
   - `font-size: var(--sms-font-size, inherit)`
 - `div.multiselect.open`