svelte-multiselect 2.0.0 → 3.0.0

package/MultiSelect.svelte

@@ -16,12 +16,13 @@ export let id = undefined;
 export let noOptionsMsg = `No matching options`;
 export let activeOption = null;
 export let outerDivClass = ``;
-export let ulTokensClass = ``;
-export let liTokenClass = ``;
+export let ulSelectedClass = ``;
+export let liSelectedClass = ``;
 export let ulOptionsClass = ``;
 export let liOptionClass = ``;
 export let removeBtnTitle = `Remove`;
 export let removeAllTitle = `Remove all`;
+// https://github.com/sveltejs/svelte/issues/6964
 export let defaultDisabledTitle = `This option is disabled`;
 if (maxSelect !== null && maxSelect < 0) {
     console.error(`maxSelect must be null or positive integer, got ${maxSelect}`);
@@ -30,12 +31,12 @@ if (!(options?.length > 0))
     console.error(`MultiSelect missing options`);
 if (!Array.isArray(selected))
     console.error(`selected prop must be an array`);
-function isObject(item) {
-    return typeof item === `object` && !Array.isArray(item) && item !== null;
-}
 onMount(() => {
     selected = _options.filter((op) => op?.preselected);
 });
+function isObject(item) {
+    return typeof item === `object` && !Array.isArray(item) && item !== null;
+}
 // process proto options to full ones with mandatory labels
 $: _options = options.map((rawOp) => {
     // convert to objects internally if user passed list of strings or numbers as options
@@ -80,33 +81,33 @@ $: if (
 function add(label) {
     if (!readonly &&
         !selectedLabels.includes(label) &&
-        // for maxselect = 1 we always replace current token with new selection
+        // for maxselect = 1 we always replace current option with new selection
         (maxSelect == null || maxSelect == 1 || selected.length < maxSelect)) {
         searchText = ``; // reset search string on selection
-        const token = _options.find((op) => op.label === label);
-        if (!token) {
+        const option = _options.find((op) => op.label === label);
+        if (!option) {
             console.error(`MultiSelect: option with label ${label} not found`);
             return;
         }
         if (maxSelect === 1) {
-            selected = [token];
+            selected = [option];
         }
         else {
-            selected = [token, ...selected];
+            selected = [option, ...selected];
         }
         if (selected.length === maxSelect)
             setOptionsVisible(false);
-        dispatch(`add`, { token });
-        dispatch(`change`, { token, type: `add` });
+        dispatch(`add`, { option });
+        dispatch(`change`, { option, type: `add` });
     }
 }
 function remove(label) {
     if (selected.length === 0 || readonly)
         return;
-    selected = selected.filter((token) => label !== token.label);
-    const token = _options.find((option) => option.label === label);
-    dispatch(`remove`, { token });
-    dispatch(`change`, { token, type: `remove` });
+    selected = selected.filter((option) => label !== option.label);
+    const option = _options.find((option) => option.label === label);
+    dispatch(`remove`, { option });
+    dispatch(`change`, { option, type: `remove` });
 }
 function setOptionsVisible(show) {
     // nothing to do if visibility is already as intended
@@ -130,9 +131,7 @@ function handleKeydown(event) {
     // on enter key: toggle active option and reset search text
     else if (event.key === `Enter`) {
         if (activeOption) {
-            const { label, disabled } = activeOption;
-            if (disabled)
-                return;
+            const { label } = activeOption;
             selectedLabels.includes(label) ? remove(label) : add(label);
             searchText = ``;
         } // no active option means the options dropdown is closed in which case enter means open it
@@ -148,17 +147,30 @@ function handleKeydown(event) {
         }
         const increment = event.key === `ArrowUp` ? -1 : 1;
         const newActiveIdx = matchingEnabledOptions.indexOf(activeOption) + increment;
+        const ulOps = document.querySelector(`ul.options`);
         if (newActiveIdx < 0) {
             // wrap around top
             activeOption = matchingEnabledOptions[matchingEnabledOptions.length - 1];
-            // wrap around bottom
+            if (ulOps)
+                ulOps.scrollTop = ulOps.scrollHeight;
         }
         else if (newActiveIdx === matchingEnabledOptions.length) {
+            // wrap around bottom
             activeOption = matchingEnabledOptions[0];
-            // default case
+            if (ulOps)
+                ulOps.scrollTop = 0;
         }
-        else
+        else {
+            // default case
             activeOption = matchingEnabledOptions[newActiveIdx];
+            const li = document.querySelector(`ul.options > li.active`);
+            // scrollIntoViewIfNeeded() scrolls top edge of element into view so when moving
+            // downwards, we scroll to next sibling to make element fully visible
+            if (increment === 1)
+                li?.nextSibling?.scrollIntoViewIfNeeded();
+            else
+                li?.scrollIntoViewIfNeeded();
+        }
     }
     else if (event.key === `Backspace`) {
         const label = selectedLabels.pop();
@@ -167,8 +179,8 @@ function handleKeydown(event) {
     }
 }
 const removeAll = () => {
-    dispatch(`remove`, { token: selected });
-    dispatch(`change`, { token: selected, type: `remove` });
+    dispatch(`removeAll`, { options: selected });
+    dispatch(`change`, { options: selected, type: `removeAll` });
     selected = [];
     searchText = ``;
 };
@@ -181,7 +193,7 @@ const handleEnterAndSpaceKeys = (handler) => (event) => {
 };
 </script>
 
-<!-- z-index: 2 when showOptions is true ensures the ul.tokens of one <MultiSelect />
+<!-- z-index: 2 when showOptions is true ensures the ul.selected of one <MultiSelect />
 display above those of another following shortly after it -->
 <div
   {id}
@@ -194,7 +206,7 @@ display above those of another following shortly after it -->
   use:onClickOutside={() => dispatch(`blur`)}
 >
   <ExpandIcon height="14pt" style="padding: 0 3pt 0 1pt;" />
-  <ul class="tokens {ulTokensClass}">
+  <ul class="selected {ulSelectedClass}">
     {#if maxSelect == 1 && selected[0]?.label}
       <span on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}>
         {selected[0].label}
@@ -202,7 +214,7 @@ display above those of another following shortly after it -->
     {:else}
       {#each selected as { label }}
         <li
-          class={liTokenClass}
+          class={liSelectedClass}
           on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
         >
           {label}
@@ -253,7 +265,7 @@ display above those of another following shortly after it -->
       class:hidden={!showOptions}
       transition:fly|local={{ duration: 300, y: 40 }}
     >
-      {#each matchingOptions as { label, disabled, title = '', selectedTitle, disabledTitle = defaultDisabledTitle }}
+      {#each matchingOptions as { label, disabled, title = null, selectedTitle, disabledTitle = defaultDisabledTitle }}
         <li
           on:mouseup|preventDefault|stopPropagation
           on:mousedown|preventDefault|stopPropagation={() => {
@@ -294,8 +306,8 @@ display above those of another following shortly after it -->
     background: var(--sms-readonly-bg, lightgray);
   }
 
-  :where(ul.tokens > li) {
-    background: var(--sms-token-bg, var(--sms-active-color, cornflowerblue));
+  :where(ul.selected > li) {
+    background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
     align-items: center;
     border-radius: 4pt;
     display: flex;
@@ -305,7 +317,7 @@ display above those of another following shortly after it -->
     white-space: nowrap;
     height: 16pt;
   }
-  :where(ul.tokens > li button, button.remove-all) {
+  :where(ul.selected > li button, button.remove-all) {
     align-items: center;
     border-radius: 50%;
     display: flex;
@@ -320,7 +332,7 @@ display above those of another following shortly after it -->
     outline: none;
     padding: 0 2pt;
   }
-  :where(ul.tokens > li button:hover, button.remove-all:hover) {
+  :where(ul.selected > li button:hover, button.remove-all:hover) {
     color: var(--sms-remove-x-hover-focus-color, lightskyblue);
   }
   :where(button:focus) {
@@ -337,12 +349,13 @@ display above those of another following shortly after it -->
     min-width: 2em;
   }
 
-  :where(ul.tokens) {
+  :where(ul.selected) {
     display: flex;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
     flex: 1;
+    overscroll-behavior: none;
   }
 
   :where(ul.options) {

package/MultiSelect.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
         noOptionsMsg?: string | undefined;
         activeOption?: Option | null | undefined;
         outerDivClass?: string | undefined;
-        ulTokensClass?: string | undefined;
-        liTokenClass?: string | undefined;
+        ulSelectedClass?: string | undefined;
+        liSelectedClass?: string | undefined;
         ulOptionsClass?: string | undefined;
         liOptionClass?: string | undefined;
         removeBtnTitle?: string | undefined;

package/actions.js

@@ -14,3 +14,26 @@ export function onClickOutside(node, cb) {
         },
     };
 }
+// import { spring } from 'svelte/motion'
+// export default function boop(node: HTMLElement, params = {}) {
+//   const { setter } = params
+//   const springyRotation = spring(
+//     { x: 0, y: 0, rotation: 0, scale: 1 },
+//     { stiffness: 0.1, damping: 0.15 }
+//   )
+//   node.style.display = `inline-block`
+//   const unsubscribe = springyRotation.subscribe(({ x, y, rotation, scale }) => {
+//     node.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${scale})`
+//   })
+//   return {
+//     update({ isBooped: x = 0, y = 0, rotation = 0, scale = 1, timing }) {
+//       springyRotation.set(
+//         isBooped
+//           ? { x, y, rotation, scale }
+//           : { x: 0, y: 0, rotation: 0, scale: 1 }
+//       )
+//       if (isBooped) window.setTimeout(() => setter(false), timing)
+//     },
+//     destroy: unsubscribe,
+//   }
+// }

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "svelte": "MultiSelect.svelte",
   "bugs": {
@@ -14,8 +14,10 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.22",
     "@sveltejs/kit": "^1.0.0-next.202",
+    "@testing-library/svelte": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
+    "ava": "^3.15.0",
     "eslint": "^8.5.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "hastscript": "^7.0.2",

package/readme.md

@@ -33,6 +33,18 @@
 - **No dependencies:** needs only Svelte as dev dependency
 - **Keyboard friendly** for mouse-less form completion
 
+> ## Recent breaking changes
+>
+> - v2.0.0 added the ability to pass options as objects. As a result, `bind:selected` no longer returns simple strings but objects as well, even if you still pass in `options` as strings.
+> - v3.0.0 changed the `event.detail` payload for `'add'`, `'remove'` and `'change'` events from `token` to `option`, e.g.
+>
+>   ```js
+>   on:add={(e) => console.log(e.detail.token.label)} // v2.0.0
+>   on:add={(e) => console.log(e.detail.option.label)} // v3.0.0
+>   ```
+>
+>   It also added a separate event type `removeAll` for when the user removes all currently selected options at once which previously fired a normal `remove`. The props `ulTokensClass` and `liTokenClass` were renamed to `ulSelectedClass` and `liSelectedClass`. Similarly, the CSS variable `--sms-token-bg` changed to `--sms-selected-bg`.
+
 ## Installation
 
 ```sh
@@ -97,24 +109,25 @@ Full list of props/bindable variables for this component:
 
 `MultiSelect.svelte` dispatches the following events:
 
-| name     | details                         | description                                                                                                                                    |
-| -------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `add`    | `token: string`                 | Triggers when a new token is selected.                                                                                                         |
-| `remove` | `token: string`                 | Triggers when one or all selected tokens are removed. `event.detail.token` will be a single or multiple tokens, respectively.                  |
-| `change` | `token: string`, `type: string` | Triggers when a token is either added or removed, or all tokens are removed at once. `event.detail.type` will be either `'add'` or `'remove'`. |
-| `blur`   | none                            | Triggers when the input field looses focus.                                                                                                    |
+| name        | detail                                                                              | description                                                                                                                         |
+| ----------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `add`       | `{ option: Option }`                                                                | Triggers when a new option is selected.                                                                                             |
+| `remove`    | `{ option: Option }`                                                                | Triggers when one selected option provided as `event.detail.option` is removed.                                                     |
+| `removeAll` | `options: Option[]`                                                                 | Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected. |
+| `change`    | `{ option?: Option, options?: Option[] }`, `type: 'add' \| 'remove' \| 'removeAll'` | Triggers when a option is either added or removed, or all options are removed at once.                                              |
+| `blur`      | none                                                                                | Triggers when the input field looses focus.                                                                                         |
 
 ### Examples
 
 <!-- prettier-ignore -->
-- `on:add={(event) => console.log(event.detail.token.label)}`
-- `on:remove={(event) => console.log(event.detail.token.label)}`.
-- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.token.label}'`)}``
+- `on:add={(event) => console.log(event.detail.option.label)}`
+- `on:remove={(event) => console.log(event.detail.option.label)}`.
+- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option.label}'`)}``
 - `on:blur={yourFunctionHere}`
 
 ```svelte
 <MultiSelect
-  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.token.label}'`)}
+  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.option.label}'`)}
 />
 ```
 
@@ -131,8 +144,8 @@ The first, if you only want to make small adjustments, allows you to pass the fo
 - `color: var(--sms-text-color, inherit)`: Input text color.
 - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: `div.multiselect` border when focused. Falls back to `--sms-active-color` if not set which in turn falls back on `cornflowerblue`.
 - `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
-- `background: var(--sms-token-bg, var(--sms-active-color, cornflowerblue))`: Background of selected tokens.
-- `color: var(--sms-remove-x-hover+focus-color, lightgray)`: Hover color of cross icon to remove selected tokens.
+- `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
+- `color: var(--sms-remove-x-hover+focus-color, lightgray)`: Hover color of cross icon to remove selected options.
 - `color: var(--sms-remove-x-hover-focus-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
 - `background: var(--sms-options-bg, white)`: Background of options list.
 - `background: var(--sms-li-selected-bg, inherit)`: Background of selected list items in options pane.
@@ -152,8 +165,8 @@ For example, to change the background color of the options dropdown:
 The second method allows you to pass in custom classes to the important DOM elements of this component to target them with frameworks like [Tailwind CSS](https://tailwindcss.com).
 
 - `outerDivClass`
-- `ulTokensClass`
-- `liTokenClass`
+- `ulSelectedClass`
+- `liSelectedClass`
 - `ulOptionsClass`
 - `liOptionClass`
 
@@ -161,9 +174,9 @@ This simplified version of the DOM structure of this component shows where these
 
 ```svelte
 <div class={outerDivClass}>
-  <ul class={ulTokensClass}>
-    <li class={liTokenClass}>First selected tag</li>
-    <li class={liTokenClass}>Second selected tag</li>
+  <ul class={ulSelectedClass}>
+    <li class={liSelectedClass}>First selected tag</li>
+    <li class={liSelectedClass}>Second selected tag</li>
   </ul>
   <ul class={ulOptionsClass}>
     <li class={liOptionClass}>First available option</li>
@@ -174,16 +187,16 @@ This simplified version of the DOM structure of this component shows where these
 
 ### Granular control through global CSS
 
-You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.tokens` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
+You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
 
 ```css
 :global(.multiselect) {
   /* top-level wrapper div */
 }
-:global(.multiselect ul.tokens > li) {
+:global(.multiselect ul.selected > li) {
   /* selected options */
 }
-:global(.multiselect ul.tokens > li button),
+:global(.multiselect ul.selected > li button),
 :global(.multiselect button.remove-all) {
   /* buttons to remove a single or all selected options at once */
 }